Unreal Engine で Pixel Streaming を開始する

あるコンピュータから同じネットワーク上の他のコンピュータやモバイル デバイスに、Unreal Engine アプリケーションのストリーミングを開始して実行します。

Epicでは、GoogleがWebRTCのバージョンにおける脆弱性を公開 (詳細はこちら)したことを認識しており、EOS SDKに対する影響および次のステップを調査しています

以下のステップに従うと、レンダリングされた出力を Unreal Engine プロジェクトからローカル ネットワーク経由でブラウザやモバイル デバイスにストリーミングできます。

このページのステップの画像は、「Third-Person Blueprint (サードパーソン ブループリント)」テンプレートからビルドされたプロジェクトを用いたステップを示しています。ただし、それ以外の Unreal Engine プロジェクトでも同じステップで作成できるはずです。

前提条件

  • OS とハードウェアを確認する - Pixel Streaming プラグインは、特定の種類の GPU ハードウェアを搭載した Windows および Linux オペレーティング システムを実行しているコンピュータでのみビデオをエンコードできます。詳細については、「Pixel Streaming リファレンス」を参照してください。

  • node.js をインストールする -使用するコンピュータに node.js がインストールされていない場合、ダウンロードしてインストールする 必要があります。

  • ネットワーク ポートを開く - ローカル ネットワークで通信するために、ネットワーク ポート 80, 8888 が開いていることを確認します。これらのデフォルト設定を変更する必要がある場合は、「Pixel Streaming リファレンス」を参照してください。

  • 他の Web サーバーを停止する - コンピュータで他の Web サーバーを実行している場合、この作業を行っている間は停止する必要があります。

  • IP アドレス - インターネット経由で Pixel Streaming をテストする場合は、自分のコンピュータの IP アドレスを把握している必要があります。
    ただし、最初に LAN または VPN 内で Pixel Streaming を開始することをお勧めします。つまり、localhost または 127.0.0.1 を Pixel Streaming IP アドレスとして使用することができます。 別のネットワーク上のマシンから接続する場合は、シグナリング サーバーが STUN/TURN サーバーを使用するように設定する必要があります。peerConnectionOptions で STUN/TURN サーバーを指定して Signaling サーバーを構成する方法の詳細については、「Pixel Streaming リファレンス ページ」を参照してください。

1 - Unreal Engine アプリケーションを準備する

このステップでは、プロジェクト用のスタンドアロン実行可能ファイルを作成します。

  • Pixel Streaming プラグインが動作するのは、プロジェクトがパッケージ アプリケーションとして実行されているとき、または Unreal Editor から [Standalone Game] オプションで起動されているときだけです。

  • Pixel Streaming プラグインがアプリケーションからオーディオを抽出しストリームするには、特別なコマンドライン フラグ -AudioMixer を指定して Unreal Engine を起動する必要があります。以下の手順では、2 つのシナリオでこれを設定する方法を示します。

  1. Unreal Editor でプロジェクトを開きます。

  2. Unreal Editor のメイン メニューから、[Edit (編集)] > [Plugins (プラグイン)] を選択します。

  3. [Graphics (グラフィック)] カテゴリで [Pixel Streaming] プラグインを見つけ、[Enabled (有効)] チェックボックスをオンにします。

    Enable the Pixel Streaming plugin

  4. [Restart Now (すぐに再起動)] をクリックしてプロジェクトを再起動し、変更を適用します。

    Restart now

  5. Unreal Editor でプロジェクトを開き、メイン メニューから [Edit (編集)] > [Project Settings (プロジェクト設定...)] を選択します。

  6. プロジェクトにキャラクターが含まれ、スマートフォンやタブレットなどのタッチ デバイスからの入力を有効にして、キャラクターをレベル内で移動させる場合は、オンスクリーンのタッチ コントローラーを表示させると便利です。 [Engine (エンジン)] > [Input category (入力カテゴリ)] で、[Always Show Touch Interface (タッチ インターフェースを常に表示)] 設定を見つけてオンにします。

    Always Show Touch Interface

これはオプションで、すべてのプロジェクトで必要になる訳ではありません。ただし Third-Person テンプレートのようなプロジェクトでは、この設定を有効にすることで、タッチ デバイスを使用するユーザーがストリームされたアプリケーションを確実にコントロールできます (プロジェクトの Player Controller がタッチ入力をサポートする場合に限る)。

  1. メイン メニューから、[Edit (編集)]>[Editor Preferences... (エディタ環境設定)] を選択します。

  2. [Level Editor (レベル エディタ)] > [Play (プレイ)] カテゴリで、[Additional Launch Parameters (追加起動パラメータ)] 設定を見つけ、その値を「-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888」に設定します。

    Additional Launch Parameters

  3. Windows 用プロジェクトをパッケージ化しますUnreal Editor のメイン メニューで、[Files (ファイル)] > [Package Project (プロジェクトをパッケージ化)] > [Windows (64-bit)] を選択します。

    Package for Windows 64-bit

  4. Unreal Editor でプロジェクトのパッケージ化されたバージョンを配置するコンピュータ上のフォルダを参照し、[Select Folder (フォルダを選択)] をクリックします。

    Select a folder

  5. Unreal Editor がパッケージ化プロセスを開始します。

    Packaging progress indicator

  6. パッケージ化プロセスが完了したら、上記の手順 6 で選択したフォルダに移動します。次のようなコンテンツを含む Windows フォルダを検索します。

    Packaged output

  7. パッケージ化されたアプリケーションを起動するたびに、上記の手順 8 で設定した同じコマンドライン フラグをアプリケーションに渡す必要があります。これを行う 1 つの方法としては、ショートカットの設定があります。

    1. Alt キーを押したままにして対象の .exe ファイルをドラッグして、同じフォルダ (またはコンピュータの他の場所) に新しいショートカットを作成します。

      Create a shortcut

    2. ショートカットを右クリックして、コンテキスト メニューから [Properties (プロパティ)] を選択します。

      Shortcut properties

    3. [Shortcut (ショートカット)] タブ ([Shortcut Properties (ショートカット プロパティ)] ウィンドウ) で、「-AudioMixer」を [Target (リンク先)] フィールドの最後に追加して、[OK] をクリックします。

      Command line parameters

Pixel Streaming システムを起動したら、場合によっては -RenderOffScreen コマンドライン パラメータも追加する必要があります。Unreal Engine アプリケーションのウィンドウが誤って最小化された場合、Pixel Streaming ビデオと入力ストリームの動作が停止しますが、 -RenderOffScreen によって、表示ウィンドウがないヘッドレス モードでもアプリケーションが動作するため、停止する可能性がなくなります。

最終結果

Pixel Streaming プラグインが有効な、スタンドアロン Unreal Engine アプリケーションのパッケージ化が完了し、レンダリングしたフレームとオーディオをストリームする準備ができました。

2 - Pixel Streaming サーバーを取得する

最近の Pixel Streaming の変更により、Pixel Streaming のフロントエンドとウェブ サーバーの要素が外部リポジトリに移されました。これは「Pixel Streaming インフラストラクチャ」と呼ばれています。

Pixel Streaming インフラストラクチャにアクセスするには、複数の方法があります。

  1. 次の URL から github リポジトリに直接アクセスする。https://github.com/EpicGames/PixelStreamingInfrastructure

  2. 任意の端末で git clone --branch UE5.1 https://github.com/EpicGames/PixelStreamingInfrastructure.git コマンドを使用する (git がインストールされていることを確認してください)。

  3. \Engine\Plugins\Media\PixelStreaming\Resources\WebServers に移動し、get_ps_servers コマンドを実行します (適宜、Windows 用の .bat スクリプトまたは Linux 用の .sh スクリプトを使用してください)。これにより、Pixel Streaming インフラストラクチャの関連ブランチが自動的にそのフォルダに取り込まれます。

上記の git コマンドは、インフラストラクチャの 5.2 ブランチをプルします。別のブランチが必要な場合は、git コマンドを適宜修正してください。

Pixel Streaming のフロントエンドとウェブ サーバーの変更に関する詳細については、「Pixel Streaming インフラストラクチャ」を参照してください。

3 - サーバーを起動する

このステップでは、クライアント接続を受け入れ、レンダリングされたフレームとオーディオを Unreal Engine アプリケーションからクライアントのブラウザにストリームする Web サービスを開始します。前の手順を実行していない場合は、これらのサーバーにアクセスできません。

次の手順は、Windows を使用していることを前提としています。ただし、Lunux でも「SignallingWebServer\platform_scripts\bash」フォルダでスクリプトを実行すること以外は同じプロセスです。

  1. Pixel Streaming インフラストラクチャをプルした場所で、「SignallingWebServer」フォルダの下にある Signaling サーバーの場所を見つけます。

    SSLocal.JPG

  2. Signaling サーバーの準備をするには、PowerShell を管理者として開き、SignallingWebServer\platform_scripts\cmd\setup.ps1 を実行することから始めます。これにより、必要なすべての依存関係がインストールされます。

  3. SignallingWebServer\platform_scripts\cmd\Start_SignallingServer.ps1 を実行して Signaling サーバーを起動します。サーバーが起動し、接続を受け入れる準備が完了すると、コンソール ウィンドウに次の行が表示されます。

       WebSocket listening to Streamer connections on :8888
        WebSocket listening to Players connections on :80
        Http listening on *: 80
  4. 次に、前のセクションで作成したショートカットから Unreal Engine アプリケーションを起動します。または、コマンドラインからアプリケーションを起動する場合は、次のコマンドを実行します。

        MyPixelStreamingApplication.exe -PixelStreamingIP=127.0.0.1 -PixelStreamingPort=8888

便宜上、Unreal Engine アプリケーションをパッケージ化すると、これらのサーバーもパッケージ化された実行ファイルを含むフォルダにコピーされます。それらは、上記と同じパスの「Engine」サブフォルダの下にあります。そして、Unreal Engine のインストール フォルダからサーバーを起動するのではなく、そこからサーバーを起動できます。エンジン
ただし、これらのフォルダ内のファイル、特に Signalling and Web サーバーのプレイヤー ページまたはコンフィギュレーション ファイルを変更する必要がある場合は、元の場所でそれらを変更する必要があることに注意してください。パッケージ フォルダでそれらを変更すると、次にアプリケーションをパッケージ化したときに変更内容が上書きされる可能性があります。

最終結果

Unreal Engine アプリケーションが Signaling and Web サーバーに接続すると、Signaling and Web サーバーによって開かれたコンソール ウィンドウに次の出力行が表示されます。

Streamer connected

これは、Pixel Streaming プラグイン を有効にして Unreal Engine アプリケーションを実行しており、フロントエンドの Signaling and Web サーバーは接続クライアントを Unreal Engine アプリケーションにルーティングする準備ができていることを示しています。

必要に応じて、Unreal Engine アプリケーションと Signaling and Web サーバーを個別に停止および再起動できます。両方が同時に実行されている限り、自動的に再接続されるはずです。

この時点で、セットアップに必要なものがすべて揃い、コンピュータで作業できるようになります。あとはブラウザを接続するだけです。

4 - 接続する

この手順では、複数の異なるデバイスで実行されている Web ブラウザを Pixel Streaming ブロードキャストに接続します。

  1. Unreal Engine アプリケーションを実行している同じコンピュータで、Alt と Tab を同時押ししてフォーカスを Unreal Engine アプリケーションから切り替え、サポートされている Web ブラウザを起動します (Google Chrome と Mozilla Firefox だと安定的に動作します)。

  2. アドレス バーで、http://127.0.0.1 に移動します。これはローカル マシンの IP アドレスなので、リクエストは Signalling サーバーにより処理されます。

    Connect to the localhost

  3. ページをクリックして接続し、[Play (プレイ)] ボタンをもう一度クリックしてストリームを開始します。  

  4. これでアプリケーションに接続され、レンダリングされた出力がプレイヤーの Web ページの中央にストリーミングされていることがわかります。

    Media streaming to localhost

    デフォルトのプレイヤー ページは、キーボード、マウス、およびタッチスクリーンの入力を Unreal Engine に転送するようにすでに設定されています。そのため、アプリケーションを直接制御する場合とまったく同じようにアプリケーションを操作できます。 

  5. ウィンドウの左側にある [Add (+) (追加)] ボタンをクリックして、ストリームを制御するための組み込みオプションを開きます。利用可能なオプションの詳細については、https://github.com/EpicGames/PixelStreamingInfrastructure をご覧ください。

    これらのコントロールがどのように実装されているかを確認するには、Signaling Web サーバーのフォルダの下にある「player.html」および「app.js」ファイルの内容を参照してください。

  6. 次に、ネットワークにある他のコンピュータやモバイル デバイスを見つけます。同じ手順を繰り返しますが、127.0.0.1 を使用するのではなく、ブラウザで Unreal Engine アプリケーションと Signaling サーバーを実行しているコンピュータの IP アドレスに移動します。

    Media streaming to remote host

最終結果

コンピュータで動作している Unreal Engine のインスタンスが 1 つあり、ローカル ネットワークを通じて、複数デバイスにメディア ストリームをブロードキャストできるようになりました。接続済みデバイスそれぞれで、元のデスクトップ PC と同じレンダリングで同じレベルの同じビューが表示されます。

デフォルトでは、すべての接続済みデバイスで Unreal Engine アプリケーションに対するコントロールを共有し、すべてのキーボード、マウス、タッチスクリーン入力が転送されます。

pixelstreaming-endresult-chrome.png

pixelstreaming-endresult-iossafari.png

pixelstreaming-endresult-gpixel.png

デスクトップ

iPhone

Android

5 - 応用編

前の各ステップでは、単一のサーバー ホストとデフォルト プレイヤー ページを使用する比較的簡単な設定を順にたどりました。もう少し手を加えることで、Pixel Streaming システムのさらなるパワーを引き出すことができます。たとえば、以下のとおりです。

  • プロジェクトのニーズを満たすように、プレイヤー HTML ページを大幅に設計し直すことができます。入力を Unreal Engine アプリケーションに送信できるユーザーをコントロールしたり、カスタム ゲームプレイ イベントを Unreal Engine に発信するページに HTML5 UI エレメントを作成するユーザーをコントロールしたりすることもできます。
    詳細については、「プレイヤー Web ページをカスタマイズする」を参照してください。実際の例については、Epic Games Launcher の [Learn (ラーニング)] タブにある [Pixel Streaming Demo (Pixel Streaming デモ)] を参照してください。

  • オープン インターネットまたはサブネット間で Pixel Streaming サービスを提供する場合は、より高度なネットワーク構成が必要になる可能性があります。または、接続している各クライアントが Unreal Engine の個別のインスタンスから、または異なるコントロールを提供する個別のプレイヤー ページを通じてコンテンツをストリーミングしなければならない場合もあります。
    このようなトピックの詳細については、「ホスティングおよびネットワーキングの操作ガイド」を参照してください。

  • Pixel Streaming システムの各コンポーネントには、エンコード解像度、画面サイズ、IP アドレス、通信ポートなどの制御に使用するための多数のコンフィギュレーション プロパティがあります。
    これらすべてのプロパティとその設定方法については、「Pixel Streaming リファレンス」を参照してください。

  • Pixel Streaming の新しい実験段階の機能を確認するには、「実験段階の Pixel Streaming 機能」ページを参照してください。

  • ストリーミングのチューニング ガイド」ページは、ストリームの品質と設定をさらに細かく制御するのに役立ちます。

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル