共用方式為


HoloLens (第 1 代) 和 Azure 306:串流視訊


注意事項

Mixed Reality Academy 教學課程的設計考慮了 HoloLens (第一代) 和 Mixed Reality 沉浸式頭戴式裝置。 因此,我們認為為尋求開發這些裝置指引的開發人員保留這些教學課程非常重要。 這些教學課程不會使用用於 HoloLens 2 的最新工具集或互動進行更新。 它們會維護為繼續在支援的裝置上運作。 一系列新的教學課程示範如何針對 HoloLens 2 進行開發。 此通知會在發佈這些教學課程時更新,並提供這些教學課程的連結。


Windows Mixed Reality VR 範例的螢幕擷取畫面。 Windows Mixed Reality VR 體驗的螢幕擷取畫面。

在本課程中,您將瞭解如何將 Azure 媒體服務連線到 Windows Mixed Reality VR 體驗,以允許在沉浸式頭戴式裝置上串流 360 度視訊播放。

Azure 媒體服務 是服務集合,可讓您提供廣播品質的視訊串流服務,以在當今最受歡迎的行動裝置上接觸更多物件。 如需詳細資訊,請流覽 Azure 媒體服務頁面

課程完成後,您應該擁有混合實境沉浸式頭戴式裝置應用程式,能夠:

  1. 透過 Azure 媒體服務,從 Azure 儲存體擷取 360 度視訊。

  2. 在 Unity 場景中顯示擷取的 360 度視訊。

  3. 在兩個場景之間導航,使用兩個不同的視頻。

在您的應用中,如何將結果與設計整合取決於您。 本課程旨在教您如何將 Azure 服務與 Unity 專案整合。 您的工作是使用您從本課程獲得的知識來增強您的混合實境應用程式。

設備支持

全息鏡頭 沉浸式耳機
MR 和 Azure 306:串流視訊 ✔️

先決條件

注意事項

本教學課程是專為具有 Unity 和 C# 基本經驗的開發人員所設計。 本文件中的先決條件和書面說明代表了在撰寫本文時 (2018 年 5 月的測試和驗證內容) 。 您可以自由使用安裝 工具一文中列出的最新軟體。 我們不假設本課程中的信息與您在較新軟件中找到的信息完全匹配。

我們建議本課程使用以下硬體和軟體:

開始之前

  1. 若要減少此專案的建置問題,請在根目錄或近根資料夾中建立教學課程專案。 長資料夾路徑可能會在建置時造成問題。

  2. 設定並測試您的 Mixed Reality 沉浸式頭戴式裝置。

    注意事項

    本課程 不需要 運動控制器。 如果您需要設定沉浸式頭戴式裝置的支援,請按一下如何設定 Windows Mixed Reality 的連結

第 1 章 - Azure 入口網站:建立 Azure 儲存體帳戶

若要使用 Azure 儲存體服務,您必須在 Azure 入口網站 中建立和設定儲存體帳戶

  1. 登入 Azure 入口網站

    注意事項

    如果您還沒有 Azure 帳戶,則需要建立一個帳戶。 如果您在課堂或實驗室中遵循本教學課程,請向您的講師或監考人員尋求設定新帳戶的協助。

  2. 登入之後,按一下左側功能表中的 [ 儲存體帳戶 ]。

    Azure 入口網站功能表的螢幕擷取畫面。儲存體帳戶會醒目提示。

  3. [儲存體帳戶] 索引標籤上,按一下 [新增]。

    儲存體帳戶對話方塊的螢幕擷取畫面。新增會反白顯示。

  4. [建立儲存體帳戶 ] 索引標籤中:

    1. 為您的帳戶插入 名稱 ,請注意,此欄位僅接受數字和小寫字母。

    2. 針對 部署模型, 選取 資源管理員

    3. 針對 [帳戶類型],選取 [ 一般用途 v1 (儲存體])

    4. 針對 [效能],選取 [Standard]。*

    5. 針對 [複寫] ,選取 [本機備援儲存體] ([LRS) ]。

    6. 將 [ 需要安全傳輸 ] 保留為 [已停用]。

    7. 選取 訂閱

    8. 選擇資源群組或建立新的 資源群組 。 資源群組提供監視、控制存取、佈建和管理 Azure 資產集合計費的方法。

    9. 判斷資源 群組的位置, (您是否要建立新的資源群組) 。 理想情況下,位置會位於應用程式將執行的區域。 某些 Azure 資產僅適用於特定區域。

  5. 您需要確認您了解適用於本服務的條款和條件。

    建立儲存體帳戶頁面的螢幕擷取畫面。

  6. 按一下 建立並等待 服務建立,因為這可能需要一分鐘。

  7. 建立服務執行個體後,入口網站中會出現通知。

    部署成功通知的螢幕擷取畫面。

  8. 此時您無需遵循資源,進入下一章。

第 2 章 - Azure 入口網站:建立媒體服務

若要使用 Azure 媒體服務,您必須設定服務的實例,以供應用程式 (使用,其中帳戶持有人必須是管理員) 。

  1. 在 Azure 入口網站中,按一下左上角的 [ 建立資源 ],然後搜尋 [媒體服務], 然後按 Enter。 按一下您要顯示新頁面之資源的粉紅色圖示。

    Azure 入口網站的螢幕擷取畫面。媒體服務選項會醒目提示。

  2. 新頁面提供 媒體服務的描述。 在此提示的左下角,按一下 建立 按鈕,以建立與此服務的關聯。

    Azure 入口網站的螢幕擷取畫面。建立按鈕會反白顯示。

  3. 隨即出現一個面板,您可以在其中提供有關新媒體服務的一些詳細數據:

    1. 為此服務執行個體插入您想要的 帳戶名稱

    2. 選取 訂閱

    3. 選擇 資源群組 或建立新的資源群組。 資源群組提供監視、控制存取、佈建和管理 Azure 資產集合計費的方法。 例如,建議將與單一專案 (相關聯的所有 Azure 服務保留,例如這些實驗室) 在一般資源群組) 下。

    如果您想要深入瞭解 Azure 資源群組,請遵循此 連結,瞭解如何管理 Azure 資源群組

    1. 判斷資源 群組的位置, (您是否要建立新的資源群組) 。 理想情況下,位置會位於應用程式將執行的區域。 某些 Azure 資產僅適用於特定區域。

    2. 針對 [ 儲存體帳戶 ] 區段,按一下 [ 請選取... ] 區段,然後按一下您在上一章中建立的 儲存體帳戶

    3. 您還需要確認您了解適用於本服務的條款和條件。

    4. 按一下 [建立]

      [建立媒體服務帳戶] 頁面的螢幕擷取畫面。

  4. 單擊創建 後,您必須等待服務創建,這可能需要一分鐘。

  5. 建立服務執行個體後,入口網站中會出現通知。

    入口網站功能表中通知圖示的螢幕擷取畫面。

  6. 按一下通知以探索您的新服務執行個體。

    成功部署通知的螢幕擷取畫面。

  7. 按一下通知中的 [移至資源 ] 按鈕,以探索您的新服務執行個體。

  8. 在新的媒體服務頁面中,在左側面板中,單擊 資產鏈接, 該鏈接大約位於一半處。

  9. 在下一頁的頁面左上角,按一下上傳。

    資產頁面的螢幕擷取畫面。上傳和資產選項會醒目提示。

  10. 單擊 文件夾圖 標瀏覽您的文件並選擇您要流式傳輸的第一個 360 度視頻。

    您可以點擊此 鏈接下載示例視頻

    上傳視訊資產頁面的螢幕擷取畫面。

警告

長檔案名稱可能會導致編碼器出現問題:因此,為確保影片沒有問題,請考慮縮短影片檔案名稱的長度。

  1. 影片上傳完成後,進度條會變為綠色。

    上傳視訊資產進度列的螢幕擷取畫面。

  2. 按一下上方的文字 (您的servicename — Assets) ,以返回 「資產」 頁面。

  3. 請注意您上傳的影片。 點擊它。

    資產頁面的螢幕擷取畫面。視頻 1 點 M P 4 突出顯示。

  4. 您被重新導向的頁面會顯示有關您影片的詳細資訊。 為了能夠使用您的視頻,您需要通過單擊對其進行編碼 編碼 頁面左上角的按鈕。

    資產頁面的螢幕擷取畫面。編碼按鈕會反白顯示。

  5. 會出現一個新面板,您可以在其中設定檔案的編碼選項。 設定下列屬性 (有些預設已設定) :

    1. 媒體編碼器名稱 媒體編碼器標準

    2. 編碼預設 內容自適應多位元率 MP4

    3. Video1.mp4處理媒體編碼器標準工作名稱

    4. 輸出媒體資產名稱 Video1.mp4 -- 媒體編碼器標準編碼

      編碼資產頁面的螢幕擷取畫面。

  6. 按一下 建立 按鈕。

  7. 請注意已 新增編碼工作的列,按一下該列,就會出現一個面板,其中顯示編碼進度。

    已新增標示為編碼作業的通知列螢幕擷取畫面。

    編碼器處理頁面的螢幕截圖。

  8. 等待工作完成。 工作完成後,請隨意關閉面板,並在該面板的右上角帶有“X”。

    狀態為已完成的進度列的螢幕擷取畫面。

    媒體編碼器處理頁面頂部選單的螢幕截圖。

    重要事項

    工作時間取決於視頻的文件大小。 這個過程可能需要相當長的時間。

  9. 現在已建立視訊的編碼版本,您可以發佈它以使其可供存取。 若要這麼做,請按一下藍色連結 資產 以返回資產頁面。

    Azure 入口網站的螢幕擷取畫面。資產連結會反白顯示。

  10. 您會看到您的視頻以及另一個視頻,該視頻是 資產類型 多比特率 MP4

    Microsoft Azure 資產功能表的螢幕擷取畫面。

    注意事項

    您可能會注意到,新資產與您的初始視頻一起是未知的,並且它的大小有0”位元組,只需刷新窗口即可更新。

  11. 按一下這個新資產。

    列出資產的目錄螢幕擷取畫面。

  12. 您會看到一個與您之前使用的面板類似的面板,這是不同的資產。 按一下位於頁面頂端中央的 Publish 按鈕。

    頂部菜單欄的屏幕截圖。此 發佈 按鈕會醒目提示。

  13. 系統會提示您設定定位 ,這是進入點,以在您的資產中歸檔。 針對您的案例,請設定下列屬性:

    1. 定位器類型>進步的

    2. 日期和時間是為您設定的從您目前的日期到未來的時間, (100 年(在本例中為) )。 保持原樣或更改以適應。

  14. 在該面板的底部,單擊“ 添加 ”按鈕。

    螢幕擷取畫面顯示目錄清單,其中包含要發佈的資產對話方塊。

  15. 您的視訊現在已發佈,並可以使用其端點進行串流。 頁面下方是 「檔案」 部分,其中存放著影片的不同編碼版本。 選擇圖像 (1920x960 文件) 的最高分辨率,然後出現一個面板。 在那裡您可以找到一個 下載 URL。 複製此 端點 ,以便稍後在程式碼中使用。

    Microsoft Azure 檔案儲存體區段的螢幕擷取畫面。

    資產資訊頁面的螢幕擷取畫面。

    注意事項

    您也可以 按播放按鈕 播放影片並進行測試。

  16. 您現在需要上傳您在此實驗室中使用的第二個視頻。 請按照上述步驟操作,對第二個影片重複相同的過程。 請確定您也複製第二個 端點 。 使用以下 連結下載第二個影片

  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 設定」 (中,勾選「支援虛擬實境」,確保已新增 Windows Mixed Reality SDK

      Unity X R 設定畫面的螢幕擷取畫面。

    3. [發佈設定 ] 索引標籤的 [ 功能] 底下,檢查:

      • 網際網路用戶端

        [功能] 畫面的螢幕擷取畫面。已勾選 Internet 用戶端。

  8. 進行這些更改後,請關閉 “構建設置” 窗口。

  9. 儲存您的專案 檔案儲存專案

第 4 章 - 匯入 InsideOutSphere Unity 套件

重要事項

如果您想要略過本課程的 Unity 設定 元件,並直接繼續學習程式碼,請隨時下載。 .unity套件,將其作為 自訂套件匯入您的專案,然後從 第 5 章繼續。 您需要建立一個 Unity 專案。

在本課程中,您需要下載名為 InsideOutSphere.unitypackage 的 Unity 資產套件。

如何導入 unitypackage

  1. 在您面前的 Unity 儀表板中,按一下畫面頂端功能表中的 [資產 ],然後按一下 [匯入套件 > 自訂套件]。

    資產功能表的螢幕擷取畫面。匯入套件功能表已開啟。已選取 [自訂套件]。

  2. 使用檔案選擇器選取 InsideOutSphere.unitypackage 套件,然後按一下 [開啟]。 此資產的元件清單會顯示給您。 按一下 匯入 以確認匯入。

    匯入 Unity 套件畫面的螢幕擷取畫面。

  3. 匯入後,三個新資料夾「材質」、「模型」和「預製件」會新增至您的「資產」資料夾。 這種資料夾結構是 Unity 專案的典型結構。

    assets資料夾的熒幕擷圖。

    1. 開啟 Models 資料夾,然後查看匯入的 InsideOutSphere 模型。

    2. Materials 資料夾中,尋找 InsideOutSpheres 材質 lambert1,以及 GazeButton 所使用的名為 ButtonMaterial 的材質。

    3. Prefabs 資料夾包含 InsideOutSphere 預製專案,其中包含 InsideOutSphere模型GazeButton

    4. 不包含任何程式碼,您可以按照本課程編寫程式碼。

  4. 階層中,選取 [主要相機] 物件,然後更新下列元件:

    1. Transform

      1. 位置 = X0,Y0,Z:0。

      2. 旋轉 = X0,Y0,Z:0。

      3. 比例 X1,Y1,Z:1。

    2. 相機

      1. 清晰的標誌:純色。

      2. 剪切平面:近:0.1,遠:6。

        「檢查器」畫面的螢幕擷取畫面。

  5. 導覽至 Prefab 資料夾,然後將 InsideOutSphere Prefab 拖曳至 [階層 面板]。

    Prefab 資料夾功能表和開發人員環境的螢幕擷取畫面。

  6. 按一下旁邊的小箭頭,展開階層內的 InsideOutSphere 物件。 您會在其下方看到一個名為 GazeButton物件,用於更改場景和視訊。

    階層索引標籤的螢幕擷取畫面。

  7. 在 [偵測器視窗] 中,按一下 InsideOutSphere 的 [轉換] 元件,請確定已設定下列屬性:

轉換 - 位置

X Y Z
0 0 0

變形 - 旋轉

X Y Z
0 -50 0

轉換 - 縮放

X Y Z
0 0 0

為《Inside Out Sphere》開啟的「檢查器」畫面的螢幕截圖。

  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 媒體服務串流內容。

若要建立此類別:

  1. 在「專案面板」中的「資產資料夾」中按一下滑鼠右鍵,然後按一下「建立>資料夾」。 將資料夾命名為 Scripts

    資產資料夾功能表的螢幕擷取畫面。建立功能表已開啟,並選取資料夾。

    專案索引標籤的螢幕擷取畫面。Assets 資料夾已選取。

  2. 雙擊 腳本 資料夾將其開啟。

  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 媒體服務影片輸入端點:

    1. 第一個變數進入 video1endpoint 變數。

    2. 第二個進入 video2endpoint 變數。

    警告

    在 Unity 中使用 https 時,在 2017.4.1f1 版中存在已知問題。 如果影片在播放時出現錯誤,請嘗試改用「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# 功能。 此功能允許檢查條件,然後根據檢查結果傳回值,所有這些都在單一陳述式中進行。 請遵循此 連結,以深入瞭解條件運算子

  11. 在返回 Unity 之前,請先在 Visual Studio 中儲存變更。

  12. 返回 Unity 編輯器,按一下 VideoController 類別 [from]{.underline} 的 Scripts 資料夾,並將其拖曳至 [階層面板] 中的 [主相機] 物件。

  13. 單擊 主攝像頭 並查看 檢查器面板。 請注意,在新新增的 Script 元件中,有一個值為空白的欄位。 此參考欄位以程式碼中的公用變數為目標。

  14. InsideOutSphere 物件從 [階層面板 ] 拖曳至 [球體 ] 插槽,如圖所示。

    階層功能表的螢幕擷取畫面。已選擇主相機。 球體插槽的螢幕截圖。

第 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. 現在需要新增喚 醒 () 啟動 () 方法的程式碼。

        private void Awake()
        {
            // Set this class to behave similar to singleton 
            instance = this;
        }
    
        void Start()
        {
            FocusedGameObject = null;
        }
    
  7. Update () 方法中新增下列程式碼,以投影光線投射並偵測目標命中:

        void Update()
        {
            // Set the old focused gameobject. 
            oldFocusedObject = FocusedGameObject;
            RaycastHit hitInfo;
    
            // Initialise Raycasting. 
            Hit = Physics.Raycast(Camera.main.transform.position, Camera.main.transform.forward, out hitInfo, gazeMaxDistance);
    
            // Check whether raycast has hit. 
            if (Hit == true)
            {
                // Check whether the hit has a collider. 
                if (hitInfo.collider != null)
                {
                    // Set the focused object with what the user just looked at. 
                    FocusedGameObject = hitInfo.collider.gameObject;
                }
                else
                {
                    // Object looked on is not valid, set focused gameobject to null. 
                    FocusedGameObject = null;
                }
            }
            else
            {
                // No object looked upon, set focused gameobject to null.
                FocusedGameObject = null;
            }
    
            // Check whether the previous focused object is this same 
            // object (so to stop spamming of function). 
            if (FocusedGameObject != oldFocusedObject)
            {
                // Compare whether the new Focused Object has the desired tag we set previously. 
                if (FocusedGameObject.CompareTag("GazeButton"))
                {
                    FocusedGameObject.SetActive(false);
                    VideoController.instance.ChangeScene();
                }
            }
        }
    
  8. 在返回 Unity 之前,請先在 Visual Studio 中儲存變更。

  9. 按一下 Gaze 類別,並將其從 [腳本] 資料夾拖曳至 [ 階層 面板] 中的 [主要相機] 物件。

第 7 章 - 設定兩個 Unity 場景

本章的目的是設置兩個場景,每個場景都託管一個要流式傳輸的視頻。 複製您建立的場景以減少設定時間。 然後,編輯新場景,讓 GazeButton 物件位於不同的位置,並具有不同的外觀,以顯示如何在場景之間進行變更。

  1. 轉到 文件 > 將場景另存為...。儲存視窗隨即出現。 按一下 [新增資料夾 ] 按鈕。

    第 7 章 - 設定兩個 Unity 場景

  2. 將資料夾命名為 Scenes

  3. 儲存場景」 視窗已開啟。 開啟新建立的 「場景」 資料夾。

  4. 檔案名稱: 文字欄位中,輸入 VideoScene1,然後按 儲存

  5. 返回 Unity,開啟 Scenes 資料夾,然後左鍵單擊 VideoScene1 檔案。 使用鍵盤,然後按 Ctrl + D 複製該場景

    提示

    複製 命令也 可以通過導航到 編輯 > 重複來執行。

  6. Unity 會自動遞增場景名稱編號,但無論如何都會檢查它,以確保它與先前插入的程式碼相符。

    您應該有 VideoScene1VideoScene2

  7. 使用兩個場景,移至 檔案 > 建置設定。 開啟「 建置設定 」視窗後,將場景拖曳至 「建置中的場景 」區段。

    [建置設定] 視窗的螢幕擷取畫面。

    提示

    您可以按住 Ctrl 按鈕,然後左鍵單擊每個場景,最後拖動兩個場景,從場景文件夾中選擇兩個場景。

  8. 關閉「 建置設定」 視窗,然後按兩下 VideoScene2

  9. 開啟第二個場景時,按兩下 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. 選取 網格 快顯視窗隨即出現。 按兩下 Assets 清單中的 Cube 網格。

    [選取網格] 快顯視窗的螢幕擷取畫面。

  3. 網格過濾器更新,現在是立方體。 現在,單擊 Sphere Collider 旁邊的 Gear 圖標,然後單擊 Remove Component,以從該對象中刪除碰撞器。

    Sphere Collider 選單的螢幕截圖。已選取移除元件。

  4. 選取 GazeButton 後,按一下 [偵測器] 底部的 [新增元件] 按鈕。 在搜尋欄位中,輸入 box,而 Box Collider 是一個選項,按一下該選項,即可將 Box Collider 新增至 GazeButton 物件。

    新增元件搜尋方塊的螢幕擷取畫面。

  5. GazeButton 現在已部分更新,看起來會有所不同,不過,現在會建立新的材質,使其看起來與第一個場景中的物件不同,而且更容易辨識為不同的物件。

  6. 導覽至「專案面板」中的「材質」資料夾。 複製 ButtonMaterial 材質 (按鍵盤上的 Ctrl + D ,或左鍵單擊 材質,然後從 編輯 檔案功能表選項中選擇 複製) 。

    專案標籤中「材料」資料夾的螢幕擷取畫面。 選擇重複項的編輯菜單的屏幕截圖。

  7. 選擇此處名為 ButtonMaterial 1) 的新 ButtonMaterial 材質 (,然後在檢查器中按一下反照率顏色視窗。 彈出視窗隨即出現,您可以在其中選擇其他顏色 (選擇您喜歡的顏色) ,然後關閉彈出視窗。 材料是它自己的實例,與原始不同。

    顏色選擇彈出窗口的屏幕截圖。

  8. 將新的 材質 拖曳到 GazeButton 子系上,現在更新其外觀,以便輕鬆地與第一個場景按鈕區分開來。

    專案編輯器場景標籤的螢幕擷取畫面。

  9. 此時,您可以在建置 UWP 專案之前,在編輯器中測試專案。

    • 按下編輯器中的播放按鈕並戴上耳機。

      顯示播放、暫停和跳過按鈕的屏幕截圖。播放按鈕會反白顯示。

  10. 查看兩個 GazeButton 物件,以在第一個和第二個視訊之間切換。

第 8 章 - 建置 UWP 解決方案

一旦您確定編輯器沒有錯誤,您就可以建立了。

構建:

  1. 按一下「 檔案 > 儲存」來儲存目前場景。

  2. 核取名為 Unity C# 專案 的方塊 (此選項可讓您在建置完成之後編輯類別) 。

  3. 轉到文件>構建設置,然後單擊構建。

  4. 系統會提示您選取要建置解決方案的資料夾。

  5. 建立 BUILDS 資料夾,並在該資料夾內建立另一個資料夾,其中包含您選擇的適當名稱。

  6. 按一下您的新資料夾,然後按一下 [選取資料夾],以便選擇該資料夾,以從該位置開始建置。

    突出顯示的 BUILDS 文件夾的屏幕截圖。 突出顯示的 Video Streaming Build 文件夾的屏幕截圖。

  7. 一旦 Unity 建置 (可能需要一些時間) ,它會在建置位置開啟一個檔案總管視窗。

第 9 章 - 在本機電腦上部署

建置完成後,建置位置會出現檔案總管視窗。 若要使用 Visual Studio 2017 開啟您的解決方案,請開啟您命名並建置的資料夾,然後按兩下該資料夾內的解決方案 (.sln) 檔案。

唯一剩下的就是將您的應用程序部署到您的計算機 (或 本地計算機) 。

若要部署至本機電腦:

  1. Visual Studio 2017 中,開啟解決方案檔案。

  2. [解決方案平臺] 中,選取 [x86] [本機電腦]。

  3. [解決方案設定] 中,選取 [偵錯]。

    解決方案組態功能表的螢幕擷取畫面。

  4. 您現在需要將任何套件還原至您的解決方案。 以滑鼠右鍵按一下您的 解決方案,然後按一下 [還原解決方案的 NuGet 套件...]

    注意事項

    Unity 建置的套件必須以您的本機電腦參考為目標。

  5. 移至 [建置] 功能表 ,然後按一下 [部署解決方案] ,將應用程式側載至您的電腦。 Visual Studio 會先建置,然後部署您的應用程式。

  6. 您的應用程式現在應該會出現在已安裝的應用程式清單中,準備啟動。

    已安裝應用程式清單的螢幕截圖。

當您執行 Mixed Reality 應用程式時,您會位於應用程式內使用的 InsideOutSphere 模型內。 該球體是視頻流式傳輸到的地方,並提供針對這種視角拍攝的傳入視頻的 360 度視圖。 視頻可能需要幾秒鐘的時間才能加載,因為您的應用程序受制於可用的互聯網速度,而視頻是獲取、下載然後流式傳輸到您的應用程序的。 準備好後,透過凝視紅色球體來改變場景並打開您的第二個影片! 然後隨意返回,使用第二個場景中的藍色立方體!

您完成的 Azure 媒體服務應用程式

恭喜您,您建置了混合實境應用程式,可套用 Azure 媒體服務來串流 360 度影片。

混合實境應用程式範例的螢幕擷取畫面。

混合實境應用程式範例的螢幕擷取畫面。

獎勵練習

練習 1

在本教學課程中,完全可以只使用單一場景來變更影片。 嘗試您的應用程式並將其變成一個場景! 甚至添加另一個視頻。

練習 2

嘗試使用 Azure 和 Unity,並嘗試實作應用程式自動選取具有不同檔案大小的視訊的功能,視網際網路連線的強度而定。