次の方法で共有


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


注:

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 イマーシブ ヘッドセット アプリケーションが用意され、次の操作を行うことができます。

  1. Azure Media Service を使用して、Azure Storage から 360 度のビデオを取得します。

  2. 取得した 360 度のビデオをUnityシーン内に表示します。

  3. 2 つの異なるビデオを使用して、2 つのシーン間を移動します。

アプリケーションでは、結果を設計と統合する方法はユーザー次第です。 このコースは、Azure サービスを Unity プロジェクトと統合する方法を説明するように設計されています。 このコースから得た知識を使用して、Mixed Reality アプリケーションを強化するのがあなたの仕事です。

デバイスのサポート

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

前提条件

注:

このチュートリアルは、Unityと C# に関する基本的な経験を持つ開発者向けに設計されています。 また、このドキュメント内の前提条件と書面による指示は、執筆時点 (2018 年 5 月) にテストおよび検証された内容を表していることにも注意してください。 ツールのインストールに関する記事に記載されている最新のソフトウェアは自由に使用できますが、このコースの情報は、以下に示すソフトウェアよりも新しいソフトウェアで見つかるものと完全に一致するとは想定しないでください。

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

始める前に

  1. このプロジェクトのビルドで問題が発生しないように、このチュートリアルで説明するプロジェクトをルート フォルダーまたはほぼルート フォルダーに作成することを強くお勧めします (長いフォルダー パスがビルド時に問題を引き起こす可能性があります)。

  2. Mixed Realityイマーシブ ヘッドセットを設定してテストします。

    注:

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

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

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

  1. Azure Portal にログインします。

    注:

    Azure アカウントがまだない場合は、アカウントを作成する必要があります。 教室やラボの状況でこのチュートリアルに従っている場合は、講師またはプロクターの 1 人に新しいアカウントの設定に関するヘルプを依頼してください。

  2. ログインしたら、左側のメニューで [ ストレージ アカウント ] をクリックします。

    Azure Portal メニューのスクリーンショット。ストレージ アカウントが強調表示されています。

  3. [ ストレージ アカウント ] タブで、[ 追加] をクリックします。

    [ストレージ アカウント] ダイアログ ボックスのスクリーンショット。[追加] が強調表示されています。

  4. [ ストレージ アカウントの作成 ] タブで、次の手順を実行します。

    1. アカウントの [名前] を挿入します。このフィールドは数字と小文字のみを受け入れることに注意してください。

    2. [デプロイ モデル] で、[リソース マネージャー] を選択します。

    3. [ アカウントの種類] で、[ ストレージ (汎用 v1)] を選択します。

    4. [パフォーマンス] で、[Standard] を選択します*

    5. [ レプリケーション ] で、[ ローカル冗長ストレージ (LRS)] を選択します。

    6. [ 安全な転送が必要][無効] のままにします

    7. サブスクリプションを選択 します

    8. リソース グループを選択するか、新しい リソース グループ を作成します。 リソース グループを使用すると、Azure 資産のコレクションの監視、アクセスの制御、課金のプロビジョニングと管理を行うことができます。

    9. リソース グループの 場所 を決定します (新しいリソース グループを作成する場合)。 この場所は、アプリケーションが実行されるリージョンに理想的です。 一部の Azure 資産は、特定のリージョンでのみ使用できます。

  5. お客様は、本サービスに適用される使用条件を理解していることを確認する必要があります。

    ストレージ アカウントの作成ページのスクリーンショット。

  6. [ 作成] をクリックすると、サービスが作成されるまで待つ必要があります。これには 1 分かかる場合があります。

  7. Service インスタンスが作成されると、ポータルに通知が表示されます。

    デプロイに成功した通知のスクリーンショット。

  8. この時点で、リソースに従う必要はありません。次の章に移動するだけです。

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

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

  1. Azure Portal で、左上隅にある [ リソースの作成 ] をクリックし、 Media Service を検索して Enter キーを押 します。 現在必要なリソースにはピンクのアイコンがあります。これをクリックすると、新しいページが表示されます。

    Azure Portal のスクリーンショット。Media Services オプションが強調表示されています。

  2. 新しいページには、 Media Service の説明が表示されます。 このプロンプトの左下にある [ 作成 ] ボタンをクリックして、このサービスとの関連付けを作成します。

    Azure Portal のスクリーンショット。[作成] ボタンが強調表示されています。

  3. [Create a panel]\ ( パネルの作成\) をクリックすると、新しい Media Service に関する詳細を入力する必要がある場所が表示されます。

    1. このサービス インスタンスの目的の アカウント名 を挿入します。

    2. サブスクリプションを選択 します

    3. リソース グループを選択するか、新しい リソース グループ を作成します。 リソース グループを使用すると、Azure 資産のコレクションの監視、アクセスの制御、課金のプロビジョニングと管理を行うことができます。 1 つのプロジェクト (これらのラボなど) に関連付けられているすべての Azure サービスを共通リソース グループの下に保持することをお勧めします。

    Azure リソース グループの詳細については、Azure リソース グループの 管理方法に関するリンクを参照してください。

    1. リソース グループの 場所 を決定します (新しいリソース グループを作成する場合)。 この場所は、アプリケーションが実行されるリージョンに理想的です。 一部の Azure 資産は、特定のリージョンでのみ使用できます。

    2. [ ストレージ アカウント ] セクションで、[ 選択してください].. セクションをクリックし、最後の章で作成した ストレージ アカウント をクリックします。

    3. また、本サービスに適用される使用条件を理解していることも確認する必要があります。

    4. [作成] をクリックします。

      [メディア サービス アカウントの作成] ページのスクリーンショット。

  4. [ 作成] をクリックすると、サービスが作成されるまで待つ必要があります。これには 1 分かかる場合があります。

  5. Service インスタンスが作成されると、ポータルに通知が表示されます。

    ポータル メニューの通知アイコンのスクリーンショット。

  6. 通知をクリックして、新しいサービス インスタンスを確認します。

    デプロイが成功した場合の通知のスクリーンショット。

  7. 通知の [ リソースに移動 ] ボタンをクリックして、新しいサービス インスタンスを探索します。

  8. 新しい Media サービス ページ内の左側のパネルで、[ Assets ]\(アセット\) リンクをクリックします。このリンクは約半分下にあります。

  9. 次のページで、ページの左上隅にある [ アップロード] をクリックします。

    [資産] ページのスクリーンショット。[アップロード] オプションと [アセット] オプションが強調表示されています。

  10. [フォルダー] アイコンをクリックしてファイルを参照し、ストリーミングする最初の 360 ビデオを選択します。

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

    ビデオアセットのアップロードページのスクリーンショット。

警告

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

  1. ビデオのアップロードが完了すると、進行状況バーが緑色に変わります。

    ビデオアセットのアップロード進行状況バーのスクリーンショット。

  2. 上のテキスト (yourservicename - Assets) をクリックして、[ 資産 ] ページに戻ります。

  3. ビデオが正常にアップロードされていることがわかります。 クリックします。

    [資産] ページのスクリーンショット。ビデオ 1 ドット M P 4 が強調表示されています。

  4. リダイレクト先のページには、ビデオに関する詳細情報が表示されます。 ビデオを使用できるようにするには、ページの左上にある [ エンコード ] ボタンをクリックしてエンコードする必要があります。

    アセット ページのスクリーンショット。エンコード ボタンが強調表示されています。

  5. 右側に新しいパネルが表示され、ファイルのエンコード オプションを設定できます。 次のプロパティを設定します (一部のプロパティは既定で既に設定されます)。

    1. メディア エンコーダー名Media Encoder Standard

    2. エンコード プリセット コンテンツ アダプティブ マルチ ビットレート MP4

    3. ジョブ名Media Encoder Standard Video1.mp4の処理

    4. 出力メディア資産名 Video1.mp4 -- エンコードMedia Encoder Standard

      アセットのエンコード ページのスクリーンショット。

  6. [作成] ボタンをクリックします。

  7. エンコード ジョブが追加されたバーが表示され、そのバーをクリックすると、そのバーにエンコードの進行状況が表示されたパネルが表示されます。

    エンコード ジョブが追加されたというラベルが付いた通知バーのスクリーンショット。

    エンコーダー処理ページのスクリーンショット。

  8. ジョブが完了するまで待ちます。 完了したら、パネルの右上にある 'X' でパネルを閉じてください。

    状態が完了した進行状況バーのスクリーンショット。

    メディア コーダー処理ページの上部メニューのスクリーンショット。

    重要

    この時間は、ビデオのファイル サイズによって異なります。 このプロセスにはかなりの時間がかかる場合があります。

  9. エンコードされたバージョンのビデオが作成されたので、公開してアクセスできるようにします。 これを行うには、青いリンク [ 資産 ] をクリックして [資産] ページに戻ります。

    Azure Portal のスクリーンショット。[assets]\(アセット\) リンクが強調表示されています。

  10. ビデオは、 アセットタイプ マルチビットレートMP4の別のビデオと一緒に表示されます。

    Microsoft Azure アセット メニューのスクリーンショット。

    注:

    最初のビデオと共に新しいアセットが 不明であり、 サイズに対して '0' バイトがあることに気付く場合があります。更新するにはウィンドウを更新するだけです。

  11. この新しいアセットをクリックします。

    資産を一覧表示するディレクトリのスクリーンショット。

  12. 前に使用したパネルと同様のパネルが表示されます。これは別のアセットです。 ページの上部中央にある [ 発行 ] ボタンをクリックします。

    上部のメニュー バーのスクリーンショット。[発行] ボタンが強調表示されています。

  13. エントリ ポイントである ロケーターをアセット内のファイル/秒に設定するように求められます。 シナリオでは、次のプロパティを設定します。

    1. ロケーターの種類>プログレッシブ

    2. 日付時刻は、現在の日付から将来の時刻 (この場合は 100 年) に設定されます。 そのままにするか、それに合わせて変更します。

    注:

    ロケーターと選択できる内容の詳細については、 Azure Media Services のドキュメントを参照してください

  14. そのパネルの下部にある [ 追加 ] ボタンをクリックします。

    [発行する資産] ダイアログを含むディレクトリの一覧を示すスクリーンショット。

  15. これでビデオが公開され、そのエンドポイントを使用してストリーミングできます。 ページの下には、[ ファイル ] セクションがあります。 ここで、ビデオのさまざまなエンコードされたバージョンが表示されます。 可能な限り高い解像度 (下の画像は 1920x960 ファイル) を選択すると、右側のパネルが表示されます。 ダウンロード URL が表示されます。 コードの後半で使用するように、この エンドポイント をコピーします。

    [Microsoft Azure Files] セクションのスクリーンショット。

    資産情報ページのスクリーンショット。

    注:

    [ 再生 ] ボタンを押してビデオを再生し、テストすることもできます。

  16. ここで、このラボで使用する 2 番目のビデオをアップロードする必要があります。 上記の手順に従い、2 番目のビデオで同じプロセスを繰り返します。 2 つ目の エンドポイント もコピーしてください。 次の リンクを使用して、2 つ目のビデオをダウンロードします。

  17. 両方のビデオが公開されたら、次のチャプターに移動する準備が整います。

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

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

  1. Unityを開き、[新規] をクリックします。

    [Unity プロジェクト] タブのスクリーンショット。[新規] ボタンが強調表示されています。

  2. 次に、Unityプロジェクト名を指定し、MR_360VideoStreamingを挿入する必要があります。 プロジェクトの種類が 3D に設定されていることを確認します。 [場所] を適切な場所に設定します (ルート ディレクトリに近い方が適しています)。 次に、[ プロジェクトの作成] をクリックします。

    [新しいプロジェクトのUnity] ページのスクリーンショット。

  3. Unity開いている場合は、既定の [スクリプト] エディターVisual Studio に設定されていることを確認する価値があります。[設定の編集] に移動し、新しいウィンドウから [外部ツール] に移動します。 [外部スクリプト] エディターVisual Studio 2017 に変更します。 [基本設定] ウィンドウを閉じます。

    外部スクリプト エディター メニューのスクリーンショット。Visual Studio 2017 が選択されています。

  4. 次に、[ファイルビルド設定] に移動し、[プラットフォームの切り替え] ボタンをクリックして、プラットフォームをユニバーサル Windows プラットフォーム切り替えます

  5. また、次の点も確認してください。

    1. [ターゲット デバイス] が [ 任意のデバイス] に設定されています。

    2. ビルドの種類D3D に設定されています。

    3. SDK[インストール済みの最新] に設定されています。

    4. Visual Studio のバージョン[最新インストール済み] に設定されています。

    5. [ビルドと実行][ローカル コンピューター] に設定されています。

    6. 後で設定するため、シーン 今すぐ設定する必要はありません。

    7. 残りの設定は、現時点では既定値のままにする必要があります。

      Unityビルド設定画面のスクリーンショット。

  6. [ ビルド設定] ウィンドウで、[ プレイヤーの設定] ボタンをクリックすると、 インスペクター が配置されている領域に関連するパネルが開きます。

  7. このパネルでは、いくつかの設定を確認する必要があります。

    1. [その他の設定] タブで、次 の手順を実行 します。

      1. スクリプト ランタイムバージョン安定している 必要があります (.NET 3.5 同等)。

      2. スクリプト バックエンド.NET にする必要があります。

      3. API 互換性レベル.NET 4.6 にする必要があります。

        [ユニバーサル Windows プラットフォームの設定] ページを示すスクリーンショット。

    2. パネルの下の [XR 設定] ([発行設定] の下にあります) で、[Virtual Reality Supported]\(サポートされている Virtual Reality\) をオンにして、Windows Mixed Reality SDK が追加されていることを確認します。

      Unity X R 設定画面のスクリーンショット。

    3. [発行設定] タブの [機能] で、次チェックします。

      • InternetClient

        [機能] 画面のスクリーンショット。[インターネット クライアント] がオンになっています。

  8. これらの変更を行ったら 、[ビルド設定] ウィンドウを閉じます。

  9. プロジェクト ファイルの保存 プロジェクトを保存します。

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

重要

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

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

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

  1. Unity ダッシュボードが目の前にある状態で、画面上部のメニューで [アセット] をクリックし、[パッケージのインポート] > [カスタム パッケージ] をクリックします。

    アセット メニューのスクリーンショット。[パッケージのインポート] メニューが開いています。[カスタム パッケージ] が選択されています。

  2. ファイル ピッカーを使用して InsideOutSphere.unitypackage パッケージを選択し、[ 開く] をクリックします。 このアセットのコンポーネントの一覧が表示されます。 [インポート] をクリックして インポートを確認します。

    [Unity パッケージのインポート] 画面のスクリーンショット。

  3. インポートが完了すると、 マテリアルモデルプレハブの 3 つの新しいフォルダーが Assets フォルダーに追加されていることがわかります。 この種類のフォルダー構造は、Unity プロジェクトの場合に一般的です。

    assets フォルダーのスクリーンショット。

    1. Models フォルダーを開くと、InsideOutSphere モデルがインポートされていることがわかります。

    2. Materials フォルダー内には、InsideOutSpheres マテリアルランバート 1、GazeButton で使用される ButtonMaterial という名前のマテリアルが表示されます。この素材は、すぐに表示されます。

    3. Prefabs フォルダーには、InsideOutSphereモデルGazeButton の両方を含む InsideOutSphere プレハブが含まれています。

    4. コードは含まれていません。このコースに従ってコードを記述します。

  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。

        インスペクター画面のスクリーンショット。

  5. [プレハブ] フォルダーに移動し、InsideOutSphere プレハブを階層パネルにドラッグします。

    [プレハブ フォルダー] メニューと開発者環境のスクリーンショット。

  6. 階層内InsideOutSphere オブジェクトを展開するには、その横にある小さな矢印をクリックします。 その下に GazeButton という名前の子オブジェクトが表示されます。 これは、シーンやビデオを変更するために使用されます。

    [階層] タブのスクリーンショット。

  7. [インスペクター] ウィンドウで 、InsideOutSphere の [変換] コンポーネントをクリックし、次のプロパティが設定されていることを確認します。

変換 - 位置

X Y Z
0 0 0

変換 - 回転

X Y Z
0 -50 0

変換 - スケール

X Y Z
0 0 0

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

  1. 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 つのビデオ エンドポイントをホストします。

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

  1. プロジェクト パネルにあるアセット フォルダーを右クリックし、[> フォルダーの作成] をクリックします。 [スクリプト] フォルダーに名前 を付けます

    アセット フォルダー メニューのスクリーンショット。[作成] メニューが開き、フォルダーが選択されています。

    プロジェクト タブのスクリーンショット。[Assets] フォルダーが選択されています。

  2. Scripts フォルダーをダブルクリックして開きます。

  3. フォルダー内を右クリックし、[作成] > [C# スクリプト] をクリックします。 スクリプトに VideoController という名前を付けます。

    Video Controller という名前のファイルのスクリーンショット。

  4. 新しい VideoController スクリプトをダブルクリックして 、Visual Studio 2017 で開きます。

    ビデオ コントローラー ファイルのコードのスクリーンショット。

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

    using System.Collections;
    using UnityEngine;
    using UnityEngine.SceneManagement;
    using UnityEngine.Video;
    
  6. 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;
        }
    
  7. 次に、Azure Media Service ビデオからエンドポイントを入力します。

    1. video1endpoint 変数への最初の 。

    2. video2endpoint 変数の 2 つ目。

    警告

    バージョン 2017.4.1f1 では、Unity内で https を使用する場合に既知の問題があります。 ビデオで再生中にエラーが発生する場合は、代わりに 'http' を使用してみてください。

  8. 次に、 Start() メソッドを編集する必要があります。 このメソッドは、ユーザーが視線入力ボタンを見てシーンを切り替える (その結果、ビデオを切り替える) たびにトリガーされます。

        // Use this for initialization
        void Start()
        {
            Application.runInBackground = true;
            StartCoroutine(PlayVideo());
        }
    
  9. 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;
            }
        }
    
  10. このクラスに必要な最後のメソッドは、シーン間のスワップに使用される ChangeScene() メソッドです。

        public void ChangeScene()
        {
            SceneManager.LoadScene(SceneManager.GetActiveScene().name == "VideoScene1" ? "VideoScene2" : "VideoScene1");
        }
    

    ヒント

    ChangeScene() メソッドは、条件付き演算子と呼ばれる便利な C# 機能を使用します。 これにより、条件をチェックし、チェックの結果に基づいて返される値をすべて 1 つのステートメント内で確認できます。 条件付き演算子の詳細については、こちらのリンクを参照してください。

  11. Unityに戻る前に、Visual Studio に変更を保存します。

  12. Unity エディターに戻り、VideoController クラス [from]{.underline} の Scripts フォルダーを階層パネルの Main Camera オブジェクトにクリックしてドラッグします。

  13. メイン カメラをクリックし、[インスペクター] パネルを見ます。 新しく追加された Script コンポーネント内に、空の値を持つフィールドがあることがわかります。 これは参照フィールドであり、コード内のパブリック変数を対象とします。

  14. 次の図に示すように、 InsideOutSphere オブジェクトを 階層パネル から Sphere スロットにドラッグします。

    階層メニューのスクリーンショット。メイン カメラが選択されています。 Sphere スロットのスクリーンショット。

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

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

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

  1. 前に作成した Scripts フォルダーに移動します。

  2. [プロジェクト] パネルの [C# スクリプト作成] を右クリックします。 スクリプトに Gaze という名前を付 けます

  3. 新しい 視線入力 スクリプトをダブルクリックして 、Visual Studio 2017 で開きます。

  4. スクリプトの先頭に次の名前空間があることを確認し、他の名前空間を削除します。

    using UnityEngine;
    
  5. 次に、 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; }
    
  6. Awake() メソッドと Start() メソッドのコードを追加する必要があります。

        private void Awake()
        {
            // Set this class to behave similar to singleton 
            instance = this;
        }
    
        void Start()
        {
            FocusedGameObject = null;
        }
    
  7. 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();
                }
            }
        }
    
  8. Unityに戻る前に、Visual Studio に変更を保存します。

  9. [スクリプト] フォルダーの [視線入力 ] クラスをクリックして、[ 階層 ] パネルの [Main Camera] オブジェクトにドラッグします。

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

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

  1. これを行うには、[ ファイル] > [シーンを名前を付けて保存...] に移動します。保存ウィンドウが表示されます。 [ 新しいフォルダー ] ボタンをクリックします。

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

  2. フォルダーに Scenes という名前を付けます

  3. [ シーンの保存] ウィンドウは引き続き開きます。 新しく作成した Scenes フォルダーを 開きます。

  4. [ ファイル名: テキスト] フィールドに 「VideoScene1」と入力し、[ 保存] を押します

  5. Unityに戻り、Scenes フォルダーを開き、VideoScene1 ファイルを左クリックします。 キーボードを使用し、 Ctrl キーを押しながら D キー を押すと、そのシーンが複製されます

    ヒント

    [複製] コマンドは、[編集] > [複製] に移動して実行することもできます。

  6. Unityはシーン名番号を自動的にインクリメントしますが、チェックして、前に挿入したコードと一致するようにします。

    VideoScene1VideoScene2 が必要です。

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

    [ビルド設定] ウィンドウのスクリーンショット。

    ヒント

    Ctrl ボタンを押しながら各シーンを左クリックして、両方のシーンを Scenes フォルダーから選択し、最後に両方をドラッグできます。

  8. [ビルド設定] ウィンドウを閉じ、VideoScene2 をダブルクリックします。

  9. 2 番目のシーンが開いた状態で、InsideOutSphereGazeButton 子オブジェクトをクリックし、その Transform を次のように設定します。

変換 - 位置

X Y Z
0 1.3 3.6

変換 - 回転

X Y Z
0 0 0

変換 - スケール

X Y Z
1 1 1
  1. GazeButton 子がまだ選択されている状態で、インスペクターメッシュ フィルターを確認します。 メッシュ 参照フィールド の横にある小さなターゲットをクリックします。

    視線入力ボタンのインスペクター画面のスクリーンショット。

  2. [メッシュの選択] ポップアップ ウィンドウが表示されます。 アセットの一覧からキューブ メッシュをダブルクリックします。

    [メッシュの選択] ポップアップ ウィンドウのスクリーンショット。

  3. メッシュ フィルターが更新され、キューブになります。 次に、Sphere コライダーの横にある歯車アイコンをクリックし、[コンポーネントの削除] をクリックして、このオブジェクトからコライダーを削除します。

    [Sphere Collider]\(スフィア コライダー\) メニューのスクリーンショット。[コンポーネントの削除] が選択されています。

  4. GazeButton がまだ選択されている状態で、インスペクターの下部にある [コンポーネントの追加] ボタンをクリックします。 検索フィールドに「box」と入力すると、Box コライダーがオプションになります。これをクリックして、GazeButton オブジェクトに Box コライダーを追加します。

    [コンポーネントの追加] 検索ボックスのスクリーンショット。

  5. GazeButton は部分的に更新され、見た目は異なりますが、新しいマテリアルを作成して、最初のシーンのオブジェクトとは完全に異なる外観になり、別のオブジェクトとして認識しやすくなります。

  6. プロジェクト パネル内の Materials フォルダーに移動します。 ButtonMaterial マテリアルを複製します (キーボードで Ctrl + Dキーを押すか、[マテリアル] を左クリックし、[ファイルの編集] メニュー オプションから [複製] を選択します

    [プロジェクト] タブの [Materials] フォルダーのスクリーンショット。 重複が選択されている編集メニューのスクリーンショット。

  7. 新しい ButtonMaterial マテリアル (ここでは ButtonMaterial 1) を選択し、 インスペクター内で Albedo カラー ウィンドウをクリックします。 ポップアップが表示され、別の色を選択して (好きな色を選択)、ポップアップを閉じます。 マテリアルは独自のインスタンスになり、元のインスタンスとは異なります。

    色選択ポップアップのスクリーンショット。

  8. 新しい マテリアルGazeButton 子にドラッグして、外観を完全に更新し、最初のシーン ボタンと簡単に区別できるようにします。

    プロジェクト エディターの [シーン] タブのスクリーンショット。

  9. この時点で、UWP プロジェクトをビルドする前に、エディターでプロジェクトをテストできます。

    • エディター[再生] ボタンを押し、ヘッドセットを装着します。

      再生、一時停止、スキップボタンを示すスクリーンショット。再生ボタンが強調表示されています。

  10. 2 つの GazeButton オブジェクトを見て、1 番目と 2 番目のビデオを切り替えます。

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

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

ビルドするには:

  1. [ファイル] > [保存] をクリックして、現在のシーンを保存します

  2. [Unity C# プロジェクト] というボックスをオンにします (これは、ビルドが完了した後にクラスを編集できるため重要です)。

  3. [ファイル>ビルド設定] に移動し、[ビルド] をクリックします。

  4. ソリューションをビルドするフォルダーを選択するように求められます。

  5. ビルド フォルダーを作成し、そのフォルダー内に、任意の適切な名前の別のフォルダーを作成します。

  6. 新しいフォルダーをクリックし、[ フォルダーの選択] をクリックして、そのフォルダーを選択して、その場所でビルドを開始します。

    [ビルド] フォルダーが強調表示されているスクリーンショット。 [Video Streaming Build]\(ビデオ ストリーミング ビルド\) フォルダーが強調表示されているスクリーンショット。

  7. ビルドUnity完了すると (時間がかかる場合があります)、ビルドの場所にエクスプローラー ウィンドウが開きます。

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

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

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

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

  1. Visual Studio 2017 で、作成したばかりのソリューション ファイルを開きます。

  2. ソリューション プラットフォームで、x86、ローカル コンピューターを選択します

  3. [ソリューション構成] で [デバッグ] を選択します

    [ソリューション構成] メニューのスクリーンショット。

  4. これで、ソリューションにパッケージを復元する必要があります。 ソリューションを右クリックし、[ソリューションの NuGet パッケージの復元]をクリックします。

    注:

    これは、ビルドUnityパッケージがローカル コンピューター参照を操作するようにターゲットにする必要があるためです。

  5. [ ビルド] メニュー に移動し、[ ソリューションのデプロイ ] をクリックして、アプリケーションをコンピューターにサイドロードします。 Visual Studio では、最初にアプリケーションをビルドしてからデプロイします。

  6. これで、インストールされているアプリの一覧にアプリが表示され、起動する準備が整いました。

    インストールされているアプリの一覧のスクリーンショット。

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

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

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

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

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

ボーナス演習

演習 1

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

演習 2

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