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

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

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

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

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

はじめに

Pixel Streaming サンプルを使用してプロジェクトを作成するには、次の手順を実行します。

1. Fab の Pixel Streaming サンプルにアクセスし、ライブラリに追加をクリックして、プロジェクト ファイルを Epic Games Launcher に表示します。

   1. または、Launcher 版 Fab または UE の Fab プラグインを使用してサンプル プロジェクトを検索できます。

2. Epic Games Launcher から、[Unreal Engine] > [ライブラリ] > [Fab ライブラリ] の順に移動して、プロジェクトにアクセスします。

   サンプル プロジェクトは、互換性のあるバージョンのエンジンをインストールした場合にのみ Fab ライブラリに表示されます。

3. プロジェクトを作成をクリックし、画面に表示される手順に従ってサンプルをダウンロードし、新規プロジェクトを開始します。

   1. Fab のサンプル コンテンツにアクセスする方法の詳細については、「サンプルとチュートリアル」を参照してください。

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

   お使いの Unreal Engine のバージョンとインフラのバージョンとを一致させることが重要です。たとえば、5.2 には 5.2 です。 インフラの詳細については、「Pixel Streaming インフラ」を参照してください。

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

6. 「Getting Started with Pixel Streaming」ページに記載されている手順に従って、次の操作を実行します。

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

   • (上記のインフラを使って) シグナリングと Web サーバーを起動

   • 代替オプション: Pixel Streaming ツールバーを使ってシグナリング サーバーを起動します。

7. Web ブラウザを開き、シグナリングと Web サーバーでホストされている showcase.html のプレイヤー ページに移動します。 例: http://<your-server-ip-address>/showcase.html

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

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

• UE にデータを送信: このセクションを使用すると、実行中のアプリケーションのキャラクターとキャラクター スキンを変更できます。

  

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

  

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

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

   C++

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

   Copy full snippet(2 lines long)

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

   C++

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

   Copy full snippet(2 lines long)

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

   

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

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

   

5. OnJSONEvent イベントがトリガーされるたびに、ブループリントは Get Json 文字列値 を呼び出し、プレイヤー ページから emitUIInteraction() 機能に渡された JavaScript オブジェクトに格納されたキーと値を確認します。 これらの値により、トリガーすべき他のイベントが判断されます。 たとえば、イベントでスキン フィールドを含む入力を受け取った場合は、スキンを変更イベントが呼び出されます。

   

Pixel Streaming ウィジェット

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

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

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

  

• オーディオ コンポーネント: WebRTC 経由のストリームを介してマイクロフォン オーディオ入力をストリーミングし、UE5 を介して再生することを可能にします

  

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

  

• ビデオ コンポーネント: WebRTC 経由のストリームを介してカメラ (Web カメラ) 入力をストリーミングして、UE5 を介して再生することができます。

  

• ピア コンポーネント: エンジンで既存のストリームを受信し、UE5 で再生することを可能にします。 これはビデオ コンポーネントとは別のものです。 ビデオ コンポーネントはプレイヤー (ブラウザなど) からのビデオ ストリームを受信し、ピア コンポーネントは、自身がブラウザであるかのようにフル ストリームを受信します。