HoloLens (第 1 世代) と Azure 306 - ビデオのストリーム配信

[アーティクル]
03/21/2023

Note

Mixed Reality Academy のチュートリアルは、HoloLens (第 1 世代) と Mixed Reality イマーシブヘッドセットを念頭に置いて編成されています。そのため、それらのデバイスの開発に関するガイダンスを引き続き探している開発者のために、これらのチュートリアルをそのまま残しておくことが重要だと考えています。これらのチュートリアルが、HoloLens 2 に使用されている最新のツールセットや操作に更新されることは "ありません"。これらは、サポートされているデバイス上で継続して動作するように、保守されます。今後、HoloLens 2　の開発方法を説明する新しいチュートリアルが公開される予定です。この通知は、それらのチュートリアルが投稿されたときにリンクと共に更新されます。

Windows Mixed Reality V R の例のスクリーンショット。 Windows Mixed Reality V R エクスペリエンスのスクリーンショット。

このコースでは、お客様の Azure Media Services を Windows Mixed Reality の VR エクスペリエンスに接続して、イマーシブヘッドセット上で 360 度ビデオをストリーミングする方法を学びます。

Azure Media Services はサービスのコレクションで、現在最も人気のあるモバイルデバイス上でより多くの視聴者にリーチできるブロードキャスト品質のビデオストリーミングサービスを提供します。詳細については、Azure Media Services のページをご覧ください。

このコースを修了すると、お客様は次のことができる Mixed Reality イマーシブヘッドセットアプリケーションを手に入れることができます。

Azure Media Service を介して、Azure Storage から 360 度ビデオを取得する。
取得した 360 度ビデオを Unity のシーン内に表示する。
2 つのシーン間を移動し、2 つの異なるビデオを表示する。

お客様のアプリケーションで、結果をどのようにデザインと統合するかは、お客様次第です。このコースは、Azure のサービスを Unity プロジェクトに統合する方法を学べることを目的としています。このコースで得られた知識を使用して、ご自分の Mixed Reality アプリケーションを強化しましょう。

デバイスサポート

コース	HoloLens	イマーシブヘッドセット
MR と Azure 306: ストリーミングビデオ		✔️

前提条件

Note

このチュートリアルは、Unity と C# の基本的な使用経験がある開発者を対象としています。また、このドキュメント内の前提条件や文章による説明は、執筆時 (2018 年 5 月) にテストおよび検証された内容であることをご了承ください。「ツールのインストール」の記事に記載されているように、最新のソフトウェアを自由に使用できます。ただし、このコースの情報は、以下に記載されているものよりも新しいソフトウェアで見つかったものと完全に一致するとは限りません。

このコースでは、次のハードウェアとソフトウェアをお勧めします。

イマーシブ (VR) ヘッドセットの開発に必要な Windows Mixed Reality と互換性のある開発用 PC
開発者モードが有効になっている Windows 10 Fall Creators Update (またはそれ以降)
最新の Windows 10 SDK
Unity 2017.4
Visual Studio 2017
Windows Mixed Reality イマーシブ (VR) ヘッドセット
Azure の設定とデータ取得のためのインターネットアクセス
mp4 形式の 2 本の 360 度ビデオ (こちらのダウンロードページには、いくつかの無料のビデオがあります)

開始する前に

このプロジェクトをビルドする際の問題を避けるために、このチュートリアルで紹介するプロジェクトをルートまたはルートに近いフォルダーに作成することを強くお勧めします (フォルダーパスが長いと、ビルド時に問題が発生する可能性があります)。
Mixed Realityイマーシブヘッドセットをセットアップしてテストします。

Note

このコースでは、モーションコントローラーを必要としません。イマーシブヘッドセットの設定についてサポートが必要な場合は、Windows Mixed Reality の設定方法のリンクをクリックしてください。

第 1 章 - Azure portal: Azure Storage アカウントの作成

Azure Storage サービスを利用するには、Azure portal で Storage アカウントを作成および設定する必要があります。

Azure Portal にログインします。

Note

まだ Azure アカウントをお持ちでない方は、作成する必要があります。このチュートリアルを教室やラボで受講している場合は、インストラクターや監督者に新しいアカウントの設定方法を質問してください。
ログインしたら、左メニューの [ストレージアカウント] をクリックします。
[ストレージアカウント] タブで [追加] をクリックします。
[ストレージアカウントの作成] タブで、
1. ご自分のアカウントの [名前] を入力します。このフィールドには数字と小文字しか入力できないことに注意してください。
2. [デプロイモデル] には、[リソースマネージャー] を選択します。
3. [アカウントの種類] には [ストレージ (汎用 v1)] を選択します。
4. [パフォーマンス] には [標準]* を選択します。
5. [レプリケーション] には [ローカル冗長ストレージ (LRS)] を選択します。
6. [安全な転送が必須] は [無効] のままにしておきます。
7. サブスクリプションを選択します。
8. [リソースグループ] を選択するか、新規に作成します。リソースグループは、Azure アセットのコレクションの監視、アクセス制御、プロビジョニング、課金管理を行う方法を提供します。
9. リソースグループの [場所] を決定します (新しいリソースグループを作成する場合)。この場所は、アプリケーションが実行されるリージョン内にすることが理想的です。一部の Azure アセットは、特定のリージョンでしか利用できません。
お客様は、本サービスに適用されるご契約条件を理解していることを確認する必要があります。
[作成] をクリックしたら、サービスが作成されるのを待つ必要があります。これには 1 分ほどかかることがあります。
サービスインスタンスが作成されると、ポータルに通知が表示されます。
この時点では、リソースをフォローする必要はありません。次の章に進んでください。

第 2 章 - Azure portal: Media Service の作成

Azure Media Service を使用するには、お客様のアプリケーションで利用できるようにサービスのインスタンスを構成する必要があります (アカウント所有者は管理者である必要があります)。

Azure portal で、左上の [リソースの作成] をクリックして [Media Service] を検索し、Enter キーを押します。目的のリソースにピンクのアイコンが表示されているので、これをクリックすると新しいページが表示されます。
新しいページには、Media Service の説明が表示されます。このプロンプトの左下にある [作成] ボタンをクリックすると、このサービスとの関連付けが作成されます。
[作成] をクリックすると、パネルが表示されます。ここに、新しい Media Service の詳細を入力する必要があります。
1. このサービスインスタンスに必要な [アカウント名] を入力します。
2. サブスクリプションを選択します。
3. [リソースグループ] を選択するか、新規に作成します。リソースグループは、Azure アセットのコレクションの監視、アクセス制御、プロビジョニング、課金管理を行う方法を提供します。 1 つのプロジェクト (例: これらのラボなど) に関連するすべての Azure サービスを共通のリソースグループの下に保持することをお勧めします。
Azure リソースグループについて詳しく知りたい場合は、Azure リソースグループの管理方法のリンクからご覧ください。
1. リソースグループの [場所] を決定します (新しいリソースグループを作成する場合)。この場所は、アプリケーションが実行されるリージョン内にすることが理想的です。一部の Azure アセットは、特定のリージョンでしか利用できません。
2. [Storage アカウント] セクションでは、[選択してください] セクションをクリックし、前章で作成した [Storage アカウント] をクリックします。
3. またお客様は、本サービスに適用されるご契約条件を理解していることを確認する必要があります。
4. Create をクリックしてください。
[作成] をクリックしたら、サービスが作成されるのを待つ必要があります。これには 1 分ほどかかることがあります。
サービスインスタンスが作成されると、ポータルに通知が表示されます。
通知をクリックして、新しいサービスインスタンスを確認します。
通知の[リソースに移動]ボタンをクリックして、新しいサービスインスタンスを探します。
新しい Media サービスのページの左側のパネルで [アセット] リンク (真ん中から下) をクリックします。
次のページでは、ページの左上にある [アップロード] をクリックします。
フォルダーのアイコンをクリックしてファイルを参照し、ストリーミングしたい最初の 360 度ビデオを選択します。

こちらのリンクからサンプルビデオをダウンロードすることができます。

警告

ファイル名が長いとエンコーダーに問題が発生する場合があります。ビデオに問題が発生しないように、ビデオのファイル名を短くすることを検討してください。

ビデオのアップロードが完了すると、進行状況バーが緑色になります。
上のテキスト [(yourservicename - アセット)] をクリックすると、[アセット] ページに戻ります。
あなたのビデオが正常にアップロードされたことがわかります。そのタイルをクリックします。
リダイレクト先のページには、ビデオに関する詳細情報が表示されます。ビデオを使用できるようにするには、それをエンコードする必要があります。それには、ページ左上の [エンコード] ボタンをクリックします。
右側に新しいパネルが表示されます。ここで、ファイルのエンコードオプションを設定することができます。以下のプロパティを設定します (一部は既定で設定済みです)。
1. メディアエンコーダー名 Media Encoder Standard
2. エンコードプリセット Content Adaptive Multiple Bitrate MP4
3. ジョブ名 Media Encoder Standard processing of Video1.mp4
4. 出力メディアのアセット名 Video1.mp4 -- Media Encoder Standard エンコード
[Create] ボタンをクリックします。
[エンコードジョブが追加されました] という通知バーが表示されます。そのバーをクリックすると、エンコードの進捗状況が表示されたパネルが表示されます。
ジョブが完了するまで待ちます。完了したら、パネルの右上にある [X] でパネルを閉じることができます。

重要

この処理にかかる時間は、ビデオのファイルサイズによって異なります。このプロセスにはかなりの時間がかかることがあります。
エンコード版のビデオが作成されたので、それを公開してアクセスできるようにすることができます。これを行うには、青いリンク [アセット] をクリックして、アセットページに戻ります。
ご自分のビデオが、[アセットの種類] が [Multi-Bitrate MP4] である別のビデオと一緒に表示されます。

Note

最初のビデオと一緒に、新しいアセット [Unknown] が表示され、その [サイズ] が "0" バイトであることにお気付きになるでしょう。更新するには、ウィンドウを最新の情報に更新してください。
この新しいアセットをクリックします。
以前に使用したパネルと同様のパネルが表示されますが、これは別のアセットです。ページの中央上部にある [公開] ボタンをクリックします。
お客様のアセット内のファイルへのエントリポイントであるロケーターを設定するよう求めるプロンプトが表示されます。このシナリオでは、次のプロパティを設定します。
1. [ロケーターの種類]>[プログレッシブ]。
2. 日付と時刻は、現在の日付から将来の時刻 (この場合は 100 年) に自動的に設定されます。このままでもよいですが、適宜変更してください。
Note

ロケーターについての詳細情報や、お客様が選択できる内容については、Azure Media Services のドキュメントをご覧ください。
パネルの下部にある [追加] ボタンをクリックします。
これでお客様のビデオが公開され、エンドポイントを使用してストリーム配信できるようになりました。ページの下の方に [ファイル] というセクションがあります。ここには、ビデオのさまざまなエンコードバージョンが表示されています。可能な限り高い解像度のものを選択すると (下の画像では 1920 x 960 のファイル)、右側にパネルが表示されます。そこに [ダウンロード URL] があります。このエンドポイントをコピーして、後でご自分のコードに使用します。

Note

また、[再生] ボタンを押すと、ビデオを再生してテストすることができます。
次に、このラボで使用する 2 本目のビデオをアップロードする必要があります。上記の手順に従って、2 本目のビデオにも同じ作業を繰り返します。 2 本目のエンドポイントもコピーするようにしてください。 2 本目のビデオをダウンロードするには、次のリンクを使用します。
両方のビデオが公開されたら、次の章に進む準備ができました。

第 3 章 - Unity プロジェクトの設定

次に示すのは、Mixed Reality を使用して開発するための一般的な設定です。そのため、他のプロジェクトに適したテンプレートとなっています。

Unity を開き、[新規] をクリックします。
Unity プロジェクトに名前を付ける必要があります。MR_360VideoStreaming と入力します。プロジェクトの種類が [3D] に設定されていることを確認します。 [場所] を適切な場所に設定します (ルートディレクトリに近い方が適しています)。 [Create project]$プロジェクトの作成$ をクリックします。
Unity を開いた状態で、既定の [Script Editor]$スクリプトエディター$ が Visual Studio に設定されていることを確認することをお勧めします。[Edit Preferences]$環境設定の編集$ に移動し、新しいウィンドウで [External Tools]$外部ツール$ に移動します。 [外部スクリプトエディター] を [Visual Studio 2017] に変更します。 [環境設定] ウィンドウを閉じます。
次に、ファイルビルド設定に移り、プラットフォーム切り替えボタンをクリックすることで、プラットフォームをユニバーサルWindowsプラットフォームに切り替えます。
次のことも確認します。
1. ターゲットデバイスをいずれかのデバイスに設定します。
2. ビルドの種類をD3Dに設定します。
3. SDKを最新のインストールに設定します。
4. Visual Studioのバージョンを最新のインストールに設定します。
5. ビルドと実行をローカルマシンに設定します。
6. シーンの設定は後で行いますので、今は気にしないでください。
7. ここでは、残りの設定は既定値のままにしておきます。
Build Settings (ビルド設定) ウィンドウで、[プレーヤー設定] ボタンをクリックすると、"インスペクター" が配置されているスペースに関連パネルが表示されます。
このパネルでは、いくつかの設定を確認する必要があります。
1. [Other Settings] (その他の設定) タブで、次の内容を確認します。
  1. Scripting Runtime Version は Stable (.NET 3.5 同等) にする必要があります。
  2. [スクリプトバックエンド] が [.NET] である。
  3. [API 互換性レベル] が [.NET 4.6] である。
2. さらに、パネルの下にある [XR Settings]$XR 設定$ ([Publish Settings]$公開設定$ の下) で、[Virtual Reality Supported]$Virtual Reality サポート$ をオンにし、Windows Mixed Reality SDK が追加されていることを確認します。
3. [Publishing Settings]$公開設定$ タブ内の [Capabilities]$機能$ で、次の内容を確認します。
  - InternetClient
これらの変更を行った後、[ビルド設定] ウィンドウを閉じます。
プロジェクトを [ファイル] [プロジェクトの保存] で保存します。

第 4 章 - InsideOutSphere Unity パッケージのインポート

重要

このコースの "Unity のセットアップ" コンポーネントをスキップして、そのままコードに進みたい場合は、この .unitypackage をダウンロードし、これをカスタムパッケージとしてプロジェクトにインポートした後で第 5 章から続けてください。その場合でも、Unity プロジェクトを作成する必要があります。

このコースでは、InsideOutSphere.unitypackage という Unity アセットパッケージをダウンロードする必要があります。

unitypackage をインポートする方法:

Unity のダッシュボードを表示して、画面上部のメニューにある [アセット] をクリックし、[パッケージのインポート] > [カスタムパッケージ] をクリックします。
ファイルピッカーを使用して InsideOutSphere.unitypackage パッケージを選択し、[開く] をクリックします。このアセットのコンポーネントリストを表示します。 [Import]$インポート$ をクリックしてインポートを確認します。
インポートが完了すると、Assets フォルダーに Materials、Models、Prefabs という 3 つの新しいフォルダーが追加されているのがわかります。このようなフォルダー構造は、Unity プロジェクトの典型的なものです。
1. Models フォルダーを開くと、InsideOutSphere モデルがインポートされているのがわかります。
2. Materials フォルダーには、InsideOutSpheres のマテリアル lambert1 と、後ほどご紹介する GazeButton で使用される ButtonMaterial というマテリアルがあります。
3. Prefabs フォルダーには、InsideOutSphere model と GazeButton の両方が含まれる InsideOutSphere プレハブが含まれています。
4. コードは含まれていないため、このコースに従いコードを記述します。
[階層] で [メインカメラ] オブジェクトを選択し、以下のコンポーネントを更新します。
1. 変換
  1. [位置] = X: 0、Y: 0、Z: 0。
  2. [回転] = X: 0、Y: 0、Z: 0。
  3. [スケール] = X: 1、Y: 1、Z: 1。
2. カメラ
  1. [クリアフラグ]: 単色。
  2. [クリッピングプレーン: Near: 0.1、Far: 6。
Prefab フォルダーに移動し、InsideOutSphere プレハブを [Hierarchy]$ヒエラルキー$ パネルにドラッグします。
階層内の InsideOutSphere オブジェクトの横にある小さな矢印をクリックして展開します。その下には、GazeButton という子オブジェクトがあります。これは、シーンやビデオの変更に使用されます。
[インスペクター] ウィンドウで InsideOutSphere の [変換] コンポーネントをクリックし、以下のプロパティが設定されていることを確認します。

変換 - 位置

X	Y	Z
0	0	0

変換 - 回転

X	Y	Z
0	50-	0

変換 - スケール

X	Y	Z
0	0	0

[内側の外側の球] の [インスペクター] 画面が開いているスクリーンショット。

GazeButton 子オブジェクトをクリックして、その [Transform]$変換$ を以下のように設定します。

変換 - 位置

X	Y	Z
3.6	1.3	0

変換 - 回転

X	Y	Z
0	0	0

変換 - スケール

X	Y	Z
1	1	1

シーンタブが開いているスクリーンショット。

第 5 章 - VideoController クラスを作成する

VideoController クラスは、Azure Media Service からのコンテンツのストリーミングに使用される 2 つのビデオエンドポイントをホストします。

このクラスを作成するには、次の手順を実行します。

[プロジェクト] パネルにある Asset フォルダーを右クリックし、[作成] > [フォルダー] の順にクリックします。フォルダーに「Scripts」という名前を付けます。
Scripts フォルダーをダブルクリックして開きます。
フォルダー内を右クリックし、[作成] > [C# スクリプト] の順にクリックします。スクリプトに VideoController という名前を付けます。
新しい VideoController スクリプトをダブルクリックして、それを Visual Studio 2017 で開きます。

コードファイルの上部にある名前空間を次のように更新します。

using System.Collections;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.Video;

VideoController クラスに以下の変数と、Awake() メソッドを入力します。

    /// <summary> 
    /// Provides Singleton-like behaviour to this class. 
    /// </summary> 
    public static VideoController instance; 

    /// <summary> 
    /// Reference to the Camera VideoPlayer Component.
    /// </summary> 
    private VideoPlayer videoPlayer; 

    /// <summary>
    /// Reference to the Camera AudioSource Component.
    /// </summary> 
    private AudioSource audioSource; 

    /// <summary> 
    /// Reference to the texture used to project the video streaming 
    /// </summary> 
    private RenderTexture videoStreamRenderTexture;

    /// <summary>
    /// Insert here the first video endpoint
    /// </summary>
    private string video1endpoint = "-- Insert video 1 Endpoint here --";

    /// <summary>
    /// Insert here the second video endpoint
    /// </summary>
    private string video2endpoint = "-- Insert video 2 Endpoint here --";

    /// <summary> 
    /// Reference to the Inside-Out Sphere. 
    /// </summary> 
    public GameObject sphere;

    void Awake()
    {
        instance = this;
    }

次に、Azure Media Service ビデオからのエンドポイントを入力します。
1. 最初に video1endpoint 変数に入力します。
2. 次に video2endpoint 変数に入力します。
警告

バージョン 2017.4.1f1 では、Unity 内で https を使用する際に既知の問題があります。ビデオの再生時にエラーが発生する場合は、代わりに "http" を使用してみてください。
次に、Start() メソッドを編集する必要があります。このメソッドは、ユーザーが [視線入力] ボタンを見てシーンを切り替える (結果的にビデオを切り替える) たびにトリガーされます。
```
    // Use this for initialization
    void Start()
    {
        Application.runInBackground = true;
        StartCoroutine(PlayVideo());
    }
```

Start() メソッドの後に、ビデオをシームレスに開始するために使用される PlayVideo() IEnumerator メソッドを挿入します (そのため、スタッターは表示されません)。

    private IEnumerator PlayVideo()
    {
        // create a new render texture to display the video 
        videoStreamRenderTexture = new RenderTexture(2160, 1440, 32, RenderTextureFormat.ARGB32);

        videoStreamRenderTexture.Create();

        // assign the render texture to the object material 
        Material sphereMaterial = sphere.GetComponent<Renderer>().sharedMaterial;

        //create a VideoPlayer component 
        videoPlayer = gameObject.AddComponent<VideoPlayer>();

        // Set the video to loop. 
        videoPlayer.isLooping = true;

        // Set the VideoPlayer component to play the video from the texture 
        videoPlayer.renderMode = VideoRenderMode.RenderTexture;

        videoPlayer.targetTexture = videoStreamRenderTexture;

        // Add AudioSource 
        audioSource = gameObject.AddComponent<AudioSource>();

        // Pause Audio play on Awake 
        audioSource.playOnAwake = true;
        audioSource.Pause();

        // Set Audio Output to AudioSource 
        videoPlayer.audioOutputMode = VideoAudioOutputMode.AudioSource;
        videoPlayer.source = VideoSource.Url;

        // Assign the Audio from Video to AudioSource to be played 
        videoPlayer.EnableAudioTrack(0, true);
        videoPlayer.SetTargetAudioSource(0, audioSource);

        // Assign the video Url depending on the current scene 
        switch (SceneManager.GetActiveScene().name)
        {
            case "VideoScene1":
                videoPlayer.url = video1endpoint;
                break;

            case "VideoScene2":
                videoPlayer.url = video2endpoint;
                break;

            default:
                break;
        }

        //Set video To Play then prepare Audio to prevent Buffering 
        videoPlayer.Prepare();

        while (!videoPlayer.isPrepared)
        {
            yield return null;
        }

        sphereMaterial.mainTexture = videoStreamRenderTexture;

        //Play Video 
        videoPlayer.Play();

        //Play Sound 
        audioSource.Play();

        while (videoPlayer.isPlaying)
        {
            yield return null;
        }
    }

このクラスに必要な最後のメソッドは ChangeScene() メソッドで、これはシーン間の入れ替えに使用されます。
```
    public void ChangeScene()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().name == "VideoScene1" ? "VideoScene2" : "VideoScene1");
    }
```
ヒント

ChangeScene() メソッドでは、"条件演算子" という C# の便利な機能が使用されています。これにより、条件をチェックし、そのチェックの結果に基づいて値を返すことが、すべて 1 つのステートメント内で可能になります。条件演算子の詳細については、こちらのリンクを参照してください。
Unity に戻る前に、Visual Studio で変更を保存します。
Unity Editor に戻り、Scripts フォルダーの VideoController クラスをクリックして、[階層] パネルの [メインカメラ] オブジェクトにドラッグします。
[メインカメラ] をクリックして、[インスペクター] パネルを見てみます。新しく追加された Script コンポーネントの中に、空の値を持つフィールドがあることにお気付きになるでしょう。これは参照フィールドで、コード内のパブリック変数を対象としています。
下図のように、InsideOutSphere オブジェクトを [階層] パネルから Sphere スロットにドラッグします。

第 6 章 - Gaze クラスを作成する

このクラスは、レイキャストの作成を担当します。これは、ユーザーがどのオブジェクトを見ているかを検出するために、メインカメラから前方に投影されます。このケースでは、レイキャストはユーザーがシーン内の GazeButton オブジェクトを見ているかどうかを識別し、動作をトリガーする必要があります。

このクラスを作成するには、次の手順を実行します。

先ほど作成した Scripts フォルダーに移動します。
[プロジェクト] パネルを右クリックし、[C# スクリプトの作成] を選択します。スクリプトに Gaze という名前を付けます。
新しい Gaze スクリプトをダブルクリックして、それを Visual Studio 2017 で開きます。
次の名前空間がスクリプトの先頭にあることを確認し、その他を削除します。
```
using UnityEngine;
```

次に、Gaze クラス内に以下の変数を追加します。

    /// <summary> 
    /// Provides Singleton-like behaviour to this class. 
    /// </summary> 
    public static Gaze instance;

    /// <summary> 
    /// Provides a reference to the object the user is currently looking at. 
    /// </summary> 
    public GameObject FocusedGameObject { get; private set; }

    /// <summary> 
    /// Provides a reference to compare whether the user is still looking at 
    /// the same object (and has not looked away). 
    /// </summary> 
    private GameObject oldFocusedObject = null;

    /// <summary> 
    /// Max Ray Distance 
    /// </summary> 
    float gazeMaxDistance = 300;

    /// <summary> 
    /// Provides whether an object has been successfully hit by the raycast. 
    /// </summary> 
    public bool Hit { get; private set; }

Awake() メソッドと Start() メソッドのコードを追加する必要があります。

    private void Awake()
    {
        // Set this class to behave similar to singleton 
        instance = this;
    }

    void Start()
    {
        FocusedGameObject = null;
    }

Update() メソッドに次のコードを追加して、レイキャストを投影し、ターゲットヒットを検出します。

    void Update()
    {
        // Set the old focused gameobject. 
        oldFocusedObject = FocusedGameObject;
        RaycastHit hitInfo;

        // Initialise Raycasting. 
        Hit = Physics.Raycast(Camera.main.transform.position, Camera.main.transform.forward, out hitInfo, gazeMaxDistance);

        // Check whether raycast has hit. 
        if (Hit == true)
        {
            // Check whether the hit has a collider. 
            if (hitInfo.collider != null)
            {
                // Set the focused object with what the user just looked at. 
                FocusedGameObject = hitInfo.collider.gameObject;
            }
            else
            {
                // Object looked on is not valid, set focused gameobject to null. 
                FocusedGameObject = null;
            }
        }
        else
        {
            // No object looked upon, set focused gameobject to null.
            FocusedGameObject = null;
        }

        // Check whether the previous focused object is this same 
        // object (so to stop spamming of function). 
        if (FocusedGameObject != oldFocusedObject)
        {
            // Compare whether the new Focused Object has the desired tag we set previously. 
            if (FocusedGameObject.CompareTag("GazeButton"))
            {
                FocusedGameObject.SetActive(false);
                VideoController.instance.ChangeScene();
            }
        }
    }

Unity に戻る前に、Visual Studio で変更を保存します。
Scripts フォルダーの Gaze クラスをクリックして、[階層] パネルのメインカメラオブジェクトにドラッグします。

第 7 章 - 2 つの Unity シーンを設定する

この章の目的は、2 つのシーンを設定することです。それぞれがストリーム配信するビデオをホストします。既に作成したシーンを複製して、再度設定する必要がないようにします。ただしその後、新しいシーンを編集して、GazeButton オブジェクトが異なる場所に配置され、異なる外観になるようにします。これは、シーン間がどのように変わるかを示すためです。

これを行うには、[ファイル] > [シーンを保存] の順に選択します。保存ウィンドウが表示されます。 [新しいフォルダー] ボタンをクリックします。
フォルダーの名前を Scenes にします。
[シーンの保存] ウィンドウはそのまま表示されています。新しく作成した Scenes フォルダーを開きます。
[ファイル名:] テキストフィールドに「VideoScene1」と入力し、[保存] を押します。
Unity に戻り、Scenes フォルダーを開き、VideoScene1 ファイルを左クリックします。キーボードで Ctrl + D を押すと、そのシーンが複製されます

ヒント

複製コマンドは、[編集] > [複製] でも実行できます。
Unity によって自動的にシーン名の番号が増やされますが、前に挿入したコードと一致しているかどうかをチェックしてください。

VideoScene1 と VideoScene2 があるはずです。
この 2 つのシーンを確認したら、[ファイル] > [ビルド設定] の順に移動します。 [ビルド設定] ウィンドウが開いている状態で、シーンを [ビルド内のシーン] セクションにドラッグします。

ヒント

Ctrl キーを押しながら、Scenes フォルダーから両方のシーンを選択できます。次にそれぞれのシーンを左クリックして、最後に両方のシーンをドラッグします。
[ビルド設定] ウィンドウを閉じ、VideoScene2 をダブルクリックします。
2 つ目のシーンを開いた状態で、InsideOutSphere の GazeButton 子オブジェクトをクリックし、その [変換] を以下のように設定します。

変換 - 位置

X	Y	Z
0	1.3	3.6

変換 - 回転

X	Y	Z
0	0	0

変換 - スケール

X	Y	Z
1	1	1

GazeButton 子を選択したまま、[インスペクター] と [メッシュフィルター] を見てみます。 [メッシュ] 参照フィールドの横にある小さなターゲットをクリックします。
[Select Mesh]$メッシュの選択$ ポップアップウィンドウが表示されます。 [アセット] のリストから [キューブ] メッシュをダブルクリックします。
[Mesh Filter]$メッシュフィルター$ が更新され、[Cube]$キューブ$ になります。次に、[スフィアコライダー] の横にある歯車のアイコンをクリックし、[コンポーネントの削除] をクリックすると、このオブジェクトからコライダーが削除されます。
GazeButton を選択したまま、[Inspector]$インスペクター$ の下部にある [Add Component]$コンポーネントの追加$ ボタンをクリックします。検索フィールドに box と入力すると、オプションとして Box Collider が表示されるので、これをクリックして、Box Collider を GazeButton オブジェクトに追加します。
GazeButton が部分的に更新されて、外観が変わりましたが、今度は新しいマテリアルを作成していきます。これで、外観がまったく変わり、最初のシーンのオブジェクトとは別のオブジェクトであることがわかりやすくなります。
[プロジェクトパネル] 内の Materials フォルダーに移動します。 ButtonMaterial マテリアルを複製します。これを行うには、キーボードで Ctrl + D を押すか、[マテリアル] を左クリックして、[編集] ファイルメニューオプションから [複製] を選択します。
新しい ButtonMaterial マテリアル (ここでは ButtonMaterial 1) を選択し、[Inspector]$インスペクター$ 内で Albedo カラーウィンドウをクリックします。ポップアップが表示されるので、別の色を選択して (好きなものをお選びください)、ポップアップを閉じます。このマテリアルは、元のものとは異なる独自のインスタンスになります。
新しいマテリアルを GazeButton 子にドラッグして、最初のシーンボタンと見分けがつくように、完全に外観を更新します。
この時点で、UWP プロジェクトをビルドする前に、エディターでプロジェクトをテストすることができます。
- エディターの [再生] ボタンを押し、ヘッドセットを装着します。
2 つの GazeButton オブジェクトを見て、1 つ目と 2 つ目のビデオを切り替えます。

第 8 章 - UWP ソリューションを構築する

エディターにエラーがないことを確認したら、ビルドの準備が整ったことになります。

ビルドするには、

[ファイル] > [保存] の順にクリックして現在のシーンを保存します。
Unity C#プロジェクトというボックスをチェックします（ビルドが完了した後にクラスを編集できるようになるため、これは重要です）。
[ファイル] > [ビルド設定] の順に移動し、[ビルド] をクリックします。
ソリューションをビルドするフォルダーを選択するよう求めるプロンプトが表示されます。
BUILDS フォルダーを作成し、そのフォルダー内にお好みの適切な名前で別のフォルダーを作成します。
新しいフォルダーをクリックし、[Select Folder]$フォルダーの選択$ をクリックして、そのフォルダーを選択すると、その場所でビルドが開始されます。

$[Video Streaming Build]$ビデオストリーミングビルド$ フォルダーが強調表示されているスクリーンショット。$
Unity のビルドが完了すると (これには時間がかかる場合があります)、ビルドの場所にエクスプローラーのウィンドウが開きます。

第 9 章 - ローカルコンピューターへのデプロイ

ビルドが完了すると、ビルドした場所にエクスプローラーのウィンドウが表示されます。名前を付けてビルドしたフォルダーを開き、そのフォルダー内のソリューション (.sln) ファイルをダブルクリックして、Visual Studio 2017 でソリューションを開きます。

あとは、アプリをご自分のコンピューター (つまり "ローカルコンピューター") にデプロイするだけです。

ローカルコンピューターにデプロイするには:

Visual Studio 2017 で、作成したばかりのソリューションファイルを開きます。
ソリューションプラットフォームで、x86、ローカルマシンを選択します。
[ソリューション構成] で、[デバッグ] を選択します。
ここで、ソリューションに含まれるパッケージを復元する必要があります。 [ソリューション] を右クリックして、[ソリューションの NuGet パッケージの復元] をクリックします。

Note

これは、Unity によってビルドされたパッケージが、お使いのローカルコンピューターの参照で動作するようにターゲットにする必要があるためです。
[ビルド] メニューの [ソリューションの配置] をクリックして、アプリケーションをお使いのコンピューターにサイドロードします。 Visual Studio によって、まずアプリケーションがビルドされ、次に配置されます。
ここで、インストールされたアプリのリストにアプリが現れ、起動できる状態になります。

Mixed Reality アプリケーションを実行すると、お客様はアプリ内で使用した InsideOutSphere モデルの中に入ります。この球体にビデオがストリーミングされ、入力ビデオ (このような視点で撮影されたもの) の 360 度のビューが提供されます。ビデオの読み込みに数秒かかっても驚かないでください。お客様のアプリはインターネットの速度に左右されます。ビデオは取得してからダウンロードし、お使いのアプリにストリーミングする必要があるためです。準備ができたら、シーンを変えて、赤い球体を見ながら 2 つ目のビデオを開いてみましょう。そして、2 つ目のシーンでは青いキューブを使用して、自由に戻ることができます。

Azure Media Service アプリケーションが完成しました

おめでとうございます。これで、Azure Media Service を利用して 360 度ビデオをストリーミングする Mixed Reality アプリケーションを構築しました。

Mixed Reality アプリの例のスクリーンショット。

ボーナスの演習

演習 1

このチュートリアルの中で、1 つのシーンだけを使ってビデオを変えることは十分可能です。お客様のアプリケーションで、1 つのシーンにしてみてください。また、別のビデオをミックスに追加することもできます。

演習 2

Azure と Unity を使用して、インターネットの接続強度に応じて、ファイルサイズの異なるビデオを自動的に選択する機能をアプリに実装してみましょう。

次の方法で共有

HoloLens (第 1 世代) と Azure 306 - ビデオのストリーム配信

デバイスサポート

前提条件

開始する前に

第 1 章 - Azure portal: Azure Storage アカウントの作成

第 2 章 - Azure portal: Media Service の作成

第 3 章 - Unity プロジェクトの設定

第 4 章 - InsideOutSphere Unity パッケージのインポート

第 5 章 - VideoController クラスを作成する

第 6 章 - Gaze クラスを作成する

第 7 章 - 2 つの Unity シーンを設定する

第 8 章 - UWP ソリューションを構築する

第 9 章 - ローカルコンピューターへのデプロイ

Azure Media Service アプリケーションが完成しました

ボーナスの演習

フィードバック

その他のリソース

次の方法で共有

HoloLens (第 1 世代) と Azure 306 - ビデオのストリーム配信

デバイス サポート

前提条件

開始する前に

第 1 章 - Azure portal: Azure Storage アカウントの作成

第 2 章 - Azure portal: Media Service の作成

第 3 章 - Unity プロジェクトの設定

第 4 章 - InsideOutSphere Unity パッケージのインポート

第 5 章 - VideoController クラスを作成する

第 6 章 - Gaze クラスを作成する

第 7 章 - 2 つの Unity シーンを設定する

第 8 章 - UWP ソリューションを構築する

第 9 章 - ローカル コンピューターへのデプロイ

Azure Media Service アプリケーションが完成しました

ボーナスの演習

フィードバック

その他のリソース

デバイスサポート

第 9 章 - ローカルコンピューターへのデプロイ