Pixel Streaming を開始する

コンピュータから同じネットワークにある他のコンピュータやモバイル デバイスに、Unreal Engine アプリケーションのストリーミングを設定して実行します。

Epicでは、GoogleがWebRTCのバージョンにおける脆弱性を公開 (詳細はこちら)したことを認識しており、EOS SDKに対する影響および次のステップを調査しています。

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

このぺージのステップで使用される画像は、Third-Person ブループリント テンプレートから構築されたプロジェクトを使用する手順を示しています。ただし、どの Unreal Engine プロジェクトでも同じステップを使用できます。

前提条件

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

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

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

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

  • IP アドレス - インターネット経由で Pixel Streaming をテストする場合は、使用するコンピュータの IP アドレスを把握しておく必要があります。
    まず LAN や VPN 内で Pixel Streaming を開始することをお勧めします。この場合、Pixel Streaming の IP アドレスとして localhost または 127.0.0.1 を使用することができます。
    別のネットワーク上のマシンから接続する場合は、シグナリング サーバーが STUN/TURN サーバーを使用するように設定する必要があります。STUN/TURN サーバーを指定する peerConnectionOptions を使ってシグナリング サーバーを設定する方法については、「Pixel Streaming リファレンス」を参照してください。

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

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

  • Pixel Streaming プラグインが動作するのは、プロジェクトがパッケージ アプリケーションとして実行されているとき、または Unreal Editor から [Standalone Game] オプションで起動されているときだけです。

  • Pixel Streaming プラグインがアプリケーションからオーディオを抽出しストリームするには、特別なコマンドライン フラグ -AudioMixer を指定して Unreal Engine を起動する必要があります。以下の手順では、2 つのシナリオでこれを設定する方法を示します。

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

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

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

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

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

  6. プロジェクトにキャラクターが含まれ、スマートフォンやタブレットなどのタッチ デバイスからの入力を有効にして、キャラクターをレベル内で移動させる場合は、オンスクリーンのタッチ コントローラーを表示させると便利です。
    [Engine (エンジン)] > [Input category (入力カテゴリ)] で、[Always Show Touch Interface (タッチ インターフェースを常に表示)] 設定を見つけてオンにします。
    Always Show Touch Interface
    これはオプションで、すべてのプロジェクトで必要になる訳ではありません。ただし Third-Person テンプレートのようなプロジェクトでは、この設定を有効にすることで、タッチ デバイスを使用するユーザーがストリームされたアプリケーションを確実にコントロールできます (プロジェクトの Player Controller がタッチ入力をサポートする場合に限る)。

  7. メイン メニューから、[Edit (編集)]>[Editor Preferences... (エディタ環境設定)] を選択します。

  8. [Level Editor (レベル エディタ)] > [Play (プレイ)] カテゴリで、[Additional Launch Parameters (追加起動パラメータ)] 設定を見つけ、その値を「-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888」に設定します。 Additional Launch Parameters

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

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

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

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

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

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

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

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

Pixel Streaming システムを起動したら、場合によっては -RenderOffScreen コマンドライン パラメータも追加する必要があります。Unreal Engine アプリケーションのウィンドウが誤って最小化された場合、Pixel Streaming ビデオと入力ストリームの動作が停止しますが、 -RenderOffScreen によって、表示ウィンドウがないヘッドレス モードでもアプリケーションが動作するため、停止する可能性がなくなります。

最終結果

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

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

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

以下のステップでは Windows の使用を想定しています。ただし、「SignallingWebServer\platform_scripts\cmd\bashLinux」フォルダを使用する点以外は Linux も同じプロセスです。

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

    Signalling and Web Server

  2. Signalling Server の準備をするには、管理者として PowerShell を開き、SignallingWebServer\platform_scripts\cmd\setup.ps1 を実行することから始めます。 これにより、必要なすべての依存関係がインストールされます。

  3. 「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

  4. ここで、前のステップで作成したショートカットから、Unreal Engine アプリケーションを起動します。コマンドラインからアプリケーションを起動したい場合は、次のコマンドを実行してください。 

    MyPixelStreamingApplication.exe -PixelStreamingIP=127.0.0.1 -PixelStreamingPort=8888

利便上、Unreal Engine アプリケーションをパッケージ化する際に、これらのサーバーもパッケージ実行可能ファイルを含むフォルダにコピーされます。これらは、前に示した同じパスにある「Engine」サブフォルダに配置され、そこからサーバーを起動することができます。Unreal Engine インストール フォルダから起動する必要はありません。
ただし、これらのフォルダにある何らかのファイル、特に Signalling and Web サーバー用のコンフィギュレーション ファイルやプレイヤー ページを変更する必要がある場合は、元の場所にあるファイルを変更する必要があります。パッケージ フォルダでそれらを変更した場合は、次回アプリケーションをパッケージ化するときに変更が上書きされます。

最終結果

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

Streamer connected: ::1

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

必要に応じて、Unreal Engine アプリケーションと Signalling and Web サーバーを独立して停止したり再開したりできます。同時に実行されている限り、これらは自動的に再接続することが可能です。

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

3 - 接続する

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

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

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

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

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

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

    設定

    説明

    Enlarge Display to Fill Window (表示をウィンドウ全体に拡大)

    メディア プレイヤーのサイズをブラウザ ウィンドウの現在のサイズに合わせて変更するか、固定サイズで同じ位置のままにするのかを決定します。

    Quality control ownership (品質コントロール オーナーシップ)

    利用可能な帯域幅、つまりストリーム エンコーディングの品質を判断するために、現在のブラウザ接続を使用するよう Pixel Streaming プラグインのエンコーダを設定します。
    Pixel Streaming はストリームの品質を利用可能な帯域幅に適応させますが、ビデオ フレームは Pixel Streaming プラグインで 1 回エンコードされるだけです。この 1 回のエンコーディングがすべてのクライアントで使用されます。したがって、1 つのクライアント接続のみが、適応可能なストリーミングで使用される品質を「所有」することになります。他のクライアントとサーバーの接続がはるかに良好な状態である場合、これらのクライアントでは必要なレベルよりも低品質のストリームが表示される結果になることがあります。一方、他のクライアントとサーバーの接続がにはるかに悪い状態である場合、それらのクライアントでは遅延やジッタリングが発生することがあります。
    デフォルトでは、新しいブラウザが接続するたびに、それがストリームの所有権を獲得します。このチェックボックスを使用して、他の接続済みブラウザから所有権を再び取得します。

    Show Stats (統計情報を表示)

    ブラウザと WebRTC Proxy サーバー間の接続に関する統計情報を表示します。

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

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

最終結果

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

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

pixelstreaming-endresult-chrome.png

pixelstreaming-endresult-iossafari.png

pixelstreaming-endresult-gpixel.png

デスクトップ

iPhone

Google Pixel

4 - 応用編

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

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

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

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

Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル