ブラック研究室へようこそ!

大企業を退職して個人事業主になった日常、ブラック研究室のエピソード、Web/アプリ開発の備忘録など。

【IT備忘録】Google VR SDK+Unityでライブ映像を再生 〜THETA VでVRアプリ製作〜

 

前回:

【IT備忘録】NginxでHLS形式でライブストリーミング 〜THETA VでVRアプリ製作 - ブラック研究室へようこそ! 

 

やりたいことの全体像は、以下の図のとおりです。

前回、自作でストリーミングサーバを構築できたので、いよいよクライアント側。

そう、Unityへの着手です。

f:id:blackLab:20180512065639p:plain

 

準備するもの

ソフトウエア系

 

ハード系

  • VRゴーグル(確認用に買いました) 

スマホをガチャっとはめるタイプのあれです。

ただの確認用なので、以下のような、千円代で買える手軽なものをチョイスしました。

 

 ①UnityにGoogle VR SDKをインポート

今回、HLS形式のライブ映像をUnityで再生したいのですが、

デフォルトで用意されている「Video Player」コンポーネントでは再生できません…。

 

調べたところ、どうやらGoogle VR SDKのビデオ再生コンポーネントを利用すると、HLS形式が再生可能ということで、導入します。

 

以下のページを参考にさせていただきました。

developers.blog.eq-inc.jp

 

Google VR SDK for Unityの .unitypackageファイルをダウンロードし、クリックで開きます。

すると、自動でプロジェクトへ「import」できるのでインポートしてしまいます。

 

これだけだと、まだビデオ再生用のコンポーネントは利用できないので、

「Assets」→新しくできた「Google VR」内の「GVRVideoPlayer.unitypackage」をダブルクリックして、さらにこいつもインポートして下さいね。

f:id:blackLab:20180512072715p:plain

 

 これで下準備はOKです!

 

②天球モデルを置き、ビデオ再生コンポーネントをセット

  今回、360度のライブ映像を投影するスクリーンにあたるモデルですが、

  @warapuri氏が提供している天球モデル「Sphere100.fbx」を使います。

 

ダウンロードしたら、Assets内へD&Dして追加します。

その後、Assets内から、SceneへもD&Dして、画面へモデルを置きます。

「Inspector」の「Transform」のパラメーターは、

  Position:X・Y・Zともに0

  Scale:X・Y・Zともに100

としちゃいます。

f:id:blackLab:20180512073919p:plain

 

次に、このモデルのマテリアルを、ライブ映像が投影できるものに変更します。

「Inspector」の「Mesh Render」内の「Materials」→「Element 0」を『VideoMono』へ変更。

f:id:blackLab:20180512075605p:plain

 

そして、ライブ映像再生用のコンポーネントを追加したいので、

「Inspector」→「Add Component」から、

『Scripts』→『Gvr Video Player Texture』を選んで追加します。

f:id:blackLab:20180512075729p:plain

Video Type、Video URLを図のように指定します。

※Video URLですが、http://IPアドレス/hls/は、前回のNginxでの設定に基づきます。

test.m3u8の「test」の部分ですが、ストリームキーと呼ばれるもので、

OBSで映像転送をする時に、指定するものになります。

 

自動的に再生を開始したいので、もう1個コンポーネントを追加します。

「Inspector」→「Add Component」から、検索して、『Auto Play Video』を追加。

 

こんなイメージになるでしょうかね。

f:id:blackLab:20180512081503p:plain

 

これでUnity側の準備は完了です。

※なんとこのGoogle VR SDK、このPC上で「Run」(再生ボタン押下)をしてみても動かないんですが、実機にビルドするとちゃんと動く仕様みたいですね。

 

実機(Android・iOS)へのビルド方法は、以下が参考になるかと思います。

cardboardclub.jp

 

③OBSでTHETAのライブ映像を転送してみる

とうとうここまで来ました。

配信設定をします。

 

・配信種別:カスタムストリーミングサーバー

・URL:rtmp://IPアドレス/live

  →「live」は、前回のNginxで設定(nginx.conf)した、「application live」に準じています。

・ストリームキー:test

  →先程のやつです。Unity上で「test.m3u8」とURL指定した『test』に合わせます。

f:id:blackLab:20180512082332p:plain

 

そして、配信開始をクリック!

f:id:blackLab:20180512083434p:plain

 

配信が開始されました。

実機にビルドしたUnityアプリを見てみると…

f:id:blackLab:20180512083954p:plain

見れました!(わかりにくいですが、上図はアプリのキャプチャです…)

 

完成!

 というわけで、THETA Vの360度ライブ映像を、自作サーバを介してアプリに配信することができました。

ここからどう工夫していくかが腕の見せ所、といった感じでしょうか。

 

では、また!!!