Unreal Engine (UE)Advent Calendar 2024

Pixel Streamingを利用して外部から自宅PCのUEエディターにアクセスしよう

Last updated at 2024-12-22Posted at 2024-12-22

この記事は、PixelStreamingのプラグインを使用して、自宅PCを活用しつつ、Editorに外部からアクセスできるようにしてみようという記事です。

まず大前提として、単にUEエディターを外出先からアクセスするならChromeリモートデスクトップ等を活用、エディターを誰かと共同で触るのであればマルチユーザー編集を利用すれば良さそうなのかなと考えています。

そのため、この記事ではUEが入っていないPCなどを持った方に、自分のChromeの認証情報などは伝えずに自分のエディタを見てもらい、実際に触ってもらいたいなど何らかの理由で上記技術が使用できないときに活用できるかも...？といったぐらい気軽な気持ちで見ていただければと思います。
一応、今回の方法を使用すれば、自宅PCからUE製アプリケーションをPixelStreamingで配信することも可能になるかと思います。

検証環境

OS: Windows 10 Home
UEバージョン: 5.4

注意事項

ネットワーク環境などが原因で動かない可能性がありますのでご了承ください。

PixelStreamingとは

UnrealEngine製のアプリケーションをWebブラウザ上で体験できるようにするための技術です。
これにより、ユーザーは高スペックなデバイスが無くても、インストール不要で高品質なコンテンツを体験することができます。
PixelStreamingを触ったことがある方はお気づきだと思いますが、プラグインの機能にエディタをstreamingする機能が備え付けられています。
今回は、その機能を利用してエディタをWebブラウザ上で体験してみようと思います。
※ PixelStreamingのもっと詳しい内容については、こちらのドキュメントを参照してください。

まずは自分のPC内だけで試してみよう

前述の通り、PixelStreamingのプラグインには、エディタをstreamingする機能が備え付けられているため、最初にそれを使って、自分のPC内で完結する状態でどのような感じになるか試してみましょう！
まずは、適当なプロジェクトを作成しPixelStreamingを導入してみます。
Edit > Plugins > Pixel Streamingをオンにし、再起動してください。

次に、エディタ上部にあるPixel Streamingから「Launch Signalling Server」と「Stream Full Editor」をオンにしてください。

すると以下のような状態になると思います。

この状態のままWebブラウザのURL欄に「 127.0.0.1:80 」と記述し、アクセスすると「CLICK TO START」という表示がなされるため、クリックしていただくと実際にブラウザ上でエディタを触ることができます。

無事動作確認出来ましたら、「Stop Signalling Server」と「Stop Streaming」を押し、Streamingをストップします。
URLに打ち込んだ127.0.0.1とは、ローカルループバックアドレスと呼ばれ、自分自身を表す特別なアドレスとなっています。
このため、現時点では外出先など同一ネットワーク外からではアクセスできないことから、これをアクセス可能にしていきます。

外出先からアクセス可能にするために必要なこと

このPixel Streamingですが、Webブラウザへの映像データや操作内容を送受信するための仕組みとしてWebRTC技術が用いられています。

WebRTCとは、P2P方式を用いて端末同士がデータのやり取りをリアルタイムで行うことができる通信技術のことです。
人同士がやり取りを行うためにお互い住所などの情報が必要などと同じように、端末同士が直接通信するためにもお互いの情報を知る必要があります。

そして、WebRTCでは、シグナリングサーバーと呼ばれるサーバーを介してお互いの情報をやり取りしています。
PC内で完結させたときに「Launch Signalling Server」というボタンをクリックしていただきましたが、Pixel Streamingのプラグインには、あらかじめプラグインの中に用意されたシグナリングサーバーを起動させていたわけですね。

このことから、今回のパターンでいえば、あらかじめ用意されているシグナリングサーバーを外部からアクセスできる状態にすれば、うまくいくような気がしてきました。

ただ、もう一つ困ったことがあります。
「127.0.0.1:80」とアクセスした際にWebページが表示されましたが、現時点ではこのページにも外部からアクセスできません。
そのため、シグナリングサーバーに加えてWebページ自体も公開する必要があるということですね。

※ WebRTCにおいて、必要となるサーバーは実は他にもあります。この記事では直接関係していないため、詳しい説明は省きますが、気になる方はこちらの入門サイトなどを見ていただければと思います。

Cloudflare & ドメイン設定

今回、自宅PCに外出先からWebブラウザ経由でアクセスする際にCloudflareというサービスを利用したいと思います。
Cloudflareとは、セキュリティやWebページのパフォーマンスを強化などしてくれるような機能を提供しているクラウドサービスになります。
今回、このサービスのうち、Cloudflare Tunnelというサービスを使用していきます。

Cloudflare Tunnelとは

自宅のWebサーバー（自宅のPC）に外からアクセスできるようにするサービスです。
このサービス、実は使用するだけなら無料で使用ができるため、レンタルサーバーを用意しなくても手軽にWebページを公開したりできるものとなっています。

Cloudflareへの登録

まずは、Cloudflareに登録していきましょう。
https://www.cloudflare.com/ja-jp/

普通のサービスと同じように登録する形になりますが、こちらの Cloudflareアカウント作成してみる！という記事がわかりやすいのではないでしょうか。

登録が済みましたら、以下の画面になっているかと思います。

ドメインの取得

表示されたCloudflareのページをよく見るとドメインというものが必要なようです。
ドメインとは、インターネット上の住所みたいなものなのですが、これを自分で取得する必要があります。
様々なサービスがありますが、今回私はお名前.comを利用してドメインを取得しました。

お名前.comの例ですが、トップページにある検索欄へ好きな文字列を入力し検索するか、.comや.netのボタンをクリックした後に表示されるページで、同じように検索することで取得できるドメインが表示されます。
その後は、ページに従い契約することでドメインを取得することができます！
なお、場合によっては少し時間がかかる場合があります。

※ 2024/12/22現在では、.comや.netドメインは初期費用無料ですので、検証としてやってみたい方はこちらを選ばれるのが良いのではないでしょうか？

※ 注意事項として、初年度費用は0円のものがありますが、次年度以降更新料がかかる場合があります。また、サーバー初月無料特典が付いてくる場合もありますが、こちらも2ヶ月目以降は費用が掛かってしまうため注意が必要です。サーバーに関しては、特に不要であれば契約しなくても今回問題ありません。

Cloudflareにドメインを登録

さて、無事ドメインを取得することができましたらCLoudflareに登録していきます。

「既存ドメインを入力」の欄に先ほど取得したドメインを入力
DNSレコードのクイックスキャンを選択（デフォルトのはずです）
続行

続いてプラン選択画面になりますので、Freeプランが選択されていることを確認し、続行してください。

続いてDNSレコードを確認する画面になりますが、基本的にはこのままで問題ないと思われますので、画面下部の「次へ」ボタンをクリックしてください。

この後、以下のような画面になると思います。
2つコピーをするボタンが表示されていますが、こちらをそれぞれ契約したサービスに登録する必要がありますので、一度登録したドメイン取得サービスに戻ってください。

お名前.comの場合は、ログイン後「ネームサーバー設定 > ネームサーバーの変更」ドメインを選択し、「その他のサービス」欄にある入力欄へコピーしたものをそれぞれペーストして保存してください。

Cloudflareへ戻った後、一度サイドバーからアカウントホームへ戻っていただき、ステータスが「アクティブ」
になっているかどうかを確認してください。
なお、ちょっと時間がかかるかもしれません。
私の場合は、少し時間をおいてからリロードをすることでアクティブと表示されるようになりました。

Cloudflare Tunnelの作成

さて、ようやく本題のCloudflare Tunnelの設定をしていきます。
サイドバーのZero Trustをクリックし、ネットワーク > Tunnelsをクリックすることで以下のTunnel作成画面へ遷移してください。
なお、この時「Go Home」というようなエラーが表示された場合、リロードすることが私は解決できました。
また、もしかしたらZero Trustへの登録が必要のような画面へ遷移する場合もあるかもしれません。
その場合は、Freeプランに相当するものを選択し、登録してください。
このタイミングでは登録しませんでしたが、不意にページを離れてしまい再度ログインした際、Zero Trustへの登録を促されましたのでどこかのタイミングで登録が必要になるかと思います。

トンネルの追加ボタンから遷移した先では、Cloudflareを選択してください。

Cloudflare選択後、Tunnel名を入力する画面が表示されるため、Tunnel名を入力してください。

その後、Cloudflareと自宅PCを繋ぐための設定をどうするか聞かれる画面へ遷移します。
どのような方法でも良いのですが、今回私はWindowsを選択しました。
その場合、画面にも表示されていますが

CLoudflareとの接続をするためのアプリケーションをダウンロード
1. を起動
コマンドプロンプトを「管理者権限」で起動
ページに記載されているコマンドをコピー

※ 作業時はあまり気にならなかったのですが、日本語と英語のスクショが入り乱れてますね...（スミマセン

これらがうまくいくと画面下部に「Connected」が表示されるはずです。

Tunnelのルーティング作成

Connectedが表示された画面の下部にある「次へ」ボタンをクリックしてください。
誤って別のページへ遷移してしまった場合は、Zero Trustのネットワーク > TunnelsからTunnel一覧画面へ遷移し、該当のTunnelの設定ページへ遷移し、パブリックホスト名のタブ > 「パブリックホスト名を追加する」ボタンをクリックしてください。

私は誤って別ページへ遷移してしまったため、「次へ」ボタンをクリックした方と画面が少し違うかもしれませんが、入力内容はほぼ同じだと思います。

ここでは、Signalling ServerのものとWebページ表示用の以下の2つ分追加することとなります。

Signalling Server用
- サブドメイン: signalling（基本的には何でも良いですが、わかりやすいと後々楽です）
- ドメイン: 今回契約したドメイン
- タイプ: tcp
- URL: localhost:8888
Webページ表示用
- サブドメイン: frontend（基本的には何でも良いですが、わかりやすいと後々楽です）
- ドメイン: 今回契約したドメイン
- タイプ: http
- URL: localhost

追加後は、Tunnel一覧画面から遷移した設定画面のページですが、上記のようになっているかと思います。

サーバー・Webページ公開準備

さて、Cloudflareでの設定が終了したため後は

PC上でサーバーの起動
エディタのstream開始

を行います。

サーバー起動

最初のPC内での動作確認時は、Editorからサーバーを立ち上げました。
ただ、これだとログの確認が少し面倒なため以下の手順でサーバーを起動させることとします。

使用しているエンジンが格納されているフォルダからEngine > Plugins > Media > PixelStreaming > Resources内に格納されているWebServersをデスクトップなどへコピー
- もし存在しない場合、PixelStreaing Infrastructureからコードをダウンロードする必要があるかもしれません。こちらに関しては後日追記予定です。
コピーしたWebServers > SignallingWebServer > cirrus.jsをエディタで開く

以下を変更

// defaultConfigの内容修正
const defaultConfig = {
  UseFrontend: false,
  UseMatchmaker: false,
  UseHTTPS: true, // falseからtrueへ変更
  ～
  PublicIp: 'signalling.${契約したドメイン}', // localhostから変更。SignallingサーバーとしてCLoudflareに設定したドメインを設定
  ～
}

// clientConfigの修正
var clientConfig = { type: 'config', peerConnectionOptions: {} };
// 以下を追加
clientConfig.peerConnectionOptions = {
  iceServers: [
    // P2Pに必要なサーバーの明示的な設定
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun1.l.google.com:19302' },
    { urls: 'stun:stun2.l.google.com:19302' },
    { urls: 'stun:stun3.l.google.com:19302' },
  ],
};

変更を保存し、SignallingWebServer > platform_scripts > cmd > setup.batを実行
- これはwindowsの場合です。Linuxやmacの場合は、bashフォルダにあるsetup.shを実行してください
実行完了後、同じフォルダにあるrun_local.batを実行してください
- 同じくLinuxやmacの場合は、bashフォルダにあるrun_local.shを実行してください
コマンドプロンプトが立ち上がりっぱなしになり、ログが出ていれば立ち上げ成功です

UEの配信設定

最後にUE側の配信設定を行います。
「Use Remote Signalling Server」にチェックを入れ、Remote Signalling Server URlには、wss://signalling.${契約したドメイン} を入力してください。
その後、「Stream Full Editor」をクリックし、streamを開始してください。

動作確認

ここまでの設定がうまくいっていた場合、同一ネットワーク以外からhttps://frontend.${契約したドメイン} へアクセスすれば、確認できるようになっているはずです！
私の場合は、スマホ（WiFiオフ）や別PCをスマホのテザリングを利用してアクセスするなど行いました。
とりあえず動作確認が成功しましたら、コマンドプロンプトを閉じ、「Stop Streaming」をしましょう。

後始末

不意に作業内容がネット上に流れてしまうことを防ぐために、私は以下のような後始末をしておきました。

今回作成したCloudflare Tunnelを削除
しばらく使わないので、windowsの設定 > アプリ > cloudflared からアンインストールを選択

ファイルの置き場がすぐわかる方は、こちらのトピックにある方法でも良いかもしれません

最低限のセキュリティについて

今回、URLを知っていればだれでもアクセスできるため、本当に簡易的ですが最低限のセキュリティとしてBasic認証というものを導入してみます。
cirrus.jsをエディタなどで開き、以下を追加してください。

// 今回は動作確認程度ですので、わかりやすいように先のコード修正でも出てきたdefaultConfigの直前に記述

const BASIC_USER_NAME = "好きなユーザー名を記述"
const BASIC_PASSWORD = "好きなパスワードを記述"
const basicAuthMiddleware = (config) => {
    return (req, res, next) => {
        // 認証ヘッダーの取得
        const authHeader = req.headers.authorization;
        
        if (!authHeader) {
            // 認証ヘッダーがない場合は認証を要求
            res.setHeader('WWW-Authenticate', 'Basic realm="Pixel Streaming"');
            res.statusCode = 401;
            res.end('Unauthorized');
            return;
        }

        // Basic認証のデコード
        try {
            const base64Credentials = authHeader.split(' ')[1];
            const credentials = Buffer.from(base64Credentials, 'base64').toString('utf8');
            const [username, password] = credentials.split(':');

            if (username === BASIC_USER_NAME && 
                password === BASIC_PASSWORD) {
                return next();
            }
        } catch (e) {
            console.error('Basic auth decode error:', e);
        }

        // 認証失敗
        res.setHeader('WWW-Authenticate', 'Basic realm="Pixel Streaming"');
        res.statusCode = 401;
        res.end('Unauthorized');
    };
};
app.use(basicAuthMiddleware());

const defaultConfig = {
~
}

これを記述後、再度run_local.batやrun_local.shを実行しアクセスすると以下のように認証を求められるはずです。

参考記事:
Cloudflare Tunnel を使って自宅をデータセンターみたいにする
 Windows における Cloudflared トラブルシューティング

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up