Pixel Streaming 入門

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

Windows
MacOS
Linux

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

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

前提条件

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

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

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

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

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

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. 確認画面で [Yes (はい)] をクリックします。 Confirm the install

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

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

  7. プロジェクトにキャラクターが含まれ、スマートフォンやタブレットなどのタッチ デバイスからの入力を有効にして、キャラクターをレベル内で移動させる場合は、オンスクリーンのタッチ コントローラーを表示させると便利です。 [Engine (エンジン)] > [Input category (入力カテゴリ)] で、[Always Show Touch Interface (タッチ インターフェースを常に表示)] 設定を見つけてオンにします。

    Always Show Touch Interface
    これはオプションで、すべてのプロジェクトで必要になる訳ではありません。ただし Third-Person テンプレートのようなプロジェクトでは、この設定を有効にすることで、タッチ デバイスを使用するユーザーがストリームされたアプリケーションを確実にコントロールできます (プロジェクトの Player Controller がタッチ入力をサポートする場合に限る)。

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

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

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

    Package for Windows 64-bit

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

    Select a folder

  12. Unreal Editor でパッケージ化プロセスが開始されます。

    Packaging progress indicator

  13. パッケージ化プロセスが完了したら、前のステップ 11 で選択したフォルダに移動します。「WindowsNoEditor」フォルダに次に示すような内容が含まれます。 パッケージされた出力

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

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

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

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

      -AudioMixer

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

まとめ

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

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

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

  1. Unreal Engine のインストール フォルダにある Signaling サーバーの場所「Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer」に移動します。 Signaling and Web サーバー 2. 「run.bat」ファイルを実行して、Signaling サーバーを起動します。サーバーを初めて実行したときに、必要なすべての依存関係ファイルがダウンロードされます。サーバーが開始されて接続を受け入れる準備ができると、コンソール ウィンドウに次の行が表示されます。

    Listening to proxy connections on: 8888
    Http listening on *: 80
  2. Unreal Engine のインストール フォルダにある WebRTC Proxy サーバーのバイナリの場所「Engine/Source/Programs/PixelStreaming/WebRTCProxy/bin」に移動します。 WebRTC Proxy サーバー

  3.  「<code>Start_WebRTCProxy.bat</code>」ファイルを実行して、WebRTC Proxy サーバーを起動します。サーバーが起動すると、コンソール ウィンドウに次の行が表示されます。
    
    LOG: LogDefault     : Connecting to UE4 127.0.0.1:8124
  4. ここで、前のステップで作成したショートカットから、Unreal Engine アプリケーションを起動します。

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

まとめ

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

WebRTC Proxy サーバーのコンソール ウィンドウに次の出力行が表示されます。

LOG: LogDefault     : Connected to UE4
LOG: LogDefault     : Connecting to Cirrus 127.0.0.1:8888
LOG: LogDefault     : Connected to Cirrus
LOG: LogDefault     : Cirrus config: {
"peerConnectionConfig" : {}
}

さらに、Signaling サーバーのコンソール ウィンドウに次の出力行が表示されます。

proxy connected
config to Proxy: {"peerConnectionConfig":{}}

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

3 - 接続する!

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

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

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

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

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

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

    設定

    説明

    Kick all other players (他のすべてのプレイヤーを停止)

    WebRTC Proxy サーバーで、現在のブラウザ以外のブラウザとの接続を閉じます。

    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」ファイルの内容を参照することで、これらのコントロールがどのように実装されているかを確認できます。

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

まとめ

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

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

Desktop

iPhone

Google Pixel

4 - 次の作業

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

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

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

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

Select Skin
Light
Dark

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信