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

以下のステップに従うと、レンダリングされた出力を 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 サーバーを使用するように Signaling サーバーを構成する必要があります。peerConnectionOptions で STUN/TURN サーバーを指定して Signaling サーバーを構成する方法の詳細については、「Pixel Streaming リファレンスページ」を参照してください。

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

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

Pixel Streaming プラグインは、プロジェクトをパッケージ化されたアプリケーションとして実行する場合、または [Standalone Game (スタンドアローンゲーム)] オプションを使用して Unreal Editor から起動する場合にのみ機能します。
Pixel Streaming プラグインがアプリケーションからオーディオを抽出してストリーミングするには、Unreal Engine を特別なコマンドラインフラグである -AudioMixer で起動する必要があります。以下の手順は、両方のシナリオでこれを設定する方法を示しています。

Unreal Editor でプロジェクトを開きます。
Unreal Editor のメインメニューで、[Edit (編集)] > [Plugins (プラグイン)] を選択します。
[Graphics (グラフィック)] カテゴリで、Pixel Streaming プラグインを見つけて、[Enabled (有効)] ボックスをオンにします。
[Restart Now (すぐに再起動)] をクリックしてプロジェクトを再起動し、変更を適用します。
Unreal Editor に戻り、メインメニューから [Edit] > [Project Settings (プロジェクト設定)] を選択します。
プロジェクトにキャラクターが含まれていて、スマートフォンやタブレットなどのタッチデバイスからの入力を有効にしてそのキャラクターをレベル内で動かしたい場合、画面上のタッチコントローラーを表示することもできます。 [Engine (エンジン)] > [Input (入力)] カテゴリ で、[Always Show Touch Interface (タッチインターフェースを常に表示)] 設定を有効にします。これはオプションであり、すべてのプロジェクトに必須というわけではありません。ただし、「Third-Person (サードパーソン)」テンプレートのようなプロジェクトの場合、これにより、タッチデバイスを使用するユーザーがストリーミングされたアプリケーションを制御できるようになります (プロジェクトのプレイヤーコントローラーがタッチ入力をサポートしている場合)。
メインメニューから、[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 で選択したフォルダに移動します。次のようなコンテンツを含む「Windows」フォルダが見つかります。
パッケージ化されたアプリケーションを起動するたびに、上記の手順 8 で設定した同じコマンドラインフラグをアプリケーションに渡す必要があります。これを行う 1 つの方法としては、ショートカットの設定があります。
1. Alt キーを押しながら .exe ファイルをドラッグして、同じフォルダ (またはコンピュータ上の任意の場所) に新しいショートカットを作成します。
2. ショートカットを右クリックし、コンテキストメニューから [Properties (プロパティ)] を選択します。
3. [Shortcut Properties (ショートカットプロパティ)] ウィンドウの [Shortcut (ショートカット)] タブで、[Target (ターゲット)] フィールドの末尾にテキスト -AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888 を追加し、[OK] をクリックします。

Pixel Streaming システムを起動して実行できたら、-RenderOffScreen コマンドラインパラメータを追加することもできます。Unreal Engine アプリケーションウィンドウが誤って最小化されてしまった場合、Pixel Streaming ビデオと入力ストリームが機能しなくなります。その予防策として、-RenderOffScreen はウィンドウを表示せずにアプリケーションをヘッドレスモードで実行します。

最終結果

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

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

Pixel Streaming に対する最近の変更により、Pixel Streaming のフロントエンドと Web サーバー要素が外部リポジトリに移動されました。これを Pixel Streaming インフラストラクチャと呼びます。

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

次の URL から github リポジトリに直接アクセスします。https://github.com/EpicGames/PixelStreamingInfrastructure
任意の端末で git clone --branch UE5.1 https://github.com/EpicGames/PixelStreamingInfrastructure.git コマンドを使用する (git がインストールされていることを確認してください)。
\Engine\Plugins\Media\PixelStreaming\Resources\WebServers に移動し、get_ps_servers コマンドを実行します (適宜、Windows 用の .bat スクリプトまたは Linux 用の .sh スクリプトを使用してください)。これにより、Pixel Streaming インフラストラクチャの関連ブランチが自動的にそのフォルダに取り込まれます。

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

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

3 - サーバーを起動する

このステップでは、Unreal Engine アプリケーションとクライアントのブラウザ間のピアツーピア接続を確立するのに役立つ Web サービスを開始します。前の手順を実行していない場合は、これらのサーバーにアクセスできません。

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

Pixel Streaming インフラストラクチャをプルした場所で、「SignallingWebServer」フォルダの下にある Signaling サーバーの場所を見つけます。
Signaling サーバーの準備をするには、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 アプリケーションが Signaling and Web サーバーに接続すると、Signaling and Web サーバーによって開かれたコンソールウィンドウに次の出力行が表示されます。

Streamer connected: ::1

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

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

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

4 - 接続する

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

Unreal Engine アプリケーションを実行している同じコンピュータで、Alt と Tab を同時押ししてフォーカスを Unreal Engine アプリケーションから切り替え、サポートされている Web ブラウザを起動します (Google Chrome と Mozilla Firefox だと安定的に動作します)。
アドレスバーで、http://127.0.0.1 に移動します。これはローカルマシンの IP アドレスであるため、リクエストは Signaling サーバーによって処理されるはずです。
ページをクリックして接続し、[Play (プレイ)] ボタンをもう一度クリックしてストリームを開始します。
これでアプリケーションに接続され、レンダリングされた出力がプレイヤーの Web ページの中央にストリーミングされていることがわかります。デフォルトのプレイヤーページは、キーボード、マウス、およびタッチスクリーンの入力を Unreal Engine に転送するようにすでに設定されています。そのため、アプリケーションを直接制御する場合とまったく同じようにアプリケーションを操作できます。

ウィンドウの左側にある [Add (+) (追加)] ボタンをクリックして、ストリームを制御するための組み込みオプションを開きます。

設定	説明
Enlarge Display to Fill Window (ディスプレイをウィンドウ全体に拡大)	ブラウザウィンドウの現在のサイズに合わせてメディアプレイヤーのサイズを変更するか、サイズと位置を固定したままにするかを決定します。
Is Quality Controller? (品質管理者か)	Pixel Streaming プラグインのエンコーダが現在のブラウザ接続を使用して、利用可能な帯域幅を決定し、ストリームエンコーディングの品質を決定します。 Pixel Streaming は利用可能な帯域幅に合わせてストリームの品質を調整しますが、ビデオフレームは Pixel Streaming プラグインによって一度だけエンコードされます。その 1 つのエンコーディングがすべてのクライアントに使用されます。したがって、アダプティブストリーミングに使用される品質を「保持」できるクライアント接続は 1 つだけとなります。他のクライアントのサーバーへの接続がそれよりはるかに良好な場合、表示されるストリームが必要以上に低品質になる可能性があります。一方、他のクライアントのサーバーへの接続がそれよりはるかに悪い場合は、ラグやジッターが発生する可能性があります。デフォルトでは、新しいブラウザが接続するたびに、ストリームの所有権を引き継ぎます。接続されている他のブラウザでこのチェックボックスを有効にすると、所有権を取り戻すことができます。
Match Viewport Resolution (ビューポート解像度に合わせる)	ブラウザと Unreal Engine アプリケーション間の接続に関する統計を視覚化します。
Offer to Receive (受け取るオファー)	ブラウザが、Unreal Engine アプリケーションではなく WebRTC ハンドシェイクを開始します。これは、フロントエンドをカスタマイズする人向けの高度な設定です。
Prefer SFU (SFU を優先)	Selective Forwarding Unit の使用を試みます。実行中の場合にのみ機能します。
Use Microphone (マイクを使用)	マイクからオーディオ入力の受信を開始し、ストリームを介して再生します。これは現在、ローカルでのみ機能します。
Force Mono Audio (モノラルを強制)	すべてのオーディオをステレオではなくモノラルとして送信し始めます。
Force TURN (TURN を強制)	TURN サーバー経由でのみ接続を試みます。アクティブな TURN サーバーがないと機能しません。
Control Scheme (スキームを制御)	ストリームがマウスをキャプチャするかどうかを決定します。
Hide Browser Cursor (ブラウザのカーソルを非表示)	カーソルがストリーム上にある間、カーソルを表示するかどうかを切り替えます。プロジェクトでカスタムカーソルを使用している場合に便利です。
Show FPS (FPS を表示)	現在の FPS を表示します。
Request Keyframe (キーフレームをリクエスト)	ストリームにキーフレームをリクエストします。これは、ストリームが不安定で最新のフレームに追いつかせたい場合に役立ちます。
Encoder Settings (エンコーダ設定)	最小および最大 QP を指定できます。数値が低いほど、品質は高くなりますがビットレートは高くなります。最大値は「51」です。「-1」の場合、ハードリミットが無効になります。
WebRTC Settings (WebRTC 設定)	WebRTC がストリーミングする際の、好きな FPS と最小および最大ビットレートを指定できます。WebRTC がフレームをドロップする可能性があるため、高すぎる値を設定しないようにしてください。
Stream Settings (ストリーム設定)	現在は実験的な機能です。将来的には、複数のビデオトラック / ストリームをサポートするために使用されます。
Restart Stream (ストリームを再開)	ストリームへのピア接続を再開します。上記の設定を変更し、それが確実に適用されていることを確認する場合に使用します。

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

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

最終結果

これで、コンピュータ上で Unreal Engine の 1 つのインスタンスが実行され、メディアストリームがローカルネットワーク経由で複数のデバイスにブロードキャストされるようになりました。接続された各デバイスには、同じレベルの同じビューが表示され、すべて同じ元のデスクトップ PC でレンダリングされます。

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


デスクトップ	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 機能」ページを参照してください。
「ストリーミングのチューニングガイド」ページは、ストリームの品質と設定をさらに細かく制御するのに役立ちます。