MR and Azure 306:ビデオのストリーミング再生

LINEで送る
Pocket

こんにちは、ナレコム菅井です。

今回はMR and Azure306のアプリを作っていきます。

開発環境は以下の通りです。
・Windows
・Unity 2017.4.11f1
・visual studio2017
・HoloLens

目標はHoloLensでビデオをストリーミング再生できるようにすることです。HoloLensから360度ビデオを見ることができるようになります。さらに、あるオブジェクトを見ると、他の動画に切り変わるという機能もつけていきます。それではさっそく始めていきましょう!

 

0.準備


ステップ1. Azure Storage Serviceを使用するため、Azure Portalからストレージアカウントを作成する。

ステップ2. Azure PortalでMedia Servicesを追加する。

ステップ1
1. Azure Portalにログインする。

2.[ストレージアカウント]をクリックする。

3.[追加]より新しいストレージアカウントを追加する。

a. ストレージアカウント名を自由に決める
b. アカウントの種類をストレージ(汎用v1)とする
c. レプリケーションをローカル冗長ストレージ(LRS)とする
[次: 詳細>] へ進み
d. 安全な転送が必須を無効とする

[確認および作成]をクリックし、[作成]を選択します。


4. お知らせタブをクリックし、デプロイが完了したことを確認します。

ステップ2
1. [リソースの作成]を開いてMedia Servicesを検索し、Media Servicesの説明の画面にスライドしたら[作成]をクリック。


2. 作成するサービスに関する情報を入力し、[作成]をクリック。※記入例です。

3. お知らせタブをクリックし、デプロイが完了したら[リソースに移動]を選択する。

4. [アセット]を開き[アップロード]をクリックする。

5. ビデオを追加していく

a. サンプルビデオをダウンロード

b. フォルダアイコンからダウンロードした動画を追加する。名前は簡単のためVideoとします。

c. [アセット]に戻り、追加したビデオをクリックする。

d. [エンコード]をクリックし、[資産のエンコード]が以下のようになっていることを確認して[作成]をクリック。

e. 再び[アセット]に戻り、新しく追加された項目を選択する。

f. [公開]をクリックし[ストリーミング中]を[プログレッシブ]に変更したあと[作成]する。公開したあと、アセットの種類が変わっていることがわかります。これを選択します。

g. ファイルの中から、mp4の拡張子がついたものを選択。ダウンロードURLはのちほど使います。


h. aからgまでを別のサンプル動画についても行う。

以上で二つの動画が公開され、ホロレンズから取得可能になりました。

 

1. Unityの設定


続いてUnityの設定を行っていきたいと思います。以下の手順で進めていきましょう。

1.Unityを開き、[New]から新しいプロジェクトをつくる。
名前をMR_360VideoStreamingとして、[Create project]をクリックします。

2. [Build Settings..]からさまざまな項目を編集していく。
[File]->[Build Settings..]を開きます。

a.プラットフォームの変更
[PC, Mac & Linux Standalone]を[Universal Windows Platform]に変更し、[Switch Platform]をクリックします

b.[Player Settings..]を編集する
[Player Settings..]をクリックします。

そのあと[Other Settings]、[Publishing Settings]->[Capabilities]、[XR Settings]を以下のように設定してきます。


続いて、[Unity C#]にチェックを入れます。[Build Settings..]の変更は以上です。

3. InsideOutSphere Unityパッケージのインポート
まず、InsideOutSphereをダウンロードします。[Assets]->[Import Package]->[Custom Package]をクリックします。ダウンロードしたInsideOutSphereをフォルダの中から探し選択し、[Import]をクリックします。

 

2.カメラの設定、オブジェクトの設定


まず、Main Cameraの設定を行なっていきます。

[Hierarchy]->[Main Camera]を選択して[Inspector]を
a. Transform
————————–
Position  | 全て0
————————–
Rotation | 全て0
————————–
Scale      | 全て1
————————–
b.[Camera]から[Clear Flags]をSolid Colorに、[Clipping Planes]を[Near]が0.1、[Far]が6
となるように編集します。

続いて、InsideOutSphereを編集していきます。

a. [Projects]->[Prefab]フォルダから、InsideOutSphereを[Hierarchy]パネルにD&D。

b.[InsideOutSphere]の[Inspector]->[Transform]を
————————————
Position  | 全て0
————————————
Rotation | X:0 | Y:-50 | Z:0
————————————
Scale      | 全て1
————————————

c. [InsideOutSphere]->[GazeButtom]の[Inspector]を
—————————————-
Position  | X:3.6 | Y:1.3 | Z:0
—————————————-
Rotation | 全て0
—————————————-
Scale      | 全て1
—————————————-

これで指定した位置にオブジェクトが配置されました。

 

3.スクリプトの作成


ここでは二つのスクリプトを作成していきたいと思います。
・VideoController
・Gaze

スクリプトの作り方はまず、すべてのスクリプトをまとめておくフォルダーを作成します。[Project]->[Create]をクリックし、[Folder]を選択して新しいフォルダーを作ります。名前をScriptsとします。続いて[Project]->[Create]->[C# Script]をクリックし、クラス名をつけていきます。

・VideoController
このクラスにはMedia Serviceとやりとりするメソッド、ビデオを切り替えるメソッドなどを記述していきます。コードは以下の通りです。ここで、0.準備で取得した二つのダウンロードURLを所定の位置に挿入します。

記述し終えたら、このスクリプトを[Main Camera]にD&Dします。[Main Camera]の[Inspector]を見ると、[Video Controller]が追加されているのがわかります。この[Sphere]に[InsideOutSphere]をD&D します。

・Gaze
このクラスには、ユーザーがビデオ切り替えのための物体を見たかどうかを識別するメソッドなどを記述します。
コードは以下の通りです。

このクラスも同様に[Main Camera]にD&Dします。

 

4.Sceneの追加


二つのビデオを切り替えたいので二つのシーンを用意します。以下の手順に従ってシーンを作っていきたいと思います。

1. シーンをまとめるフォルダーの作成、一つ目のシーンの保存
[File]->[Save Scene as..]でフォルダが開くので、[新しいフォルダー]をクリックし、名前をScenesとします。このScenesフォルダーの中に、VideoScene1として[保存]します。

2. 二つ目のシーンの作成。
Unityに戻り先ほどつくった[Scenes]を開き、[VideoScene1]をクリックし、ctrl + Dで複製します。名前はVideoScene2です。

3. 二つのシーンを追加する
[File]->[Build Settings..]に入り、先ほど作った二つのシーンを[Scenes In Build]にD&Dします。

このままでは二つとも同じシーンなのでVideoScene2の方を編集していきたいと思います。

4.GazeButtonを変える。
[Hierarchy]->[InsideOutSphere]->[GazeButtom]の[Inspector]を編集していきます。
a. [Transform]
—————————————
Position  | X:0 | Y:1.3 | Z:3.6
—————————————
Rotation | 全て0
—————————————
Scale      | 全て1
—————————————

b. [Mesh Filter]
[Mesh]をCubeに変更します。

c. [Sphere Collider]の削除、[Box Collider]の追加
[Sphere Collider]の横の歯車をクリックし、[Remove Component]をクリックします。

d.[Add Component]から[Box Collider]を追加します。

e. Material
[Project]->[Materials]から[ButtonMaterial]を複製します。 複製したMaterialの[Inspector]から[Albedo]を青にします。

これでシーンを切り替えるためのボタンが異なるものになりました。

5.ビルド


[File]->[Build Settings..]->[Build]の順に選択します。新しいフォルダー(BUILDS)を作成し、その中にさらにフォルダー(VideoStreaming_Build)を作ります。このフォルダーを選択し、保存します。

この後の手順についてはこちらを参照してください。

HoloLensで実行した時の様子です。見づらいですが以下のようになればオッケーです。GazeButtonを探して見てください。シーンが切り替わるはずです。

以上となります。 お疲れ様でした。

LINEで送る
Pocket