[Unity]UMPでrtmpストリームを受け取ってみる

こんにちはこんばんは、[VRize](https://twitter.com/VR_ize)で技術班としてお手伝いをさせてもらっているよつばです。
今回は8月5日に配信された[ぶいっと](https://www.twitch.tv/videos/701058431)で[FAIO](https://twitter.com/FAIO1230)がVRizeのDJとして参加させて頂いたときに作成したバーチャルワールドのスクリーンに利用したアセットの利用法を紹介していきます。

# はじめに
unityは標準でVideoPlayerコンポーネントを用意していますが、mp4の動画しかストリーミング再生できないという制限があります。
RTMPなどのソースの再生はデフォルトでは対応していないのでこちらで用意するかアセットを頼る必要があります。
自分たちで用意するのは大変なのでアセットを調べていたところ、UMPというアセット***(45$)***がrtmpや他のプロトコルのストリーム再生に対応していたので、こちらを使ってみることにしました。

# この記事の対象者
- 4500円くらい払ってやるぜ！って人
    - UMP(https://assetstore.unity.com/packages/tools/video/ump-win-mac-linux-webgl-49625)
- Unityでストリーム再生したい人

# UMPが対応しているプロトコル
アセットストア上で明記されている対応規格


|メディア|対応規格|
|---|---|
|(主な)ローカルビデオファイル|3gp avi flv swf m4v mkv ogg mov qt webm wmv|
|ストリーム|HTTPS HTTP HLS RTSP RTMP|
できればyoutubeの動画・ライブも再生できたらよかったのですがyoutube側がころころ仕様を変えるのか他のアセットでも再生ができないなどの意見が寄せられていたので、仕方ないのかなという感じです。

# UMPの使い方
※UMPをUnityのプロジェクトにインポートした前提でお話します。

## 動画を再生する
### 準備
`Project` -> `UniversalMediaPlayer` -> `Prefabs`から`UniversalMediaPlayer`を`Hierarchy`に追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/f0fe8712-0b60-068b-f4de-72be3650b7dd.png)

### インスペクタの解説
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/b72ca2c5-39ef-6c8a-a295-1584c620d088.png)

####  Renderring GameObjects
動画を描画するオブジェクトを指定します。Sizeを変えることで、描画対象を増やすことが可能です。
今回はCube、Plane、Sphereを描画対象にしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/6d4da161-ff3b-b6f9-73d1-8e2c7d95b921.png)


#### Path to video file
再生したい動画のパスを入力します。
公式のドキュメント(インポート時に付属してます)から使用例を引用しておきます。

|動画の場所|使用例|
|---|---|
|**StreamingAssetsフォルダ**<br>(StreamingAssets\myVideoFile.mp4)|file:///myVideoFile.mp4<br>|
|**ローカルストレージ**<br>(C:\MyFolder\Videos\video1.mp4)| file:///C:\MyFolder\Videos\video1.mp4<br>C:\MyFolder\Videos\video1.mp4<br>|
|**ストリーム**|rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov|
普段ファイルのパスを指定するのと同じ要領で大丈夫そうです。
僕の場合は、[SRS](https://github.com/ossrs/srs)を使ってOBSの映像をrtmpで経由したので以下のようなアドレスにしました。
![コメント 2020-08-09 013118.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/cc136c23-0b63-8219-1d44-dcf731764dc1.png)

#### Additional properties
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/327e6c5d-f23a-c588-d2ef-45d93bbb8600.png)

- **AutoPlay** : プレイ時に自動的に再生するようになります
- **Loop**     : ループ再生するようになります.
- **Loop(smooth)** : Loopと違いバッファを持たない設定のようです。(正直よくわかってない) 
- **Mute** : ミュートです

####Advanced options
今回は特に設定しないため説明は省きます。

#### Events & Logging
動画の再生時、停止時やエラー発生時に発火させるイベントを指定できるようです。
これも今回は利用しないので省きます。

### 再生
レンダリング対象のオブジェクトとURLの指定ができたら準備は完了です。
後はUnity Editorで実行すればオブジェクトに動画が描画されるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/e3f5551a-58d4-f04e-52ef-8db393934497.png)

## 複数の動画を再生する
### UniversalMediaPlayerを増やす
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/f49d1c74-f5c6-4256-f1ca-820338af8c92.png)
ヒエラルキーに新しくプレファブを入れ、インスペクタで別のURLにするなり、ローカルのパスを指定するだけで別の動画を再生できます。

## 独自のshaderを使う
MainTexにそのまま動画がいくので特に設定はいりません。

# さいごに
さすがに有料アセットだけあって使いやすかったです。案外Unity上でストリームを再生する方法がなく、困っていたのでUMPにはとても助けられました。今回は動画を流すことにフォーカスをあてましたが、今度の記事では更にshaderで加工する方法も書いてみようと思います。ここまでお付き合いいただきありがとうございました。