注意

Mixed Reality Academy チュートリアルは、HoloLens (第1世代) と Mixed Reality イマーシブヘッドセットを念頭に置いて設計されています。The Mixed Reality Academy tutorials were designed with HoloLens (1st gen) and Mixed Reality Immersive Headsets in mind. そのため、これらのデバイスの開発に関するガイダンスをまだ探している開発者には、これらのチュートリアルを残しておくことが重要です。As such, we feel it is important to leave these tutorials in place for developers who are still looking for guidance in developing for those devices. これらのチュートリアルは いない 最新のツールセットや相互作用が使用されている HoloLens 2 で更新されます。These tutorials will not be updated with the latest toolsets or interactions being used for HoloLens 2. サポートされているデバイスでの作業を続行するために管理されます。They will be maintained to continue working on the supported devices. 今後、HoloLens 2 向けの開発方法を示す新しい一連のチュートリアルが掲載されています。There will be a new series of tutorials that will be posted in the future that will demonstrate how to develop for HoloLens 2. この通知は、これらのチュートリアルが投稿されたときのリンクと共に更新されます。This notice will be updated with a link to those tutorials when they are posted.


MR と Azure 306:ストリーミングビデオMR and Azure 306: Streaming video

最終的な製品の 開始-開始final product -start final product -start

このコースでは、Azure Media Services を Windows Mixed Reality VR エクスペリエンスに接続して、イマーシブヘッドセットでのストリーミング360度のビデオ再生を許可する方法について説明します。In this course you will learn how connect your Azure Media Services to a Windows Mixed Reality VR experience to allow streaming 360 degree video playback on immersive headsets.

Azure Media Servicesは、今日の最も人気のあるモバイルデバイスで、より多くのユーザーに配信するためのブロードキャスト品質のビデオストリーミングサービスを提供するサービスのコレクションです。Azure Media Services are a collection of services that gives you broadcast-quality video streaming services to reach larger audiences on today’s most popular mobile devices. 詳細については、 Azure Media Services のページを参照してください。For more information, visit the Azure Media Services page.

このコースを完了すると、mixed reality イマーシブヘッドセットアプリケーションが完成します。これにより、次のことができるようになります。Having completed this course, you will have a mixed reality immersive headset application, which will be able to do the following:

  1. Azure Media Serviceを使用して、 Azure Storageから360度のビデオを取得します。Retrieve a 360 degree video from an Azure Storage, through the Azure Media Service.

  2. Unity シーン内で取得した360度ビデオを表示します。Display the retrieved 360 degree video within a Unity scene.

  3. 2つの異なるビデオを使用して、2つのシーン間を移動します。Navigate between two scenes, with two different videos.

アプリケーションでは、結果をデザインと統合する方法については、お客様のニーズに合わせてください。In your application, it is up to you as to how you will integrate the results with your design. このコースは、Azure サービスを Unity プロジェクトと統合する方法を説明することを目的としています。This course is designed to teach you how to integrate an Azure Service with your Unity Project. このコースで得られた知識を使用して、mixed reality アプリケーションを強化することができます。It is your job to use the knowledge you gain from this course to enhance your mixed reality application.

デバイスのサポートDevice support

までCourse HoloLensHoloLens イマーシブ ヘッドセットImmersive headsets
MR と Azure 306:ストリーミングビデオMR and Azure 306: Streaming video ✔️✔️

必須コンポーネントPrerequisites

注意

このチュートリアルは、Unity とC#の基本的な経験を持つ開発者向けに設計されています。This tutorial is designed for developers who have basic experience with Unity and C#. また、このドキュメントに記載されている前提条件と記述に記載されている手順は、作成時にテストおよび検証されたものを表します (2018 年5月)。Please also be aware that the prerequisites and written instructions within this document represent what has been tested and verified at the time of writing (May 2018). 「ツールのインストール」の記事に記載されているように、最新のソフトウェアを自由に使用できます。ただし、このコースの情報は、以下に記載されているものよりも新しいソフトウェアで見つかったものと完全に一致するとは限りません。You are free to use the latest software, as listed within the install the tools article, though it should not be assumed that the information in this course will perfectly match what you'll find in newer software than what's listed below.

このコースでは、次のハードウェアとソフトウェアをお勧めします。We recommend the following hardware and software for this course:

開始前の準備Before you start

  1. このプロジェクトのビルドで問題が発生しないように、このチュートリアルで説明されているプロジェクトをルートまたはほぼルートフォルダーに作成することを強くお勧めします (長いフォルダーパスはビルド時に問題を引き起こす可能性があります)。To avoid encountering issues building this project, it is strongly suggested that you create the project mentioned in this tutorial in a root or near-root folder (long folder paths can cause issues at build-time).

  2. Mixed Reality のイマーシブヘッドセットをセットアップしてテストします。Set up and test your Mixed Reality Immersive Headset.

    注意

    このコースでは、モーションコントローラーは必要ありませんYou will not require Motion Controllers for this course. イマーシブヘッドセットの設定をサポートする必要がある場合は、 Windows Mixed Reality のセットアップ方法に関するリンクをクリックしてください。If you need support setting up the Immersive Headset, please click link on how to set up Windows Mixed Reality.

章 1-Azure Portal: Azure Storage アカウントの作成Chapter 1 - The Azure Portal: creating the Azure Storage Account

Azure Storage サービスを使用するには、Azure portal でストレージアカウントを作成し、構成する必要があります。To use the Azure Storage Service, you will need to create and configure a Storage Account in the Azure portal.

  1. Azure ポータル にログインします。Log in to the Azure Portal.

    注意

    まだ Azure アカウントを持っていない場合は、アカウントを作成する必要があります。If you do not already have an Azure account, you will need to create one. このチュートリアルを教室またはラボの状況で行っている場合は、新しいアカウントの設定について、インストラクターまたはそのいずれかの対処を依頼してください。If you are following this tutorial in a classroom or lab situation, ask your instructor or one of the proctors for help setting up your new account.

  2. ログインしたら、左側のメニューの [ストレージアカウント] をクリックします。Once you are logged in, click on Storage accounts in the left menu.

    Azure Storage アカウントのセットアップ

  3. [ストレージアカウント] タブで、 [追加] をクリックします。On the Storage Accounts tab, click on Add.

    Azure Storage アカウントのセットアップ

  4. [ストレージアカウントの作成] タブで、次のようにします。In the Create storage account tab:

    1. アカウントの名前を挿入します。このフィールドには数字と小文字のみを使用できることに注意してください。Insert a Name for your account, be aware this field only accepts numbers, and lowercase letters.

    2. [デプロイモデル] で、 [リソースマネージャー] を選択します。For Deployment model, select Resource manager.

    3. [アカウントの種類] で、 [ストレージ (汎用 v1)] を選択します。For Account kind, select Storage (general purpose v1).

    4. パフォーマンスStandard*。For Performance, select Standard*.

    5. レプリケーションの場合は 、[ローカル冗長ストレージ (LRS) ] を選択します。For Replication select Locally-redundant storage (LRS).

    6. 安全な転送は無効のまましておく必要があります。Leave Secure transfer required as Disabled.

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

    8. リソースグループを選択するか、新しいリソースグループを作成します。Choose a Resource group or create a new one. リソースグループは、Azure 資産のコレクションの課金を監視、制御する方法を提供します。A resource group provides a way to monitor, control access, provision and manage billing for a collection of Azure assets.

    9. リソースグループの場所を決定します (新しいリソースグループを作成している場合)。Determine the Location for your resource group (if you are creating a new Resource Group). この場所は、アプリケーションを実行するリージョンに配置するのが理想的です。The location would ideally be in the region where the application would run. 一部の Azure 資産は、特定のリージョンでのみ利用できます。Some Azure assets are only available in certain regions.

  5. このサービスに適用されている使用条件を理解していることを確認する必要があります。You will need to confirm that you have understood the Terms and Conditions applied to this Service.

    Azure Storage アカウントのセットアップ

  6. [作成] をクリックした後、サービスが作成されるまで待機する必要があります。これには1分かかることがあります。Once you have clicked on Create, you will have to wait for the service to be created, this might take a minute.

  7. サービスインスタンスが作成されると、ポータルに通知が表示されます。A notification will appear in the portal once the Service instance is created.

    Azure Storage アカウントのセットアップ

  8. この時点で、リソースに従う必要はありません。次の章に移動するだけです。At this point you do not need to follow the resource, simply move to the next Chapter.

章 2-Azure Portal: メディアサービスの作成Chapter 2 - The Azure Portal: creating the Media Service

Azure Media Service を使用するには、アプリケーションで使用できるようにサービスのインスタンスを構成する必要があります (アカウント所有者は管理者である必要があります)。To use the Azure Media Service, you will need to configure an instance of the service to be made available to your application (wherein the account holder needs to be an Admin).

  1. Azure Portal で、左上隅にある [リソースの作成] をクリックし、[メディアサービス] を検索して、 enterキーを押します。In the Azure Portal, click on Create a resource in the top left corner, and search for Media Service, press Enter. 現在必要なリソースにはピンク色のアイコンが付いています。新しいページを表示するには、これをクリックします。The resource you want currently has a pink icon; click this, to show a new page.

    Azure ポータル

  2. 新しいページには、メディアサービスの説明が表示されます。The new page will provide a description of the Media Service. このプロンプトの左下にある [作成] ボタンをクリックして、このサービスとの関連付けを作成します。At the bottom left of this prompt, click the Create button, to create an association with this service.

    Azure ポータル

  3. [作成] をクリックすると、新しいメディアサービスに関する詳細を指定する必要があるパネルが表示されます。Once you have clicked on Create a panel will appear where you need to provide some details about your new Media Service:

    1. このサービスインスタンスに必要なアカウント名を挿入します。Insert your desired Account Name for this service instance.

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

    3. リソースグループを選択するか、新しいリソースグループを作成します。Choose a Resource Group or create a new one. リソースグループは、Azure 資産のコレクションの課金を監視、制御する方法を提供します。A resource group provides a way to monitor, control access, provision and manage billing for a collection of Azure assets. 1つのプロジェクトに関連付けられているすべての Azure サービス (たとえば、これらのラボなど) を共通のリソースグループに保持することをお勧めします。It is recommended to keep all the Azure services associated with a single project (e.g. such as these labs) under a common resource group).

    Azure リソースグループの詳細については、 Azure リソースグループの管理方法に関するこちらのリンク先を参照してください。If you wish to read more about Azure Resource Groups, please follow this link on how to manage Azure Resource Groups.

    1. リソースグループの場所を決定します (新しいリソースグループを作成している場合)。Determine the Location for your resource group (if you are creating a new Resource Group). この場所は、アプリケーションを実行するリージョンに配置するのが理想的です。The location would ideally be in the region where the application would run. 一部の Azure 資産は、特定のリージョンでのみ利用できます。Some Azure assets are only available in certain regions.

    2. [ストレージアカウント] セクションで、 [選択...] セクションをクリックし、最後の章で作成したストレージアカウントをクリックします。For the Storage Account section, click the Please select... section, then click the Storage Account you created in the last Chapter.

    3. また、このサービスに適用されている使用条件を理解していることを確認する必要があります。You will also need to confirm that you have understood the Terms and Conditions applied to this Service.

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

      Azure ポータル

  4. [作成] をクリックした後、サービスが作成されるまで待機する必要があります。これには1分かかることがあります。Once you have clicked on Create, you will have to wait for the service to be created, this might take a minute.

  5. サービスインスタンスが作成されると、ポータルに通知が表示されます。A notification will appear in the portal once the Service instance is created.

    Azure ポータル

  6. 通知をクリックして、新しいサービスインスタンスを探索します。Click on the notification to explore your new Service instance.

    Azure ポータル

  7. 通知の [リソースへのジャンプ] ボタンをクリックして、新しいサービスインスタンスを探索します。Click the Go to resource button in the notification to explore your new Service instance.

  8. 新しいメディアサービス ページで、左側のパネルの Assets リンクをクリックします。Within the new Media service page, within the panel on the left, click on the Assets link, which is about halfway down.

  9. 次のページで、ページの左上隅にある [アップロード] をクリックします。On the next page, in the top-left corner of the page, click Upload.

    Azure ポータル

  10. フォルダーアイコンをクリックしてファイルを参照し、ストリーミングする最初の360ビデオを選択します。Click on the Folder icon to browse your files and select the first 360 Video that you would like to stream.

    このリンクを使用して、サンプルビデオをダウンロードできます。You can follow this link to download a sample video.

    Azure ポータル

警告

ファイル名が長いと、エンコーダーで問題が発生する可能性があります。そのため、ビデオに問題がないことを確認するには、ビデオファイル名の長さを短くすることを検討してください。Long filenames may cause an issue with the encoder: so to ensure videos do not have issues, consider shortening the length of your video file names.

  1. ビデオのアップロードが完了すると、進行状況バーが緑色になります。The progress bar will turn green when the video has finished uploading.

    Azure ポータル

  2. 上のテキスト (servicename-assets) をクリックして、 [資産] ページに戻ります。Click on the text above (yourservicename - Assets) to return to the Assets page.

  3. ビデオが正常にアップロードされたことがわかります。You will notice that your video has been successfully uploaded. それをクリックします。Click on it.

    Azure ポータル

  4. リダイレクト先のページには、ビデオに関する詳細情報が表示されます。The page you are redirected to will show you detailed information about your video. ビデオを使用できるようにするには、ページの左上にある [エンコード] ボタンをクリックして、ビデオをエンコードする必要があります。To be able to use your video you need to encode it, by clicking the Encode button at the top-left of the page.

    Azure ポータル

  5. 新しいパネルが右側に表示されます。ここで、ファイルのエンコードオプションを設定することができます。A new panel will appear to the right, where you will be able to set encoding options for your file. 次のプロパティを設定します (一部は既に既定で設定されています)。Set the following properties (some will be already set by default):

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

    2. エンコードプリセット*コンテンツアダプティブマルチビットレート MP4*Encoding preset Content Adaptive Multiple Bitrate MP4

    3. Video1 のジョブ名 Media Encoder Standard 処理Job name Media Encoder Standard processing of Video1.mp4

    4. 出力メディアアセット名*Video1--エンコードされた Media Encoder Standard*Output media asset name Video1.mp4 -- Media Encoder Standard encoded

      Azure ポータル

  6. [作成] をクリックします。Click the Create button.

  7. エンコードジョブが追加されたバーが表示され、そのバーをクリックすると、エンコードの進行状況を示すパネルが表示されます。You will notice a bar with Encoding job added, click on that bar and a panel will appear with the Encoding progress displayed in it.

    Azure ポータル

    Azure ポータル

  8. ジョブが完了するまで待ちます。Wait for the Job to be completed. 完了したら、パネルの右上にある [X] を自由に閉じます。Once it is done, feel free to close the panel with the 'X' at the top right of that panel.

    Azure ポータル

    Azure ポータル

    重要

    これにかかる時間は、ビデオのファイルサイズによって異なります。The time this takes, depends on the file size of your video. このプロセスにはかなりの時間がかかることがあります。This process can take quite some time.

  9. エンコードされたバージョンのビデオが作成されたので、それを公開してアクセスできるようにします。Now that the encoded version of the video has been created, you can publish it to make it accessible. これを行うには、青いリンクアセットをクリックして [アセット] ページに戻ります。To do so, click the blue link Assets to go back to the assets page.

    Azure ポータル

  10. ビデオは、資産の種類が_マルチビットレート MP4_ である別のものと共に表示されます。You will see your video along with another, which is of Asset Type Multi-Bitrate MP4.

    Azure ポータル

    注意

    最初のビデオと共に新しい資産は不明であり、サイズが ' 0 ' バイトであることがわかります。更新するには、ウィンドウを更新するだけで済みます。You may notice that the new asset, alongside your initial video, is Unknown, and has '0' bytes for it's Size, just refresh your window for it to update.

  11. [この新しい資産] をクリックします。Click this new asset.

    Azure ポータル

  12. 以前に使用したものと似たパネルが表示されますが、これは異なる資産です。You will see a similar panel to the one you used before, just this is a different asset. ページの上部中央にある [発行] ボタンをクリックします。Click the Publish button located at the top-center of the page.

    Azure ポータル

  13. 資産内の file/s へのロケーター(エントリポイント) を設定するように求められます。You will be prompted to set a Locator, which is the entry point, to file/s in your Assets. シナリオでは、次のプロパティを設定します。For your scenario set the following properties:

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

    2. 日付時刻は、現在の日付から将来の時刻 (この場合は100年) に設定されます。The date and time will be set for you, from your current date, to a time in the future (one hundred years in this case). そのままにするか、またはそれに合わせて変更します。Leave as is or change it to suit.

    注意

    ロケーターの詳細および選択できる内容については、Azure Media Services のドキュメントを参照してください。For more information about Locators, and what you can choose, visit the Azure Media Services Documentation.

  14. パネルの下部にある [追加] ボタンをクリックします。At the bottom of that panel, click on the Add button.

    Azure ポータル

  15. ビデオが公開され、エンドポイントを使用してストリームできるようになりました。Your video is now published and can be streamed by using its endpoint. さらに下のページはファイルセクションです。Further down the page is a Files section. ここでは、ビデオのエンコードされたさまざまなバージョンを示します。This is where the different encoded versions of your video will be. 可能な限り最高の解像度を選択すると (下の図の1920x960 ファイル)、右側のパネルが表示されます。Select the highest possible resolution one (in the image below it is the 1920x960 file), and then a panel to the right will appear. ダウンロード URLが表示されます。There you will find a Download URL. このエンドポイントは、後でコードで使用するのと同じようにコピーします。Copy this Endpoint as you will use it later in your code.

    Azure ポータル

    Azure ポータル

    注意

    [再生] ボタンをクリックしてビデオを再生し、テストすることもできます。You can also press the Play button to play your video and test it.

  16. ここでは、このラボで使用する2番目のビデオをアップロードする必要があります。You now need to upload the second video that you will use in this Lab. 上記の手順に従って、2番目のビデオと同じ手順を繰り返します。Follow the steps above, repeating the same process for the second video. 2番目のエンドポイントもコピーするようにしてください。Ensure you copy the second Endpoint also. 2 番目のビデオをダウンロードするには、次のリンクを使用してください。Use the following link to download a second video.

  17. 両方のビデオが公開されたら、次の章に進むことができます。Once both videos have been published, you are ready to move to the next Chapter.

章 3-Unity プロジェクトの設定Chapter 3 - Setting up the Unity Project

次に示すのは、Mixed Reality で開発するための一般的な設定です。そのため、他のプロジェクトに適したテンプレートです。The following is a typical set up for developing with the Mixed Reality, and as such, is a good template for other projects.

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

    Azure ポータル

  2. ここで、Unity プロジェクト名を指定する必要があります。挿入MR_360videostreaming.You will now need to provide a Unity Project name, insert MR_360VideoStreaming.. プロジェクトの種類が3dに設定されていることを確認します。Make sure the project type is set to 3D. 場所を適切な場所に設定します (ルートディレクトリの方が適していることに注意してください)。Set the Location to somewhere appropriate for you (remember, closer to root directories is better). 次に、 [プロジェクトの作成] をクリックします。Then, click Create project.

    Azure ポータル

  3. Unity を開いている場合は、[既定のスクリプトエディター ] がVisual Studioに設定されていることを確認する必要があります。With Unity open, it is worth checking the default Script Editor is set to Visual Studio. [ *設定*の編集] に移動し、新しいウィンドウで [外部ツール] に移動します。Go to Edit Preferences and then from the new window, navigate to External Tools. 変更 External Script EditorVisual Studio 2017 します。Change External Script Editor to Visual Studio 2017. [基本設定] ウィンドウを閉じます。Close the Preferences window.

    Azure ポータル

  4. 次に、 ファイル ビルドの設定 の順に移動し、プラットフォームの切り替え ボタンをクリックして、プラットフォームをユニバーサル Windows プラットフォームに切り替えます。Next, go to File Build Settings and switch the platform to Universal Windows Platform, by clicking on the Switch Platform button.

  5. また、次のことを確認してください。Also make sure that:

    1. ターゲットデバイス、任意のデバイスに設定されます。Target Device is set to Any Device.

    2. ビルドの種類が D3D に設定されています。Build Type is set to D3D.

    3. SDKは、インストールされている最新のバージョンに設定されます。SDK is set to Latest installed.

    4. Visual Studio のバージョンが、インストールされている最新のバージョンに設定されています。Visual Studio Version is set to Latest installed.

    5. ビルドと実行はローカルコンピューターに設定されています。Build and Run is set to Local Machine.

    6. 後で設定するため、今すぐ設定することは心配しないでください。Do not worry about setting up Scenes right now, as you will set these up later.

    7. ここでは、残りの設定は既定値のままにしておきます。The remaining settings should be left as default for now.

      Unity プロジェクトの設定

  6. [ビルドの設定] ウィンドウで、 [プレーヤーの設定] ボタンをクリックします。これにより、インスペクターが配置されている領域の関連パネルが開きます。In the Build Settings window, click on the Player Settings button, this will open the related panel in the space where the Inspector is located.

  7. このパネルでは、いくつかの設定を確認する必要があります。In this panel, a few settings need to be verified:

    1. [その他の設定] タブで、次のようにします。In the Other Settings tab:

      1. スクリプト ランタイムのバージョン安定している必要があります (.net 3.5 と同等)。Scripting Runtime Version should be Stable (.NET 3.5 Equivalent).

      2. スクリプトバックエンドは .net である必要があります。Scripting Backend should be .NET.

      3. API の互換性レベル.net 4.6である必要があります。API Compatibility Level should be .NET 4.6.

        Unity プロジェクトの設定

    2. パネルの下にある [ XR settings (発行の設定] の下にあります) で、 [サポートされている仮想現実] をティックし、 Windows Mixed reality SDKが追加されていることを確認します。Further down the panel, in XR Settings (found below Publish Settings), tick Virtual Reality Supported, make sure the Windows Mixed Reality SDK is added.

      Unity プロジェクトの設定

    3. [発行の設定] タブの [機能] で、次の項目を確認します。Within the Publishing Settings tab, under Capabilities, check:

      • InternetClientInternetClient

        Unity プロジェクトの設定

  8. これらの変更を行った場合、閉じる、 Build Settingsウィンドウ。Once you have made those changes, close the Build Settings window.

  9. プロジェクトを保存 *ファイル ***プロジェクトを保存します。Save your Project *File *Save Project**.

Chapter 4-InsideOutSphere Unity パッケージのインポートChapter 4 - Importing the InsideOutSphere Unity package

重要

このコースのUnity セットアップコンポーネントをスキップしてコードに直接進む場合は、 unitypackageをダウンロードし、カスタムパッケージとしてプロジェクトにインポートしてから、第5章から続行してください。If you wish to skip the Unity Set up component of this course, and continue straight into code, feel free to download this .unitypackage, import it into your project as a Custom Package, and then continue from Chapter 5. 引き続き Unity プロジェクトを作成する必要があります。You will still need to create a Unity Project.

このコースでは、 unitypackageという名前の Unity アセットパッケージをダウンロードする必要があります。For this course you will need to download a Unity Asset Package called InsideOutSphere.unitypackage.

Unitypackageをインポートする方法:How-to import the unitypackage:

  1. Unity ダッシュボードを使用して、画面の上部にあるメニューの [アセット] をクリックし、 [パッケージのインポート > カスタムパッケージ] をクリックします。With the Unity dashboard in front of you, click on Assets in the menu at the top of the screen, then click on Import Package > Custom Package.

    InsideOutSphere Unity パッケージをインポートしています

  2. ファイルピッカーを使用してInsideoutsphereパッケージを選択し、 [開く] をクリックします。Use the file picker to select the InsideOutSphere.unitypackage package and click Open. この資産のコンポーネントの一覧が表示されます。A list of components for this asset will be displayed to you. インポートを確認するには、 [インポート] をクリックします。Confirm the import by clicking Import.

    InsideOutSphere Unity パッケージをインポートしています

  3. インポートが完了すると、3つの新しいフォルダー、素材モデル、およびPrefabsAssetsフォルダーに追加されていることがわかります。Once it has finished importing, you will notice three new folders, Materials, Models, and Prefabs, have been added to your Assets folder. この種のフォルダー構造は、Unity プロジェクトで一般的に使用されます。This kind of folder structure is typical for a Unity project.

    InsideOutSphere Unity パッケージをインポートしています

    1. [モデル] フォルダーを開くと、 Insideoutsphereモデルがインポートされていることがわかります。Open the Models folder, and you will see that the InsideOutSphere model has been imported.

    2. 素材フォルダー内には、 Insideoutspheresマテリアルlambert1と、GazeButton によって使用されるbuttonmaterialと呼ばれる素材があります。これは近日中に表示されます。Within the Materials folder you will find the InsideOutSpheres material lambert1, along with a material called ButtonMaterial, which is used by the GazeButton, which you will see soon.

    3. Prefabsフォルダーには、 insideoutsphere モデルGazeButtonの両方を含むinsideoutsphere prefab が含まれています。The Prefabs folder contains the InsideOutSphere prefab which contains both the InsideOutSphere model and the GazeButton.

    4. コードは含まれていません。このコースに従ってコードを記述します。No code is included, you will write the code by following this course.

  4. 階層内で、メインカメラオブジェクトを選択し、次のコンポーネントを更新します。Within the Hierarchy, select the Main Camera object, and update the following components:

    1. 変換Transform

      1. Position = X:0、 Y:0、 Z:0。Position = X: 0, Y: 0, Z: 0.

      2. 回転 = X:0、 Y:0、 Z:0。Rotation = X: 0, Y: 0, Z: 0.

      3. Xスケール:1, Y:1, Z:1.Scale X: 1, Y: 1, Z: 1.

    2. カメラCamera

      1. フラグのクリア:純色。Clear Flags: Solid Color.

      2. 平面のクリッピング:部0.1、Far:6。Clipping Planes: Near: 0.1, Far: 6.

        InsideOutSphere Unity パッケージをインポートしています

  5. Prefabフォルダーに移動し、 [Insideoutsphere][階層] パネルにドラッグします。Navigate to the Prefab folder, and then drag the InsideOutSphere prefab into the Hierarchy Panel.

    InsideOutSphere Unity パッケージをインポートしています

  6. 階層内のInsideoutsphereオブジェクトの横にある小さな矢印をクリックして展開します。Expand the InsideOutSphere object within the Hierarchy by clicking the little arrow next to it. GazeButtonという名前のオブジェクトがその下に表示されます。You will see a child object beneath it called GazeButton. これは、シーンとビデオを変更するために使用されます。This will be used to change scenes and thus videos.

    InsideOutSphere Unity パッケージをインポートしています

  7. [インスペクター] ウィンドウで、 Insideoutsphereの変換コンポーネントをクリックし、次のプロパティが設定されていることを確認します。In the Inspector Window click on the InsideOutSphere's Transform component, ensure that the following properties are set:

    変換-位置TRANSFORM - POSITION
    X 0X 0 Y 0Y 0 Z 0Z 0
    変換-回転TRANSFORM - ROTATION
    X 0X 0 Y -50Y -50 Z 0Z 0
    変換-スケールTRANSFORM - SCALE
    X 1X 1 Y 1Y 1 Z 1Z 1

    InsideOutSphere Unity パッケージをインポートしています

  8. GazeButton子オブジェクトをクリックし、その変換を次のように設定します。Click on the GazeButton child object, and set its Transform as follows:

    変換-位置TRANSFORM - POSITION
    X 3.6X 3.6 Y 1.3Y 1.3 Z 0Z 0
    変換-回転TRANSFORM - ROTATION
    X 0X 0 Y 0Y 0 Z 0Z 0
    変換-スケールTRANSFORM - SCALE
    X 1X 1 Y 1Y 1 Z 1Z 1

    InsideOutSphere Unity パッケージをインポートしています

第5章-VideoController クラスの作成Chapter 5 - Create the VideoController class

Videocontrollerクラスは、Azure Media Service からコンテンツをストリーミングするために使用される2つのビデオエンドポイントをホストします。The VideoController class hosts the two video endpoints that will be used to stream the content from the Azure Media Service.

このクラスを作成するには:To create this class:

  1. [プロジェクト] パネルにあるAsset フォルダーを右クリックし、 [> フォルダーの作成] をクリックします。Right-click in the Asset Folder, located in the Project Panel, and click Create > Folder. フォルダーにスクリプトの名前を指定します。Name the folder Scripts.

    VideoController クラスを作成する

    VideoController クラスを作成する

  2. [Scripts] フォルダーをダブルクリックして開きます。Double click on the Scripts folder to open it.

  3. フォルダー内を右クリックし、[ Create > C# Script] をクリックします。Right-click inside the folder, then click Create > C# Script. スクリプトに「 Videocontroller」という名前を指定します。Name the script VideoController.

    VideoController クラスを作成する

  4. 新しいVideocontrollerスクリプトをダブルクリックして、 Visual Studio 2017 で開きます。Double click on the new VideoController script to open it with Visual Studio 2017.

    VideoController クラスを作成する

  5. コードファイルの先頭にある名前空間を次のように更新します。Update the namespaces at the top of the code file as follows:

    using System.Collections;
    using UnityEngine;
    using UnityEngine.SceneManagement;
    using UnityEngine.Video;
    
  6. Videocontrollerクラスに次の変数を、起動前 () メソッドと共に入力します。Enter the following variables in the VideoController class, along with the Awake() method:

        /// <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 のビデオからエンドポイントを入力する時間は次のようになります。Now is the time to enter the endpoints from your Azure Media Service videos:

    1. 最初のをvideo1endpoint変数に挿入します。The first into the video1endpoint variable.

    2. 2番目のをvideo2endpoint変数に挿入します。The second into the video2endpoint variable.

    警告

    Unity でのhttpsの使用に関する既知の問題があります。バージョン 2017.4.1 f1 を使用します。There is a known issue with using https within Unity, with version 2017.4.1f1. ビデオの再生時にエラーが発生した場合は、代わりに ' http ' を使用してみてください。If the videos provide an error on play, try using 'http' instead.

  8. 次に、 Start () メソッドを編集する必要があります。Next, the Start() method needs to be edited. このメソッドは、ユーザーが宝石ボタンを見てシーンを切り替えるたびにトリガーされます (その結果、ビデオが切り替わります)。This method will be triggered every time the user switches scene (consequently switching the video) by looking at the Gaze Button.

        // Use this for initialization
        void Start()
        {
            Application.runInBackground = true;
            StartCoroutine(PlayVideo());
        }
    
  9. Start () メソッドの後に、 playvideo () IEnumeratorメソッドを挿入します。これは、ビデオをシームレスに開始するために使用されます (そのため、動きが見られません)。Following the Start() method, insert the PlayVideo() IEnumerator method, which will be used to start videos seamlessly (so no stutter is seen).

        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. このクラスに必要な最後のメソッドは、 "設定の切り替え" メソッドです。このメソッドは、シーンの入れ替えに使用されます。The last method you need for this class is the ChangeScene() method, which will be used to swap between scenes.

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

    ヒント

    このメソッドは、条件演算子と呼ばれる便利な# C 機能を使用します。The ChangeScene() method uses a handy C# feature called the Conditional Operator. これにより、条件を確認してから、チェックの結果に基づいて値が返されます。すべて1つのステートメント内になります。This allows for conditions to be checked, and then values returned based on the outcome of the check, all within a single statement. 条件演算子の詳細については、こちらのリンクを参照してください。Follow this link to learn more about Conditional Operator.

  11. Unity に戻る前に、変更を Visual Studio に保存します。Save your changes in Visual Studio before returning to Unity.

  12. Unity エディターに戻り、 Videocontrollerクラス [from] {. アンダーライン} Scriptsフォルダーを、 [階層] パネルのメインカメラオブジェクトにドラッグします。Back in the Unity Editor, click and drag the VideoController class [from]{.underline} the Scripts folder to the Main Camera object in the Hierarchy Panel.

  13. メインカメラをクリックし、[インスペクター] パネルを確認します。Click on the Main Camera and look at the Inspector Panel. 新しく追加されたスクリプトコンポーネント内に、空の値を持つフィールドがあることがわかります。You will notice that within the newly added Script component, there is a field with an empty value. これは参照フィールドで、コード内のパブリック変数を対象とします。This is a reference field, which targets the public variables within your code.

  14. 次の図に示すように、[階層] パネル[Insideoutsphere] オブジェクトを [球体] スロットにドラッグします。Drag the InsideOutSphere object from the Hierarchy Panel to the Sphere slot, as shown in the image below.

    Videocontroller クラス を作成する videocontroller クラスを作成するCreate the VideoController class Create the VideoController class

Chapter 6-"宝石" クラスを作成するChapter 6 - Create the Gaze class

このクラスは、ユーザーがどのオブジェクトを調べているかを検出するために、メインカメラから投影されるRaycastを作成します。This class is responsible for creating a Raycast that will beprojected forward from the Main Camera, to detect which object the user is looking at. この場合、 Raycastは、ユーザーがシーン内のGazeButtonオブジェクトを調べて動作をトリガーするかどうかを識別する必要があります。In this case, the Raycast will need to identify if the user is looking at the GazeButton object in the scene and trigger a behavior.

このクラスを作成するには:To create this Class:

  1. 前に作成したScriptsフォルダーにアクセスします。Go to the Scripts folder you created previously.

  2. 右クリックし、プロジェクトパネルで、作成 C#スクリプト**。Right-click in the Project Panel, *Create *C# Script**. スクリプトに「」という名前を指定します。Name the script Gaze.

  3. 新しい宝石のスクリプトをダブルクリックして、 Visual Studio 2017 で開きます。Double click on the new Gaze script to open it with Visual Studio 2017.

  4. 次の名前空間がスクリプトの先頭にあることを確認し、その他の名前空間を削除します。Ensure the following namespace is at the top of the script, and remove any others:

    using UnityEngine;
    
  5. 次に、次の変数を、宝石クラス内に追加します。Then add the following variables inside the Gaze class:

        /// <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. 起動可能な () メソッドとStart () メソッドのコードを追加する必要があります。Code for the Awake() and Start() methods now needs to be added.

        private void Awake()
        {
            // Set this class to behave similar to singleton 
            instance = this;
        }
    
        void Start()
        {
            FocusedGameObject = null;
        }
    
  7. Update () メソッドに次のコードを追加して、Raycast を射影し、ターゲットのヒットを検出します。Add the following code in the Update() method to project a Raycast and detect the target hit:

        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 に保存します。Save your changes in Visual Studio before returning to Unity.

  9. スクリプト] フォルダーから、 [階層] パネルの [メインカメラ オブジェクトに、見つめクラスをクリックしてドラッグします。Click and drag the Gaze class from the Scripts folder to the Main Camera object in the Hierarchy Panel.

第7章-Unity の2つのシーンの設定Chapter 7 - Setup the two Unity Scenes

この章の目的は、ストリーミングするビデオをそれぞれホストする2つのシーンを設定することです。The purpose of this Chapter is to setup the two scenes, each hosting a video to stream. 作成済みのシーンを複製して、もう一度設定する必要がないようにします。ただし、 GazeButtonオブジェクトが別の場所にあり、外観が異なるように、新しいシーンを編集します。You will duplicate the scene you have already created, so that you do not need to set it up again, though you will then edit the new scene, so that the GazeButton object is in a different location and has a different appearance. これは、シーン間で変更する方法を示すためのものです。This is to show how to change between scenes.

  1. これを行うには、ファイルに移動して、シーンに名前を付けて保存... > します。保存ウィンドウが表示されます。Do this by going to File > Save Scene as.... A save window will appear. [新しいフォルダー] ボタンをクリックします。Click the New folder button.

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

  2. フォルダーの名前を「シーン」にします。Name the folder Scenes.

  3. [シーンの保存] ウィンドウは開いたままです。The Save Scene window will still be open. 新しく作成したシーンフォルダーを開きます。Open your newly created Scenes folder.

  4. [ファイル名:] テキスト フィールドに「 VideoScene1」と入力し、 [保存] をクリックします。In the File name: text field, type VideoScene1, then press Save.

  5. Unity に戻り、 [シーン] フォルダーを開き、 VideoScene1ファイルを左クリックします。Back in Unity, open your Scenes folder, and left-click your VideoScene1 file. キーボードを使用して Ctrl キーを押しながら Dキーを押すと、そのシーンが複製されます。Use your keyboard, and press Ctrl + D you will duplicate that scene

    ヒント

    重複するコマンドは、 [編集 > 複製] に移動して実行することもできます。The Duplicate command can also be performed by navigating to Edit > Duplicate.

  6. Unity では、シーン名の番号が自動的にインクリメントされますが、それが前に挿入されたコードと一致することを確認してください。Unity will automatically increment the scene names number, but check it anyway, to ensure it matches the previously inserted code.

    VideoScene1VideoScene2が必要です。You should have VideoScene1 and VideoScene2.

  7. 2つのシーンを使用して、 [ファイル > ビルド設定] にアクセスします。With your two scenes, go to File > Build Settings. ビルドの設定 ウィンドウを開いた状態で、ビルド セクションのシーンにシーンをドラッグします。With the Build Settings window open, drag your scenes to the Scenes in Build section.

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

    ヒント

    シーンフォルダーから両方のシーンを選択するには、 Ctrlボタンを押しながら各シーンを左クリックし、最後に両方をドラッグします。You can select both of your scenes from your Scenes folder through holding the Ctrl button, and then left-clicking each scene, and finally drag both across.

  8. [ビルドの設定] ウィンドウを閉じ、 [VideoScene2] をダブルクリックします。Close the Build Settings window, and double click on VideoScene2.

  9. 2番目のシーンを開いた状態で、 InsideoutsphereGazeButton子オブジェクトをクリックし、その変換を次のように設定します。With the second scene open, click on the GazeButton child object of the InsideOutSphere, and set its Transform as follows:

    変換-位置TRANSFORM - POSITION
    X 0X 0 Y 1.3Y 1.3 Z 3.6Z 3.6
    変換-回転TRANSFORM - ROTATION
    X 0X 0 Y 0Y 0 Z 0Z 0
    変換-スケールTRANSFORM - SCALE
    X 1X 1 Y 1Y 1 Z 1Z 1
  10. GazeButton子が選択された状態で、インスペクターメッシュフィルターを確認します。With the GazeButton child still selected, look at the Inspector and at the Mesh Filter. [メッシュ参照] フィールドの横にある小さなターゲットをクリックします。Click the little target next to the Mesh reference field:

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

  11. [メッシュの選択] ポップアップウィンドウが表示されます。A Select Mesh popup window will appear. アセットの一覧からキューブメッシュをダブルクリックします。Double click the Cube mesh from the list of Assets.

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

  12. メッシュフィルターが更新され、現在はキューブになります。The Mesh Filter will update, and now be a Cube. ここで、 [球 Collider] の横にある歯車アイコンをクリックし、 [コンポーネントの削除] をクリックして、このオブジェクトから Collider を削除します。Now, click the Gear icon next to Sphere Collider and click Remove Component, to delete the collider from this object.

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

  13. GazeButtonを選択したまま、インスペクターの下部にある [コンポーネントの追加] ボタンをクリックします。With the GazeButton still selected, click the Add Component button at the bottom of the Inspector. 検索フィールドに「 box」と入力します。 box colliderがオプションになります。これをクリックすると、 box colliderGazeButtonオブジェクトに追加されます。In the search field, type box, and Box Collider will be an option -- click that, to add a Box Collider to your GazeButton object.

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

  14. GazeButtonが部分的に更新されるようになりました。別の外観になるように、新しい素材を作成します。これにより、最初のシーンのオブジェクトとは異なるオブジェクトとして認識しやすくなります。The GazeButton is now partially updated, to look different, however, you will now create a new Material, so that it looks completely different, and is easier to recognize as a different object, than the object in the first scene.

  15. [プロジェクト] パネル内の [素材] フォルダーに移動します。Navigate to your Materials folder, within the Project Panel. Buttonmaterialマテリアルを複製します (キーボードのCtrl + Dキーを押すか、素材を左クリックし、ファイルの [編集] メニューオプションから [複製] を選択します)。Duplicate the ButtonMaterial Material (press Ctrl + D on the keyboard, or left-click the Material, then from the Edit file menu option, select Duplicate).

    第7章--2 つの unity シーンのセットアップ第7章: 2 つの unity シーンの設定Chapter 7 -- Setup the two Unity Scenes Chapter 7 -- Setup the two Unity Scenes

  16. 新しいbuttonmaterialマテリアル (ここではbuttonmaterial 1という名前) を選択し、インスペクター内で [ albedo色] ウィンドウをクリックします。Select the new ButtonMaterial Material (here named ButtonMaterial 1), and within the Inspector, click the Albedo color window. ポップアップが表示されます。ここで別の色を選択し (任意のものを選択)、ポップアップを閉じます。A popup will appear, where you can select another color (choose whichever you like), then close the popup. 素材は独自のインスタンスであり、元のインスタンスとは異なります。The Material will be its own instance, and different to the original.

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

  17. 新しい素材GazeButton子にドラッグして、その外観を完全に更新します。これにより、最初のシーンボタンから簡単に識別できるようになります。Drag the new Material onto the GazeButton child, to now completely update its look, so that it is easily distinguishable from the first scenes button.

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

  18. この時点で、UWP プロジェクトをビルドする前に、エディターでプロジェクトをテストすることができます。At this point you can test the project in the Editor before building the UWP project.

    • エディター[再生] ボタンを押して、ヘッドセットを磨耗します。Press the Play button in the Editor and wear your headset.

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

  19. 2つのGazeButtonオブジェクトを見て、1番目と2番目のビデオを切り替えます。Look at the two GazeButton objects to switch between the first and second video.

章 8-UWP ソリューションのビルドChapter 8 - Build the UWP Solution

エディターにエラーがないことを確認したら、ビルドすることができます。Once you have ensured that the editor has no errors, you are ready to Build.

ビルドするには:To Build:

  1. [ファイル > 保存] をクリックして、現在のシーンを保存します。Save the current scene by clicking on File > Save.

  2. # Unity C プロジェクトと呼ばれるチェックボックスをオンにします (ビルドの完了後にクラスを編集できるため、これは重要です)。Check the box called Unity C# Projects (this is important because it will allow you to edit the classes after build is completed).

  3. [ファイル > ビルド設定] にアクセスし、 [ビルド] をクリックします。Go to File > Build Settings, click on Build.

  4. ソリューションを構築するフォルダーを選択するように求められます。You will be prompted to select the folder where you want to buildthe Solution.

  5. ビルドフォルダーを作成し、そのフォルダー内で、適切な名前を指定して別のフォルダーを作成します。Create a BUILDS folder and within that folder create another folder with an appropriate name of your choice.

  6. 新しいフォルダーをクリックし、 [フォルダーの選択] をクリックします。そのフォルダーを選択して、その場所でビルドを開始します。Click your new folder and then click Select Folder, so to choose that folder, to begin the build at that location.

    第8章--uwp ソリューション のビルド chapter 8--uwp ソリューションのビルドChapter 8 -- Build the UWP Solution Chapter 8 -- Build the UWP Solution

  7. Unity のビルドが完了すると (時間がかかる場合があります)、ビルドの場所でファイルエクスプローラーウィンドウが開きます。Once Unity has finished building (it might take some time), it will open a File Explorer window at the location of your build.

第9章-ローカルコンピューターへのデプロイChapter 9 - Deploy on Local Machine

ビルドが完了すると、ビルドの場所に [ファイルエクスプローラー] ウィンドウが表示されます。Once the build has been completed, a File Explorer window will appear at the location of your build. という名前で作成したフォルダーを開き、そのフォルダー内のソリューション (.sln) ファイルをダブルクリックして、Visual Studio 2017 でソリューションを開きます。Open the Folder you named and built to, then double click on the solution (.sln) file within that folder, to open your solution with Visual Studio 2017.

残りの作業は、お使いのコンピューター (またはローカルコンピューター) にアプリを配置することだけです。The only thing left to do is deploy your app to your computer (or Local Machine).

ローカルコンピューターに配置するには:To deploy to Local Machine:

  1. Visual Studio 2017で、先ほど作成したソリューションファイルを開きます。In Visual Studio 2017, open the solution file that has just been created.

  2. ソリューションプラットフォームで、 [X86, ローカルコンピューター] を選択します。In the Solution Platform, select x86, Local Machine.

  3. ソリューション構成で、 [デバッグ] を選択します。In the Solution Configuration select Debug.

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

  4. 次に、ソリューションにパッケージを復元する必要があります。You will now need to restore any packages to your solution. ソリューションを右クリックし、 [ソリューションの NuGet パッケージの復元...] をクリックします。Right-click on your Solution, and click Restore NuGet Packages for Solution...

    注意

    これは、Unity によって構築されたパッケージが、ローカルマシン参照を操作するためにターゲットにする必要があるためです。This is done because the packages which Unity built need to be targeted to work with your local machines references.

  5. [ビルド] メニュー[ソリューションの配置] をクリックして、アプリケーションをコンピューターにサイドロードします。Go to Build menu and click on Deploy Solution to sideload the application to your machine. まず、Visual Studio によってアプリケーションがビルドされ、配置されます。Visual Studio will first build and then deploy your application.

  6. アプリがインストール済みのアプリの一覧に表示され、起動できる状態になります。Your App should now appear in the list of installed apps, ready to be launched.

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

Mixed Reality アプリケーションを実行すると、アプリ内で使用したInsideoutsphereモデル内に配置されます。When you run the Mixed Reality application, you will you be within the InsideOutSphere model which you used within your app. この球は、ビデオがストリーミングされる場所になります。これにより、着信ビデオ (この観点では客席でした) の360度のビューが提供されます。This sphere will be where the video will be streamed to, providing a 360-degree view, of the incoming video (which was filmed for this kind of perspective). ビデオが読み込まれるまでに数秒かかる場合、アプリには、使用可能なインターネット速度が適用されます。ビデオをフェッチしてからダウンロードする必要があるので、アプリにストリーミングします。Do not be surprised if the video takes a couple of seconds to load, your app is subject to your available Internet speed, as the video needs to be fetched and then downloaded, so to stream into your app. 準備ができたら、シーンを変更し、2番目のビデオを開いて、赤い球で整理します。When you are ready, change scenes and open your second video, by gazing at the red sphere! 次に、2番目のシーンで blue キューブを使用して、戻ってもかまいません。Then feel free to go back, using the blue cube in the second scene!

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

これで、Azure Media Services を利用して360ビデオをストリーミングする mixed reality アプリが作成されました。Congratulations, you built a mixed reality app that leverages the Azure Media Service to stream 360 videos.

ラボの結果

ラボの結果

ボーナスの演習Bonus Exercises

演習1Exercise 1

このチュートリアルでは、1つのシーンのみを使用してビデオを変更することができます。It is entirely possible to only use a single scene to change videos within this tutorial. アプリケーションを試し、1つのシーンにします。Experiment with your application and make it into a single scene! 場合によっては、ミックスに別のビデオを追加することもできます。Perhaps even add another video to the mix.

演習2Exercise 2

Azure と Unity を試し、インターネット接続の強度に応じて、別のファイルサイズでビデオを自動的に選択するアプリの機能を実装します。Experiment with Azure and Unity, and attempt to implement the ability for the app to automatically select a video with a different file size, depending on the strength of an Internet connection.