Pixel Streaming サンプル プロジェクト

Pixel Streaming デモ ショーケースでは、ユーザーがデスクトップやモバイル デバイスの Web ブラウザでライブ ストリームを体感できるように、Unreal Engine 5 (UE5) コンテンツを設計する方法について説明します。これには次が含まれます。

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

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

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

前提条件：

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

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

はじめに

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

2. 関連する Pixel Streaming Infrastructure のブランチがあることを確認します。

   お使いの Unreal Engine のバージョンと Pixel Streaming Infrastructure のバージョンとを一致させることが重要です (UE 5.2 には Infrastructure 5.2 など)。 Infrastructure の詳細については、このページ を参照してください。

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

4. 「Unreal Engine で Pixel Streaming を開始する」ページに記載されている手順に従って、次の操作を実行します。

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

   • (上記の Infrastructure を使って) Signaling and Web サーバーを起動します。
   • 代替オプション： Pixel Streaming ツールバーを使って Signalling サーバーを起動します。
5. Web ブラウザを開き、Signaling and Web サーバーでホストされている showcase.html プレイヤー ページに移動します。例： http://<your-server-ip-address>/showcase.html

ショーケース HTML を操作する

ショーケースのカスタム仕様のフロントエンドでは、シーン内のさまざまな要素を制御することができます。左側にあるサンプルのドロップダウンには多様なコントロールが用意されており、それぞれがシーンのさまざまな要素と Pixel Streaming 自体を示しています。

• Send Data to UE (UE にデータを送信)： このセクションでは、実行中のアプリケーションでキャラクターとキャラクター スキンを変更できます。

  

• Send Commands to UE (UE にコマンドを送信)： このセクションには、アプリケーションの実行解像度を変更したり、画面に表示する追加統計データを切り替えたりするために UE5 に送信できるコマンドが含まれています。

  

この「Send Commands (コマンドを送信)」カテゴリと「Send Data (データを送信)」カテゴリに関する詳細については、画面下部の [Details (詳細)] パネルをそれぞれ参照してください。

プレイヤー ページを制御する

Pixel Streaming システムを正しく設定して、サポートされている Web ブラウザでカスタム仕様の showcase.html プレイヤー ページにアクセスすると、以下のセクションで説明する各コントロールを使用して、実行中の Unreal Engine アプリケーションを操作することができます。

1. ページ左側にあるドロップダウン メニューでは、UE にコマンドを送信するものやデータを送信するものなど、異なるサンプル間を切り替えることができます。

2. この [Details (詳細)] パネルには、現在選択しているサンプルの情報が表示されます。

3. ビューア ウィジェットでは Unreal Engine アプリケーションを直接マウスやタッチ コントロールで制御できるほか、現在の Pixel Streaming に関する情報が表示されます。

   コントロール	エフェクトの内容
   クリックしてドラッグ、またはタッチしてドラッグ	現在のキャラクターの周りをカメラが回転します。
   マウス ホイール	カメラをズームイン/ズームアウトします。

4. 以下のボタンを使って、全画面表示に切り替えたり、ストリーム設定やストリーム情報を開いたりすることができます。これらは、デフォルトのインターフェースに表示されるものと同じボタンです。

   コントロール	エフェクトの内容
   	ビューアを全画面モードに切り替えます。Esc キーを押すと元に戻ります。
   	[Stream Settings (ストリーム設定)] パネルを開きます。このパネルはデフォルトで Pixel Streaming Infrastructure によって提供され、実行中のストリームに対して詳細な設定を行うことができます。
   	ストリーム情報のパネルを開きます。このパネルには、ビットレートやパケット損失、フレームレートなど、ストリームのリアルタイム WebRTC セッション統計データが含まれます。

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

カスタム仕様の HTML プレイヤー ページ「showcase.html」では、「PixelStreamingInfrastructure/Frontend/implementations/EpicGames/src/」ディレクトリにある「showcase.ts」ファイルを使用します。

Unreal Engine アプリケーションに送信されるマウス イベント、キーボード イベント、タッチ イベントのキャプチャについては、次のように「PixelStreamingInfrastructure/Frontend/library/src/Inputs/」ディレクトリに移動します。

プレイヤー ページの多くの UI 要素は、emitUIInteraction() 関数の呼び出しを通じてさまざまな情報を Unreal Engine アプリケーションにパスすることで実装されます。この中でそれぞれの UI 構成要素が機能する仕組みを理解するには、以下のステップを実行します。

1. まず、把握したい UI アイテムを「showcase.ts」ファイルで見つけ、そのボタンが押されたときに、どの JavaScript 関数がトリガーするように設定されているかを確認します。 たとえば、次のコード ブロックでは、最初のキャラクター スキンを変更するようにボタンが設定されています。

       const skin1Btn = document.createElement("button");
       skin1Btn.onclick = () => { this._onSkinClicked(0); }
   
   Copy full snippet

   const skin1Btn = document.createElement("button"); skin1Btn.onclick = () => { this._onSkinClicked(0); }

2. バインドされた関数の実装を「showcase.ts」ファイル内で確認します。 たとえば _onSkinClicked(); 関数では、使用するキャラクター スキンを設定するためにパラメータを受け取ります。その後、次の JSON オブジェクトを emitUIInteraction() 関数にパスしたりします。

       private _onSkinClicked(skinIndex : number) {
       this._pixelStreaming.emitUIInteraction({ Skin: skinIndex });
   
   Copy full snippet

   private _onSkinClicked(skinIndex : number) { this._pixelStreaming.emitUIInteraction({ Skin: skinIndex });

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

   

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

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

   

5. OnJSONEvent イベントがトリガーされるたびにブループリントによって Get Json String Value が呼び出されて、プレイヤー ページによって emitUIInteraction() 関数にパスされた JavaScript オブジェクトに格納されているキーと値がチェックされます。これらの値により、トリガーすべき他のイベントが判断されます。 たとえば、イベントで Skin フィールドを含む入力を受け取った場合は、Change Skin イベントが呼び出されます。

   

Pixel Streaming ウィジェット

ゲーム ウィンドウの左上に表示される Pixel Streaming 機能ウィジェットは、Pixel Streaming の便利ないくつかの要素を紹介できるように設計されています。これらの関数はさまざまな目的に合わせて簡単に適応させることができ、Pixel Streaming には必要最小限の設定だけで含まれています。

プレイ中に「F」キーを押すと、ウィジェットでオプションが順に切り替わり、それぞれの機能のテスト方法が表示されます。 これらの機能は次のとおりです。

• Freeze Frame (フレーム固定)： 単一フレームでアクティブな Pixel Stream を固定/固定解除します。アプリケーションはその間もバックグラウンドで実行されることに注意してください。

  

• Audio Component (音声コンポーネント)： WebRTC 経由のストリームを介してマイクロフォン音声入力をストリーミングして、UE5 を介して再生することができます。

  

• Pixel Streaming Stats (Pixel Streaming 統計データ)： コンソールを介した stat PixelStreaming および stat PixelStreamingGraphs 情報の表示を切り替えます。