Help us understand the problem. What is going on with this article?

UE4 PixelStreamingの手引き(ホスティング編)

More than 1 year has passed since last update.

※この記事は以下の記事の続きです。良ければ合わせてご覧ください
- UE4 PixelStreamingの手引き(導入編)
- UE4 PixelStreamingの手引き(UIカスタマイズ編)

※記事作成時点ではEarlyAccessです

この記事を読んでいる方はおそらくすでにローカルネットワーク内でのPixelStreamingに成功しているだろう、と思います
そうなれば次は、インターネット上…つまりクラウド上のサーバに配置したくなりますね

ただ、インターネットを通じてPixelStreamingを行う際には、ある問題が発生します
いわゆるNAT越え問題です

ネットワークに関わっている方なら「なるほどね~」と思うことだろうと思います
知らない人は…後で調べてください

検証環境

下記記事と同じ
- UE4 PixelStreamingの手引き(導入編)
- UE4 PixelStreamingの手引き(UIカスタマイズ編)

参考リンク

https://docs.unrealengine.com/en-US/Platforms/PixelStreaming/Hosting

準備するもの

  • AWSアカウント

サーバー構成

今回はPixelStreaming用とSTUN/TURN用の2つのインスタンスを使用しています
Untitled.png

※セキュリティグループの簡素化のため、互いのインスタンスと操作用のPCの間のトラフィックはすべてAllowにしました
※ご自身のセキュリティポリシーに従って設定してください

環境構築(PixelStreaming用)

PixelStreaming用サーバの設定は導入編と同様にしてください

ただし、NVIDIAのドライバが入っていないとUE4のアプリが起動しませんので、下記ドキュメントを参考にしてドライバをインストールする必要があります
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/WindowsGuide/install-nvidia-driver-windows.html

環境構築(STUN/TURN用)

STUN/TURNサーバ用のアプリにはcoTurnを使用します
設定手順については下記記事が参考になるでしょう

coTurnでEC2上にTURNサーバを作ってみた

STUN/TURNとしての特別な設定は不要です

環境構築(設定ファイル)

SignallingWebServerにSTUN/TURNを使用する旨の設定が必要です

config.jsonを以下のように書き換えてください

config.json
{
    "UseFrontend": false,
    "UseMatchmaker": false,
    "UseHTTPS": false,
    "UseAuthentication": false,
    "LogToFile": true,
    "HomepageFile": "player.htm",
    "AdditionalRoutes": {},
    "peerConnectionOptions": "{\"iceServers\": [{\"urls\": [\"stun:<STUNのPublicIP>:3478\",\"turn:<TURNのPublicIP>:3478\"],\"username\": \"hakobuneworks\",\"credential\": \"********\"}]}"
}

peerConnectionOptionsのValueをエスケープしている理由ですが、
Cirrus.jsのプログラム側に少々不具合があるようで、内部でParseしているためJSON文字列でないと受け付けない状態になっています
普通にJsonで書きたい方はプログラム側を修正することをおすすめします

cirrus.js
// 120行目付近
    if(typeof config.peerConnectionOptions != 'undefined'){
        // clientConfig.peerConnectionOptions = JSON.parse(config.peerConnectionOptions);
        clientConfig.peerConnectionOptions = config.peerConnectionOptions;
        console.log(`peerConnectionOptions = ${JSON.stringify(clientConfig.peerConnectionOptions)}`);
    }

実行

後は導入編と同じ手順で実行してください
coTurnの起動も忘れないように

ただ、WebRTCProxyの起動だけは、同梱されているStart_AWS_WebRTCProxy.batを使用するほうが良いかと思います
明確に比較できてはいませんが、通常のStartではうまくつながらない可能性がありそうです

ネットワーク状況によってレイテンシと画質に問題が出ますが、今回の構成ではTURNサーバがボトルネックになると思われるので、その部分をスケールアップすれば改善すると思います

考察

ここまで実行できている方であれば、SignallingWebServerに同梱されているbatファイルに、AWSの名前がつくバッチファイルがあることに気がついているかと思います
中身を見てみると、その先はPowerShellスクリプトにつながっており、その内部で先程config.jsonに書いたpeerConnectionOptionsを生成して当てはめるような書き方になっています
STUNのアドレスには、自分のPublicIPを指定しています

これはおそらくこのスクリプト作成時には、PixelStreamingサーバとSTUN/TURNサーバは同一のインスタンスに立ててしまう設定になっていたと考えられます
そうすると、今回僕が作成したような構成で問題になったSTUN/TURNサーバによるボトルネックもある程度合理的に解消できるのでは?と思います

このあたり、サーバの構築に詳しい方であれば解決できるかと思います

追記

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした