Pixel Streaming デモ

Pixel Streaming デモ ショーケースでは、ユーザーがデスクトップやモバイル デバイスのウェブ ブラウザでライブ ストリームを体感できるように、Unreal Engine コンテンツを設計する方法について示します。含まれるものは、以下の通りです。

• HTML プレイヤー ページ。ここでは Unreal Engine アプリケーションで生成されたメディア ストリームを再生し、エンジンをリモートでコントロールするためのカスタム UI 要素が用意されています。

• Unreal Engine プロジェクト。Pixel Streaming プラグインを使用してメディア ストリームを生成し、HTML プレイヤー ページから発行されたカスタム コマンドに対応するようにセットアップされています。

このサンプルをモデルとして使用して、Unreal Engine コンテンツと連携する独自のカスタム HTML5 プレイヤーを構築できます。

前提条件：

• Pixel Streaming システムの基本を理解していることを確認します。

• 少なくとも 1 回入門編ガイドのすべての手順を実行して、必要なすべてのものがインストールされ、デフォルト プレイヤー ページが動作していることを確認します。

入門編

1. Epic Games Launcher の [Learn (ラーニング)] タブの Pixel Streaming ショーケースを見つけ、これを使用して、新しい Unreal Engine プロジェクトを開始します。

2. Windows エクスプローラーで使用するコンピュータのプロジェクトの場所を参照して、「WebInterface」フォルダを見つけます。

3. このフォルダのコンテンツを Unreal Engine インストール フォルダの「Engine/Source/Programs/PixelStreaming/WebServers/SignallingAndWebServer/custom_html」にコピーします。 
   この「custom_html」フォルダが存在しない場合は、最初に作成します。

4. Unreal Editor で「PixelStreamingDemo.uproject」ファイルを開きます。

5. 「Pixel Streaming 入門」ページに記載された次のプロセスを実行します。

   • プロジェクトをパッケージする、またはスタンドアローンゲームとして Unreal Editor から開始します。

   • WebRTC Proxy サーバーと Signaling and Web サーバーを開始します。

6. ウェブ ブラウザを開き、Signaling and Web サーバーでホストされている PixelDemo.htm プレイヤー ページに移動します。 例えば、以下の URL です。 http://<your-server-ip-address>/PixelDemo.htm

プレイヤー ページをコントロールする

Pixel Streaming システムが正しくセットアップされたら、サポート対象のウェブ ブラウザでカスタムPixelDemo.htm プレイヤー ページにアクセスし、次のセクションで説明するコントロールを使用して、実行している Unreal Engine アプリケーションで作業できます。

1. ページの左側にあるメニューで、現在のキャラクタ、スキン、環境、時刻を変更します。

2. ツールバーでは UI とビューアに対してさらにコントロールできます。

   コントロール	効果
   	左側のメニューの表示と非表示を切り替えます。
   	カメラの完全ズームイン状態と完全ズームアウト状態を切り替えます。
   720p, 1080p, 4k	サーバーで動作している Unreal Engine アプリケーションのレンダリング解像度を設定します。

   すべての GPU に 4K の解像度でビデオ フィードをエンコーディングする能力があるとはかぎりません。

   |

   	[Bandwidth Cap (帯域幅キャップ)] と [Framerate Cap (フレームレート キャップ)] 設定の表示と非表示を切り替えます。
   Bandwidth Cap (帯域幅キャップ)	サーバーで動作している Pixel Streaming プラグインで生み出されるエンコーディングの最大ビット レートを設定します。この値を小さくすると、レンダリング画像に圧縮アーティファクトが現れてくるのがわかります。同時に、圧縮によりストリームで必要な帯域幅が減るので、プレイヤー ウィジェットでレンダリングされるコンテンツは、遅いネットワーク接続でもなめらかに表示されるようになります。

   現時点では制限により、帯域幅を一定の値に制限すると、Unreal Engine アプリケーションを再起動するまで、この制限を引き上げることができません。

   |

   Framerate Cap (フレームレート キャップ)

   Unreal Engine アプリケーションで 1 秒に生成する最大フレームを設定します。この値はデフォルトで 60 fps に制限されています。このキャップを取り除くと、Unreal Engine で生成されるフレームレートが画像を送信するネットワーク ストリームの容量を超えた場合に、ストリームの停止やコマ落ちにつながります。

3. ビューア ウィジェット自体には Unreal Engine アプリケーションを直接マウスやタッチ コントロールで制御する機能が用意されています。

   コントロール	効果
   クリックしてドラッグ、またはタッチしてドラッグ	現在のキャラクタの周りをカメラが回転します。
   マウス ホイール	カメラをズームインおよびズームアウトします。
   	フルスクリーン モードに切り替えます。Esc キーを押すと元に戻ります。

4. ページの右上にある [Add (+)] ボタンをクリックして、ストリームの追加コントロールを備えたオーバーレイの表示を切り替えます。これらの設定の多くはデフォルトの「player.htm」ページおよび「入門編ガイド」に記載されている設定と同じです。新しい設定は以下の通りです。

   コントロール	効果
   Prioritise Quality (品質の優先付け)	アクティブであるとき、Unreal Engine アプリケーションのレンダリング解像度は、HTML プレイヤー ページのプレイヤー ウィジェットのその時点のサイズに合うように自動的に調整されます。ブラウザ ウィンドウのサイズを小さくすると、プレイヤー ウィジェットのサイズも小さくなり、サーバーの Unreal Engine アプリケーションのレンダリング解像度が一致するように小さくなります。同様に、プレイヤー ページでフルスクリーン モードに入ると、Unreal Engine アプリケーションは、クライアントの画面の解像度に合うようにウィンドウをスケールアップします。
   Match Viewport Resolution (ビューポート解像度に合わせる)	アクティブであるとき、Pixel Streaming システムは、利用可能な接続の帯域幅が制限されているとき、Unreal Engine アプリケーションで生み出される秒あたりのフレーム数を自動的に制限します。「Pixel Streaming リファレンス」の Streamer.PrioritiseQuality、Streamer.LowBitrate、Streamer.HighBitrate および Streamer.MinFPS コンソール コマンドの説明を参照してください。

カスタム UI イベントを理解する

カスタム HTML プレイヤー ページ「PixelDemo.htm」は Pixel Streaming の Signaling and Web サーバーにより提供される「scripts/app.js」ファイルを使用して、マウス、キーボード、タッチ イベントをキャプチャして、Unreal Engine アプリケーションに中継します。さらに、一部の追加機能に独自のカスタム「PixelDemo.js」ファイルを使用します。

プレイヤー ページの多くの UI 要素は emitUIInteraction() 関数を呼び出すことにより実装され、異なる情報を Unreal Engine アプリケーションに渡します。内部での UI の各部のしくみを理解する方法

1. まず、「PixelDemo.htm」ファイルで理解したい UI アイテムを見つけ、どのボタンが押されたときに、どの JavaScript 関数がトリガーするように設定されているのかを確認にします。 例えば、左側のメニューの各アイテムで onConfigButton() という関数をトリガーし、2 つの数値を渡します。

2. Fortress

3. 「PixelDemo.js」ファイルの関数の定義を探します。 例えば、onConfigButton() 関数はこれらの 2 つの数値を JavaScript オブジェクトの Category および Item フィールドにそれぞれ書き込み、JavaScript オブジェクトを emitUIInteraction() 関数に渡します。

   function onConfigButton(category, item) { let descriptor = { Category: category, Item: item }; emitUIInteraction(descriptor); console.log(descriptor); }

4. Unreal Engine プロジェクトで、これらのイベントは Blueprints/Pawn/Orbit_Controller クラスにより応答します。

   

   このクラスをダブルクリックして、イベント グラフに開きます。

5. Bind JSON Events 領域で、emitUIInteraction() が接続ブラウザで呼び出されるたびに、OnJSONEvent イベントのハンドラとして、Bind Event to OnPixelStreamingInputEvent ノードを登録する方法がわかります。

6. OnJSONEvent イベントがトリガーされるたびに、ブループリントは Get Json String Value を呼び出し、プレイヤー ページにより、emitUIInteraction() 関数に渡された JavaScript オブジェクトに格納されたキーと値をチェックします。これらの値を使用してトリガーする他のイベントの種類を決定します。 例えば、イベントが Category フィールドに含まれる入力を受け取るとき、Change Config Option イベントを呼び出します。

   このイベントは Category フィールドの値をチェックして、キャラクタ、スキン、環境、時刻を変更するかどうかを決定するためにこの値を使用します。

   これらのイベントのそれぞれで Item 値をチェックして、キャラクタ、スキン、環境、時刻のどのタイプをアクティブ化するかを決定します。

Prioritise Quality (品質の優先付け) および Match Viewport Resolution (ビューポート解像度に合わせる) など、ページの右上にあるオーバーレイのコントロールは、少し動作が異なります。「app.js」ファイルは、ロードされたとき、イベント リスナーをこれらの HTML 要素に追加します。ユーザーがこれらの要素の 1 つを有効または無効にすると、「app.js」ファイルのリスナー関数は変更に直接対応するようにトリガーされます。