Epicでは、GoogleがWebRTCのバージョンにおける脆弱性を公開 (詳細はこちら)したことを認識しており、EOS SDKに対する影響および次のステップを調査しています。
以下のステップに従うと、レンダリングされた出力を Unreal Engine プロジェクトからローカル ネットワーク経由でブラウザやモバイル デバイスにストリーミングできます。
このページの各ステップの画像は、「Third-Person Blueprint (サードパーソン ブループリント)」テンプレートからビルドされたプロジェクトを用いたものです。ただし、それ以外の Unreal Engine プロジェクトでも同じステップを適用できます。
前提条件
- OS とハードウェアを確認する: Pixel Streaming プラグインは、特定の種類の GPU ハードウェアを搭載した Windows、Linux または Mac オペレーティング システムを実行しているコンピュータのみでビデオをエンコードできます。詳細については、「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 (タッチ インターフェースを常に表示)] 設定を見つけて有効にします。
これは任意の設定であり、すべてのプロジェクトに必須というわけではありません。ただし、サードパーソン テンプレートのようなプロジェクトの場合は、これによって、タッチ デバイスを使用するユーザーがストリーミングされたアプリケーションを制御できるようになります (プロジェクトのプレイヤー コントローラーがタッチ入力をサポートしている場合)。
-
メイン メニューから [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 がパッケージ化を開始します。

- パッケージ化が完了したら、上記のステップ 10 で選択したフォルダに移動します。次の画像にあるようなコンテンツを含む「
Windows
」フォルダがあります。

-
パッケージ化されたアプリケーションを起動するたびに、上記のステップ 8 で設定したのと同じコマンドライン フラグをそのアプリケーションにパスする必要があります。これを行う一つの方法として、ショートカットの設定があります。 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 Infrastructurte」と呼びます。
Pixel Streaming Infrastructurte には複数の方法でアクセスできます。
- その github リポジトリ https://github.com/EpicGames/PixelStreamingInfrastructure に直接アクセスします。
- 任意の端末で
git clone --branch UE5.4 https://github.com/EpicGamesExt/PixelStreamingInfrastructure.git
コマンドを使用します (git がインストールされていることを確認)。 \Engine\Plugins\Media\PixelStreaming\Resources\WebServers
に移動してget_ps_servers
コマンドを実行します (Windows には.bat
スクリプトを、Linux または Mac には.sh
スクリプトを必ず使用)。これにより、Pixel Streaming Infrastructure の関連ブランチが自動的にそのフォルダに取り込まれます。
上記の git コマンドは、インフラストラクチャの 5.2 ブランチをプルします。別のブランチが必要な場合は、git コマンドを適宜修正してください。
Pixel Streaming フロントエンドと Web サーバーの変更の詳細については、「Pixel Streaming Infrastructure」を参照してください。
3 - サーバーを起動する
このステップでは、Unreal Engine アプリケーションとクライアントのブラウザ間のピアツーピア接続を確立するのに役立つ Web サービスを開始します。前のステップを実行していない場合は、これらのサーバーにアクセスできません。
以下のステップでは、Windows を使用していることを前提としています。ただし、Linux と Mac でも「SignallingWebServer\platform_scripts\bash」フォルダでスクリプトを実行すること以外は同じプロセスを使用します。
-
Pixel Streaming Infrastructure をプルしたディレクトリ内で、「
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 アプリケーションが Signalling and Web サーバーに接続すると、Signalling and Web サーバーによって開かれたコンソール ウィンドウに次のとおり出力されます。
Streamer connected
これは、Pixel Streaming プラグインが有効な Unreal Engine アプリケーションを実行しており、フロントエンドの Signalling 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 アドレスであるため、リクエストは Signalling サーバーにより処理されます。 -
ページをクリックして接続し、[Play (プレイ)] ボタンをもう一度クリックしてストリームを開始します。
-
これでアプリケーションに接続され、レンダリングされた出力がプレイヤーの Web ページの中央にストリーミングされます。
デフォルトのプレイヤー ページはキーボード、マウス、およびタッチスクリーンの入力を Unreal Engine に転送するように設定されています。そのため、アプリケーションを直接制御する場合とまったく同じようにアプリケーションを操作できます。
-
ウィンドウの左側にある [Add (+) (追加 +)] ボタンをクリックして、ストリームを制御するための組み込みオプションを開きます。利用可能なオプションの詳細については、https://github.com/EpicGames/PixelStreamingInfrastructure リポジトリを参照してください。
フロントエンド コントロールの実装方法については、「Frontend/」のコンテンツを確認してください。
-
次に、ネットワーク内の他のコンピュータやモバイル デバイスを見つけます。同じステップを繰り返しますが、
127.0.0.1
ではなく、Unreal Engine アプリケーションと Signalling サーバーを実行しているコンピュータの IP アドレスにブラウザで移動します。
最終結果
コンピュータ上で Unreal Engine の 1 つのインスタンスが実行され、メディア ストリームがローカル ネットワーク経由で複数のデバイスにブロードキャストされるようになりました。接続された各デバイスには同じレベルの同じビューが表示されます。これらは、すべて同じ元のデスクトップ PC でレンダリングされたものです。
デフォルトでは、接続されているすべてのデバイスが Unreal Engine アプリケーションの制御を共有し、すべてのキーボード、マウス、およびタッチスクリーンの入力を転送します。
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 機能」ページを参照してください。
-
「ストリーミングのチューニング ガイド」ページは、ストリームの品質と設定をさらに細かく制御するのに役立ちます。