HoloLens (第 1 世代) と Azure 306: ストリーミングビデオ

[アーティクル]
02/18/2025

注:

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: ストリーミングビデオ		✔️

前提条件

注:

このチュートリアルは、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イマーシブヘッドセットを設定してテストします。

注:

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

第 1 章 - Azure Portal: Azure ストレージアカウントの作成

Azure Storage Service を使用するには、Azure portalでストレージアカウントを作成して構成する必要があります。

Azure Portal にログインします。

注:

Azure アカウントがまだない場合は、アカウントを作成する必要があります。教室やラボの状況でこのチュートリアルに従っている場合は、講師またはプロクターの 1 人に新しいアカウントの設定に関するヘルプを依頼してください。
ログインしたら、左側のメニューで [ ストレージアカウント ] をクリックします。
[ ストレージアカウント ] タブで、[ 追加] をクリックします。
[ ストレージアカウントの作成 ] タブで、次の手順を実行します。
1. アカウントの [名前] を挿入します。このフィールドは数字と小文字のみを受け入れることに注意してください。
2. [デプロイモデル] で、[リソースマネージャー] を選択します。
3. [ アカウントの種類] で、[ ストレージ (汎用 v1)] を選択します。
4. [パフォーマンス] で、[Standard] を選択します。*
5. [ レプリケーション ] で、[ ローカル冗長ストレージ (LRS)] を選択します。
6. [ 安全な転送が必要] は [無効] のままにします。
7. サブスクリプションを選択 します。
8. リソースグループを選択するか、新しい リソースグループ を作成します。リソースグループを使用すると、Azure 資産のコレクションの監視、アクセスの制御、課金のプロビジョニングと管理を行うことができます。
9. リソースグループの場所を決定します (新しいリソースグループを作成する場合)。この場所は、アプリケーションが実行されるリージョンに理想的です。一部の Azure 資産は、特定のリージョンでのみ使用できます。
お客様は、本サービスに適用される使用条件を理解していることを確認する必要があります。
[ 作成] をクリックすると、サービスが作成されるまで待つ必要があります。これには 1 分かかる場合があります。
Service インスタンスが作成されると、ポータルに通知が表示されます。
この時点で、リソースに従う必要はありません。次の章に移動するだけです。

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

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

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

このリンクに従って、サンプルビデオをダウンロードできます。

警告

長いファイル名はエンコーダーに問題を引き起こす可能性があります。そのため、ビデオに問題がないことを確認するには、ビデオファイル名の長さを短くすることを検討してください。

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

重要

この時間は、ビデオのファイルサイズによって異なります。このプロセスにはかなりの時間がかかる場合があります。
エンコードされたバージョンのビデオが作成されたので、公開してアクセスできるようにします。これを行うには、青いリンク [ 資産 ] をクリックして [資産] ページに戻ります。

$Azure Portal のスクリーンショット。[assets]$アセット$ リンクが強調表示されています。$
ビデオは、アセットタイプ マルチビットレートMP4の別のビデオと一緒に表示されます。

注:

最初のビデオと共に新しいアセットが不明であり、 サイズに対して '0' バイトがあることに気付く場合があります。更新するにはウィンドウを更新するだけです。
この新しいアセットをクリックします。
前に使用したパネルと同様のパネルが表示されます。これは別のアセットです。ページの上部中央にある [ 発行 ] ボタンをクリックします。
エントリポイントである ロケーターをアセット内のファイル/秒に設定するように求められます。シナリオでは、次のプロパティを設定します。
1. ロケーターの種類>プログレッシブ。
2. 日付と時刻は、現在の日付から将来の時刻 (この場合は 100 年) に設定されます。そのままにするか、それに合わせて変更します。
注:

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

注:

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

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

以下は、Mixed Realityを使用して開発するための一般的な設定であり、他のプロジェクトに適したテンプレートです。

Unityを開き、[新規] をクリックします。
次に、Unityプロジェクト名を指定し、MR_360VideoStreamingを挿入する必要があります。プロジェクトの種類が 3D に設定されていることを確認します。 [場所] を適切な場所に設定します (ルートディレクトリに近い方が適しています)。次に、[ プロジェクトの作成] をクリックします。
Unity開いている場合は、既定の [スクリプト] エディターが Visual Studio に設定されていることを確認する価値があります。[設定の編集] に移動し、新しいウィンドウから [外部ツール] に移動します。 [外部スクリプト] エディターを Visual Studio 2017 に変更します。 [基本設定] ウィンドウを閉じます。
次に、[ファイルビルド設定] に移動し、[プラットフォームの切り替え] ボタンをクリックして、プラットフォームをユニバーサル Windows プラットフォームに切り替えます。
また、次の点も確認してください。
1. [ターゲットデバイス] が [ 任意のデバイス] に設定されています。
2. ビルドの種類が D3D に設定されています。
3. SDK が [インストール済みの最新] に設定されています。
4. Visual Studio のバージョンが [最新インストール済み] に設定されています。
5. [ビルドと実行] が [ローカルコンピューター] に設定されています。
6. 後で設定するため、シーンを今すぐ設定する必要はありません。
7. 残りの設定は、現時点では既定値のままにする必要があります。
[ ビルド設定] ウィンドウで、[ プレイヤーの設定] ボタンをクリックすると、 インスペクター が配置されている領域に関連するパネルが開きます。
このパネルでは、いくつかの設定を確認する必要があります。
1. [その他の設定] タブで、次 の手順を実行 します。
  1. スクリプトランタイムバージョン は 安定している 必要があります (.NET 3.5 同等)。
  2. スクリプトバックエンドは .NET にする必要があります。
  3. API 互換性レベルは .NET 4.6 にする必要があります。
2. パネルの下の [XR 設定] ([発行設定] の下にあります) で、[Virtual Reality Supported]$サポートされている Virtual Reality$ をオンにして、Windows Mixed Reality SDK が追加されていることを確認します。
3. [発行設定] タブの [機能] で、次をチェックします。
  - InternetClient
これらの変更を行ったら 、[ビルド設定] ウィンドウを閉じます。
プロジェクトファイルの保存 プロジェクトを保存します。

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

重要

このコースのUnityセットアップ コンポーネントをスキップしてコードに直接進む場合は、この .unitypackage を自由にダウンロードし、カスタムパッケージとしてプロジェクトにインポートしてから、第 5 章から続行してください。引き続き、Unity プロジェクトを作成する必要があります。

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

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

Unity ダッシュボードが目の前にある状態で、画面上部のメニューで [アセット] をクリックし、[パッケージのインポート] > [カスタムパッケージ] をクリックします。
ファイルピッカーを使用して InsideOutSphere.unitypackage パッケージを選択し、[ 開く] をクリックします。このアセットのコンポーネントの一覧が表示されます。 [インポート] をクリックして インポートを確認します。
インポートが完了すると、 マテリアル、 モデル、 プレハブの 3 つの新しいフォルダーが Assets フォルダーに追加されていることがわかります。この種類のフォルダー構造は、Unity プロジェクトの場合に一般的です。
1. Models フォルダーを開くと、InsideOutSphere モデルがインポートされていることがわかります。
2. Materials フォルダー内には、InsideOutSpheres マテリアルランバート 1 と、GazeButton で使用される ButtonMaterial という名前のマテリアルが表示されます。この素材は、すぐに表示されます。
3. Prefabs フォルダーには、InsideOutSphereモデルと GazeButton の両方を含む InsideOutSphere プレハブが含まれています。
4. コードは含まれていません。このコースに従ってコードを記述します。
Hierarchy 内で Main Camera オブジェクトを選択し、次のコンポーネントを更新します。
1. Transform
  1. Position = X: 0、 Y: 0、 Z: 0。
  2. 回転 = X: 0、 Y: 0、 Z: 0。
  3. スケール X: 1、 Y: 1、 Z: 1。
2. カメラ
  1. クリアフラグ: 単色。
  2. クリッピング平面: ニア: 0.1、ファー: 6。
[プレハブ] フォルダーに移動し、InsideOutSphere プレハブを階層パネルにドラッグします。
階層内の 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 つのビデオエンドポイントをホストします。

このクラスを作成するには:

プロジェクト パネルにあるアセットフォルダーを右クリックし、[> フォルダーの作成] をクリックします。 [スクリプト] フォルダーに名前 を付けます。
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 変数の 2 つ目。
警告

バージョン 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 エディターに戻り、VideoController クラス [from]{.underline} の Scripts フォルダーを階層パネルの Main Camera オブジェクトにクリックしてドラッグします。
メインカメラをクリックし、[インスペクター] パネルを見ます。新しく追加された Script コンポーネント内に、空の値を持つフィールドがあることがわかります。これは参照フィールドであり、コード内のパブリック変数を対象とします。
次の図に示すように、 InsideOutSphere オブジェクトを 階層パネル から Sphere スロットにドラッグします。

第 6 章 - 視線入力クラスを作成する

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

このクラスを作成するには:

前に作成した Scripts フォルダーに移動します。
[プロジェクト] パネルの [C# スクリプトの作成] を右クリックします。スクリプトに 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() メソッドに次のコードを追加して Raycast を投影し、ターゲットヒットを検出します。

    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 に変更を保存します。
[スクリプト] フォルダーの [視線入力 ] クラスをクリックして、[ 階層 ] パネルの [Main Camera] オブジェクトにドラッグします。

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

この章の目的は、それぞれストリーミングするビデオをホストする 2 つのシーンを設定することです。もう一度設定する必要がないように、既に作成したシーンを複製しますが、新しいシーンを編集して、 GazeButton オブジェクトが別の場所にあり、外観が異なるようにします。これは、シーン間で変更する方法を示しています。

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

ヒント

[複製] コマンドは、[編集] > [複製] に移動して実行することもできます。
Unityはシーン名番号を自動的にインクリメントしますが、チェックして、前に挿入したコードと一致するようにします。

VideoScene1 と VideoScene2 が必要です。
2 つのシーンで、[ ファイル > ビルド設定] に移動します。 [ビルド設定] ウィンドウが開いた状態で、シーンを [ビルドのシーン] セクションにドラッグします。

ヒント

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

変換 - 位置

X	Y	Z
0	1.3	3.6

変換 - 回転

X	Y	Z
0	0	0

変換 - スケール

X	Y	Z
1	1	1

GazeButton 子がまだ選択されている状態で、インスペクターとメッシュフィルターを確認します。メッシュ 参照フィールド の横にある小さなターゲットをクリックします。
[メッシュの選択] ポップアップウィンドウが表示されます。 アセットの一覧からキューブ メッシュをダブルクリックします。
メッシュフィルターが更新され、キューブになります。次に、Sphere コライダーの横にある歯車アイコンをクリックし、[コンポーネントの削除] をクリックして、このオブジェクトからコライダーを削除します。

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

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

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

ビルドするには:

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

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

第 9 章 - ローカルコンピューターにデプロイする

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

残っているのは、アプリをコンピューター (または ローカルコンピューター) にデプロイすることだけです。

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

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

注:

これは、ビルドUnityパッケージがローカルコンピューター参照を操作するようにターゲットにする必要があるためです。
[ ビルド] メニュー に移動し、[ ソリューションのデプロイ ] をクリックして、アプリケーションをコンピューターにサイドロードします。 Visual Studio では、最初にアプリケーションをビルドしてからデプロイします。
これで、インストールされているアプリの一覧にアプリが表示され、起動する準備が整いました。

Mixed Reality アプリケーションを実行すると、アプリ内で使用した InsideOutSphere モデル内に配置されます。この球体は、受信ビデオ (この種類のパースペクティブ用に撮影された) の 360 度ビューを提供するビデオがストリーミングされる場所になります。ビデオの読み込みに数秒かかる場合は驚かないでください。ビデオをフェッチしてダウンロードする必要があるため、アプリは利用可能なインターネット速度の影響を受けます。そのため、アプリにストリーミングします。準備ができたら、シーンを変更し、赤い球体を見て、2 番目のビデオを開きます。その後、2番目のシーンで青いキューブを使用して、自由に戻ってください!

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

これで、Azure Media Service を利用して 360 のビデオをストリーミングする Mixed Reality アプリが構築されました。

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

ボーナス演習

演習 1

このチュートリアルでは、1 つのシーンのみを使用してビデオを変更できます。アプリケーションを試して、単一のシーンにしましょう。おそらく、ミックスに別のビデオを追加することもできます。

演習 2

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

次の方法で共有

HoloLens (第 1 世代) と Azure 306: ストリーミングビデオ

デバイスのサポート

前提条件

始める前に

第 1 章 - Azure Portal: Azure ストレージアカウントの作成

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

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

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

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

第 6 章 - 視線入力クラスを作成する

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

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

第 9 章 - ローカルコンピューターにデプロイする

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

ボーナス演習

フィードバック

その他のリソース

次の方法で共有

HoloLens (第 1 世代) と Azure 306: ストリーミング ビデオ

デバイスのサポート

前提条件

始める前に

第 1 章 - Azure Portal: Azure ストレージ アカウントの作成

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

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

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

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

第 6 章 - 視線入力クラスを作成する

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

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

第 9 章 - ローカル コンピューターにデプロイする

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

ボーナス演習

フィードバック

その他のリソース

HoloLens (第 1 世代) と Azure 306: ストリーミングビデオ

第 1 章 - Azure Portal: Azure ストレージアカウントの作成

第 9 章 - ローカルコンピューターにデプロイする