Pixel Streaming を開始する | Unreal Engine 5.0 ドキュメンテーション

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

以下のステップに従って、Unreal Engine プロジェクトからローカルネットワークを通じて、ブラウザとモバイルデバイスにレンダリング出力をストリームします。

このぺージのステップで使用される画像は、Third-Person ブループリント テンプレートから構築されたプロジェクトを使用する手順を示しています。ただし、どの Unreal Engine プロジェクトでも同じステップを使用できます。

前提条件

OS とハードウェアを確認する- Pixel Streaming プラグインが動画をエンコードできるのは、Windows および Linux オペレーティングシステムが動作する、特定のタイプの GPU ハードウェアが搭載されたコンピュータだけです。詳細については、「Pixel Streaming リファレンス」を参照してください。
node.js をインストールする -使用するコンピュータに node.js がインストールされていない場合、ダウンロードしてインストールする必要があります。
ネットワークポートを開く - ローカルネットワークで、ネットワークポートの「80, 8888」が通信用にオープンになっていることを確認します。これらのデフォルト値を変更する必要がある場合は、「Pixel Streaming リファレンス」を参照してください。
他の Web サーバーを停止する - 使用するコンピュータで他の Web サーバーが動作している場合は、いったん停止します。
IP アドレス - インターネット経由で Pixel Streaming をテストする場合は、使用するコンピュータの IP アドレスを把握しておく必要があります。まず LAN や VPN 内で Pixel Streaming を開始することをお勧めします。この場合、Pixel Streaming の IP アドレスとして localhost または 127.0.0.1 を使用することができます。別のネットワーク上のマシンから接続する場合は、シグナリングサーバーが STUN/TURN サーバーを使用するように設定する必要があります。STUN/TURN サーバーを指定する peerConnectionOptions を使ってシグナリングサーバーを設定する方法については、「Pixel Streaming リファレンス」を参照してください。

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

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

Pixel Streaming プラグインが動作するのは、プロジェクトがパッケージアプリケーションとして実行されているとき、または Unreal Editor から [Standalone Game] オプションで起動されているときだけです。
Pixel Streaming プラグインがアプリケーションからオーディオを抽出しストリームするには、特別なコマンドラインフラグ -AudioMixer を指定して Unreal Engine を起動する必要があります。以下の手順では、2 つのシナリオでこれを設定する方法を示します。

Unreal Editor でプロジェクトを開きます。
Unreal Editor のメインメニューから、[Edit (編集)] > [Plugins (プラグイン)] を選択します。
[Graphics (グラフィック)] カテゴリで [Pixel Streaming] プラグインを見つけ、[Enabled (有効)] チェックボックスをオンにします。
[Restart Now (すぐに再起動)] をクリックしてプロジェクトを再起動し、変更を適用します。
Unreal Editor でプロジェクトを開き、メインメニューから [Edit (編集)] > [Project Settings (プロジェクト設定...)] を選択します。
プロジェクトにキャラクターが含まれ、スマートフォンやタブレットなどのタッチデバイスからの入力を有効にして、キャラクターをレベル内で移動させる場合は、オンスクリーンのタッチコントローラーを表示させると便利です。 [Engine (エンジン)] > [Input category (入力カテゴリ)] で、[Always Show Touch Interface (タッチインターフェースを常に表示)] 設定を見つけてオンにします。これはオプションで、すべてのプロジェクトで必要になる訳ではありません。ただし Third-Person テンプレートのようなプロジェクトでは、この設定を有効にすることで、タッチデバイスを使用するユーザーがストリームされたアプリケーションを確実にコントロールできます (プロジェクトの Player Controller がタッチ入力をサポートする場合に限る)。
メインメニューから、[Edit (編集)]>[Editor Preferences... (エディタ環境設定)] を選択します。
[Level Editor (レベルエディタ)] > [Play (プレイ)] カテゴリで、[Additional Launch Parameters (追加起動パラメータ)] 設定を見つけ、その値を「-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888」に設定します。
Windows 用プロジェクトをパッケージ化しますUnreal Editor のメインメニューで、[Files (ファイル)] > [Package Project (プロジェクトをパッケージ化)] > [Windows (64-bit)] を選択します。
Unreal Editor でプロジェクトのパッケージ化されたバージョンを配置するコンピュータ上のフォルダを参照し、[Select Folder (フォルダを選択)] をクリックします。
Unreal Editor がパッケージ化プロセスを開始します。
パッケージ化プロセスが完了したら、上記の手順 6 で選択したフォルダに移動します。次のようなコンテンツを含む「WindowsNoEditor」フォルダを検索します。
パッケージ化されたアプリケーションを起動するたびに、-AudioMixer コマンドラインフラグを渡す必要があります。これを実行する方法の 1 つとして、ショートカットを設定できます。
1. Alt キーを押したままにして対象の .exe ファイルをドラッグして、同じフォルダ (またはコンピュータの他の場所) に新しいショートカットを作成します。
2. ショートカットを右クリックして、コンテキストメニューから [Properties (プロパティ)] を選択します。
3. [Shortcut (ショートカット)] タブ ([Shortcut Properties (ショートカットプロパティ)] ウィンドウ) で、「-AudioMixer」を [Target (リンク先)] フィールドの最後に追加して、[OK] をクリックします。

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

最終結果

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

2 - 各サーバーを起動する

このステップでは、クライアント接続を受け入れ、レンダリングされたフレームとオーディオを Unreal Engine アプリケーションからクライアントのブラウザにストリームする Web サービスを開始します。

以下のステップでは Windows の使用を想定しています。ただし、「SignallingWebServer\platform_scripts\cmd\bashLinux」フォルダを使用する点以外は Linux も同じプロセスです。

Unreal Engine のインストールフォルダで、「Samples/PixelStreaming/WebServers/SignallingWebServer」の下の Signalling サーバーを確認します。
Signalling Server の準備をするには、管理者として PowerShell を開き、SignallingWebServer\platform_scripts\cmd\setup.ps1 を実行することから始めます。これにより、必要なすべての依存関係がインストールされます。
「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

ここで、前のステップで作成したショートカットから、Unreal Engine アプリケーションを起動します。コマンドラインからアプリケーションを起動したい場合は、次のコマンドを実行してください。

		MyPixelStreamingApplication.exe -PixelStreamingIP=127.0.0.1 -PixelStreamingPort=8888

利便上、Unreal Engine アプリケーションをパッケージ化する際に、これらのサーバーもパッケージ実行可能ファイルを含むフォルダにコピーされます。これらは、前に示した同じパスにある「Engine」サブフォルダに配置され、そこからサーバーを起動することができます。Unreal Engine インストールフォルダから起動する必要はありません。ただし、これらのフォルダにある何らかのファイル、特に Signalling and Web サーバー用のコンフィギュレーションファイルやプレイヤーページを変更する必要がある場合は、元の場所にあるファイルを変更する必要があります。パッケージフォルダでそれらを変更した場合は、次回アプリケーションをパッケージ化するときに変更が上書きされます。

最終結果

Unreal Engine アプリケーションが動作していることを WebRTC Proxy サーバーが検出した場合に、Signalling サーバーに接続して、アプリケーションからコンテンツのストリームを受信する準備ができていることを通知します。

Streamer connected: ::1

つまり、Pixel Streaming プラグインを使って Unreal Engin アプリケーションが実行中で、フロントエンドの Signalling and Web サーバーがクライアントと Unreal Engine アプリケーションに接続するルート設定ができたことを意味します。

必要に応じて、Unreal Engine アプリケーションと Signalling and Web サーバーを独立して停止したり再開したりできます。同時に実行されている限り、これらは自動的に再接続することが可能です。

この時点で、コンピュータで必要なすべてのものが設定されて動作します。後はブラウザを接続するだけです。

3 - 接続する

このステップで、複数の異なるデバイスで動作している Web ブラウザを Pixel Streaming ブロードキャストに接続します。

Unreal Engine アプリケーションが動作しているコンピュータ上で、Alt + Tab キーを使用してフォーカスを Unreal Engine アプリケーションから切り替え、サポートされている Web ブラウザ (Google Chrome と Mozilla Firefox が安全な選択) を起動します。
アドレスバーに「http://127.0.0.1」と入力して接続します。これはローカルマシンの IP アドレスなので、リクエストは Signalling サーバーにより処理されます。
ページをクリックして接続し、[Play (再生)] ボタンを再びクリックして、ストリームを開始します。
アプリケーションに接続されました。レンダリングされた出力ストリーミングがプレイヤー Web ページの中央に表示されます。デフォルトプレイヤーページは、キーボード、マウス、タッチスクリーン入力を Unreal Engine に転送するように設定されています。その結果、アプリケーションを直接コントロールする場合と同じように正確に操作できます。

ウィンドウの右にある [+] ボタンをクリックして、ストリームをコントロールする、いくつかのビルトインオプションを展開します。

設定	説明
Enlarge Display to Fill Window (表示をウィンドウ全体に拡大)	メディアプレイヤーのサイズをブラウザウィンドウの現在のサイズに合わせて変更するか、固定サイズで同じ位置のままにするのかを決定します。
Quality control ownership (品質コントロールオーナーシップ)	利用可能な帯域幅、つまりストリームエンコーディングの品質を判断するために、現在のブラウザ接続を使用するよう Pixel Streaming プラグインのエンコーダを設定します。 Pixel Streaming はストリームの品質を利用可能な帯域幅に適応させますが、ビデオフレームは Pixel Streaming プラグインで 1 回エンコードされるだけです。この 1 回のエンコーディングがすべてのクライアントで使用されます。したがって、1 つのクライアント接続のみが、適応可能なストリーミングで使用される品質を「所有」することになります。他のクライアントとサーバーの接続がはるかに良好な状態である場合、これらのクライアントでは必要なレベルよりも低品質のストリームが表示される結果になることがあります。一方、他のクライアントとサーバーの接続がにはるかに悪い状態である場合、それらのクライアントでは遅延やジッタリングが発生することがあります。デフォルトでは、新しいブラウザが接続するたびに、それがストリームの所有権を獲得します。このチェックボックスを使用して、他の接続済みブラウザから所有権を再び取得します。
Show Stats (統計情報を表示)	ブラウザと WebRTC Proxy サーバー間の接続に関する統計情報を表示します。

Signalling Web サーバーフォルダの「player.htm」と「app.js」ファイルの内容を参照することで、これらのコントロールがどのように実装されているかを確認できます。

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

最終結果

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

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


デスクトップ	iPhone	Google Pixel

4 - 応用編

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

プロジェクトのニーズを満たすように、プレイヤー HTML ページを大幅に設計し直すことができます。入力を Unreal Engine アプリケーションに送信できるユーザーをコントロールしたり、カスタムゲームプレイイベントを Unreal Engine に発信するページに HTML5 UI エレメントを作成するユーザーをコントロールしたりすることもできます。詳細については、「プレイヤー Web ページのカスタマイズを参照してください。実例は、エピックゲームズのランチャーの [Learn (ラーニング)] タブにあるピクセルストリーミングデモをご参照ください。
オープンなインターネット、あるいはサブネットにまたがって Pixel Streaming サービスを提供する必要がある場合は、さらに高度なネットワーク設定が必要になります。さらに、Unreal Engine の別のインスタンスから、または異なるコントロールを備えた別のプレイヤーページを通じて、接続クライアントストリームコンテンツを提供することも可能です。これらのトピックの詳細については「ホスティングおよびネットワーキングガイド」を参照してください。
Pixel Streaming システムの各コンポーネントには多くのコンフィギュレーションプロパティがあり、これらを使用して、エンコーディング解像度、画面サイズ、各 IP アドレスと通信ポートなどをコントロールできます。これらのプロパティと設定方法の詳細については「Pixel Streaming リファレンス」を参照してください。