Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

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

前提条件

• OS とハードウェアを確認する- Pixel Streaming プラグインが動画をエンコードできるのは、Windows オペレーティング システムが動作する、特定のタイプの GPU ハードウェアが搭載されたコンピュータだけです。詳細については、「 Pixel Streaming リファレンス 」を参照してください。

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

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

• 他の Web サーバーを停止する - 使用するコンピュータで他の Web サーバーが動作している場合は、いったん停止します。

• IP アドレス - 使用するコンピュータの IP アドレスを把握しておく必要があります。
  まず LAN や VPN 内で Pixel Streaming を開始することをお勧めします。この場合、使用するコンピュータの 内部 IP アドレスが必要です。コマンド プロンプトまたはコンソール ウィンドウで ipconfig コマンドを実行し、 IPv4 Address で始まる行を確認します。
  別のネットワーク上にあるコンピュータやモバイル デバイスから接続しようとする場合は、外部 IP アドレスが必要です。外部 IP アドレスを確認するには、 この外部ページ に記載されている情報が役立ちます。

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

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

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

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

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

4. 確認画面で [Yes (はい)] をクリックします。
   

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

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

7. プロジェクトにキャラクターが含まれ、スマートフォンやタブレットなどのタッチ デバイスからの入力を有効にして、キャラクターをレベル内で移動させる場合は、オンスクリーンのタッチ コントローラーを表示させると便利です。
   [Engine (エンジン)] > [Input category (入力カテゴリ)] で、 [Always Show Touch Interface (タッチ インターフェースを常に表示)] 設定を見つけてオンにします。
   
   これはオプションで、すべてのプロジェクトで必要になる訳ではありません。ただし Third-Person テンプレートのようなプロジェクトでは、この設定を有効にすることで、タッチ デバイスを使用するユーザーがストリームされたアプリケーションを確実にコントロールできます (プロジェクトの Player Controller がタッチ入力をサポートする場合に限る)。 8.メイン メニューから、 [Edit (編集)]>[Editor Preferences... (エディタ環境設定)] を選択します。 9. [Level Editor (レベル エディタ)] > [Play (プレイ)] カテゴリで、 [Additional Launch Parameters (追加起動パラメータ)] 設定を見つけ、その値を「 -AudioMixer 」に設定します。
   

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

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

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

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

12. パッケージ化されたアプリケーションを起動するたびに、 -AudioMixer コマンドライン フラグを渡す必要があります。これを実行する方法の 1 つとして、ショートカットを設定できます。

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

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

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

最終結果

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

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

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

1. Unreal Engine のインストール フォルダで、「 Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer 」の下の Signaling サーバーを確認します。
   

2. 「 run.bat 」ファイルを実行して、Signaling サーバーを起動します。サーバーを初めて実行したときに、必要なすべての依存関係ファイルがダウンロードされます。サーバーが開始されて接続を受け入れる準備ができると、コンソール ウィンドウに次の行が表示されます。

   WebSocket listening to Streamer connections on :8888
   WebSocket listening to Players connections on :80
   Http listening on *:80

3. ここで、前のステップで作成したショートカットから、Unreal Engine アプリケーションを起動します。

最終結果

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

Streamer connected: ::1

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

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

3 - 接続する

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

1. Unreal Engine アプリケーションが動作しているコンピュータ上で、Alt + Tab キーを使用してフォーカスを Unreal Engine アプリケーションから切り替え、サポートされている Web ブラウザ (Google Chrome と Mozilla Firefox が安全な選択) を起動します。

2. アドレス バーに「 http://127.0.0.1 」と入力して接続します。これはローカル マシンの IP アドレスなので、リクエストは Signaling サーバーにより処理されます。
   

3. ページをクリックして接続し、[Play (再生)] ボタンを再びクリックして、ストリームを開始します。

4. アプリケーションに接続されました。レンダリングされた出力ストリーミングがプレイヤー Web ページの中央に表示されます。
   
   デフォルト プレイヤー ページは、キーボード、マウス、タッチスクリーン入力を Unreal Engine に転送するように設定されています。その結果、アプリケーションを直接コントロールする場合と同じように正確に操作できます。

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

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

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

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

最終結果

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

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

4 - 応用編

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

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

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

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