Unity：Unity Render Streaming（Unity公式のWebRTC）を使う【WebブラウザとUnityが連携！】


# はじめに

*こんにちは、のんびりエンジニアのたっつーです。*
*[今回の記事](https://www.fast-system.jp/unity-render-streaming-webrtc/)に詳細があるのでぜひご参照ください。*

今回は、先日 Unite Tokyo 2019 で発表された Unity Render Streaming （Unity公式のWebRTC）を試してみたいと思います。

# Unity Render Streaming とは？

[公式ブログ](https://blogs.unity3d.com/jp/2019/09/17/stream-high-quality-real-time-graphics-through-your-browser-with-our-new-webrtc-framework/)の説明の説明を引用。

     Unity 向けの WebRTC ライブラリを開発するとともに、このライブラリを用いて Unity のアプリケーションをブラウザーから利用できるようにする

    ・・・

    Unity Render Streaming をプロジェクトに追加することで、Google Chrome や Safari などの、皆さんが日頃利用しているブラウザーから Unity で開発したアプリケーションをリアルタイムに操作できます。また、私たちはデスクトップのブラウザーだけでなく、iPad や iPhone、Android の主要ブラウザーで動作を確認しています。
    https://blogs.unity3d.com/jp/2019/09/17/stream-high-quality-real-time-graphics-through-your-browser-with-our-new-webrtc-framework/

## ポイント

ポイントとしては以下のような感じです。

- WebRTCを使って実現
- ゲーム画面をWebブラウザに配信できる。
   - デスクトップ、主要なスマホのWebブラウザに対応
- Webブラウザ側から操作が出来る。

## 必要な環境

このソリューションは、NVIDIAのグラボに最適化されているとの事。
ドキュメントによると、***DirectX11 のみサポート***しているそうなので、 NVIDIA VIDEO CODEC SDK で推奨されているグラフィックボードが公開されているのでチェックしましょう。

※将来的には、DirectX12をサポート予定になっています。

# Unity Render Streaming を試す

## NVIDIAドライバのバージョン

実行時に、以下のエラーが発生する時には、NVIDIAドライバーのバージョンが古いため出ているようなので、***グラフィックドライバを最新バージョン***に更新しましょう。

```
[WebRTC] The version of the hardware codec driver does not support API
UnityEngine.Debug:LogError(Object)
Unity.WebRTC.WebRTC:Initialize() (at Library/PackageCache/com.unity.webrtc@1.0.1-preview/Runtime/Srcipts/WebRTC.cs:236)
Unity.RenderStreaming.RenderStreaming:Awake() (at Assets/Scripts/RenderStreaming.cs:59)
```

NVIDIA VIDEO CODEC SDKのページでは、WindowsのNVIDIAドライバーは 436.15 以降 が必要との事でした。
![WS000002-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/8bb60282-f36e-87c3-ed58-9d92d3dcef47.jpeg)

## 公式サンプルを試す

次に、公式のサンプルを試してみます。
このサンプルを用いる事により、***Unity側でデバッグ実行して、Webブラウザ側で操作***が出来るようになります。
※裏でサーバも起動させて、Unity<->ブラウザの通信を補助します

## Unity Render Streamingのパッケージを追加

新しく Unityでプロジェクトを作成したら、パッケージマネージャーを起動してください。
メニュバーから***「Window > PackageManager」を選択***します。

![WS000000-5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/d3dd68a0-55ae-85e2-1e20-150035113648.jpeg)

「Unity Renbder Streaming」はまだ Previewパッケージなので、***「Show preview pakcages」を選択***します。

![WS000001-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/a369a331-13d8-04c6-3962-fb02c2ad0388.jpeg)


検索欄に***「streaming」と入力***すると、「Unity Render Streming」が表示されます。
※ Unityのバージョンが古いと、この一覧に出てこないので注意しましょう。
![WS000002-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/feb5ac23-2cd4-c074-99ca-146be63d5ba7.jpeg)



対象パッケージを選択して、***「Install」を選択***しましょう。
![WS000003-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/85fcf6da-f4f5-0065-98c9-aa5612093ccc.jpeg)



InputSystemの警告がでますが、問題無いので***「Yes」を選択***しましょう。
![WS000004-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/702bb592-235b-6489-16cc-3890e941a188.jpeg)

## サンプルプロジェクトの追加

次に、サンプルプロジェクトをインポートします。
※「Unity Render Streming」だけを使う場合は、ここは不要になります。

![WS000005-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/056bdb53-bf01-7139-6564-df4b5fc828f5.jpeg)
![WS000006-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/e27b9d0f-8c44-2fc2-7f84-d2ddb81d7535.jpeg)

（HDRPプロジェクトなので結構時間がかかりますが気長に待ちましょう）
サンプルプロジェクトがインポートされると、こんな感じでファイルが展開されます。

![WS000007-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/d09ee17a-8732-4ffc-c4b6-fba8b676b4eb.jpeg)


## WebServerを実行

UnityとWebブラウザの通信を仲介するWebサーバを配置して、実行します。
メニュバーから、***「Edit > Unity Render Streaming > Donwload web app」を選択***して、適当なフォルダに ***webserver.exe を保存***しましょう。
![WS000008-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/5c2dbd24-e171-0629-b70c-37acabed73ce.jpeg)


存したら、***webserver.exe を実行***しましょう。
![WS000009.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/a69956b7-79ef-d050-19b8-71bb2b14f82a.jpeg)



実行すると、このような画面が立ち上がります。
![WS000010.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/130a1aba-6e51-860d-c3a8-56529efa33ab.jpeg)


これで全ての準備が整いました、次に実際に事項して動作を確認してみましょう。


## Unity・Webブラウザで実行して確認

***Unity側で実行***してください。
![WS000011.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/f3cfee03-7fc6-77e5-f2d5-65bdbb2d3fdb.jpeg)


次に、***ブラウザで（localhost）を指定***して表示してみてください。
![WS000012.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/5a8c5094-24c5-f4a4-039a-efc9c31bd559.jpeg)

どうでしょうか、以下のようにWebブラウザでの操作がUnity側にフィードバックされているのがわかりますね。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Unite Tokyo 2019で発表されたUnity Render Streamingを試してみたけど簡単に使えた！<br><br>ブラウザがゲームのプラットフォームになれる！<a href="https://twitter.com/hashtag/unity?src=hash&amp;ref_src=twsrc%5Etfw">#unity</a> <a href="https://t.co/pmb3nS3roQ">https://t.co/pmb3nS3roQ</a> <a href="https://t.co/ayUmsFbOIs">pic.twitter.com/ayUmsFbOIs</a></p>&mdash; たっつー@Unity情報発信 (@kingyo222) <a href="https://twitter.com/kingyo222/status/1182827140011589632?ref_src=twsrc%5Etfw">October 12, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 


# 終わりに

*よければ ブログ「[Unity+AssetStoreおすすめ情報](https://www.fast-system.jp/)」の方にも色々記載しているのでぜひご参照いただければと思います。*