HoloLens (första generationen) och Azure 306: Strömmande video


Anteckning

Självstudierna Mixed Reality Academy har utformats med HoloLens (första generationen) och Mixed Reality integrerande headset i åtanke. Därför tycker vi att det är viktigt att låta de här självstudierna vara kvar för utvecklare som fortfarande behöver vägledning för att utveckla för dessa enheter. De här självstudierna uppdateras inte med de senaste verktygsuppsättningarna eller interaktionerna som används för HoloLens 2. De kommer att underhållas för att fortsätta arbeta på de enheter som stöds. Det kommer att finnas en ny serie självstudier som kommer att publiceras i framtiden som visar hur man utvecklar för HoloLens 2. Det här meddelandet uppdateras med en länk till dessa självstudier när de publiceras.


Skärmbild av ett Windows Mixed Reality V R-exempel.Skärmbild av en Windows Mixed Reality V R-upplevelse.

I den här kursen får du lära dig hur du ansluter dina Azure Media Services till en Windows Mixed Reality VR-upplevelse för att tillåta direktuppspelning av 360 graders videouppspelning på integrerande headset.

Azure Media Services är en samling tjänster som ger dig videoströmningstjänster av sändningskvalitet för att nå större målgrupper på dagens mest populära mobila enheter. Mer information finns på sidan Azure Media Services.

Efter att ha slutfört den här kursen har du ett integrerande headsetprogram för mixad verklighet, som kommer att kunna göra följande:

  1. Hämta en 360 graders video från en Azure Storage via Azure Media Service.

  2. Visa den hämtade 360 graders videon i en Unity-scen.

  3. Navigera mellan två scener med två olika videor.

I ditt program är det upp till dig hur du ska integrera resultaten med din design. Den här kursen är utformad för att lära dig hur du integrerar en Azure-tjänst med ditt Unity-projekt. Det är ditt jobb att använda den kunskap du får från den här kursen för att förbättra ditt mixed reality-program.

Stöd för enheter

Kurs HoloLens Integrerande headset
MR och Azure 306: Strömmande video ✔️

Förutsättningar

Anteckning

Den här självstudien är utformad för utvecklare som har grundläggande erfarenhet av Unity och C#. Tänk också på att kraven och de skriftliga anvisningarna i det här dokumentet representerar vad som har testats och verifierats i skrivande stund (maj 2018). Du är fri att använda den senaste programvaran, som anges i artikeln installera verktyg, men det bör inte antas att informationen i den här kursen kommer att matcha perfekt vad du hittar i nyare programvara än vad som anges nedan.

Vi rekommenderar följande maskinvara och programvara för den här kursen:

Innan du börjar

  1. För att undvika problem med att skapa det här projektet rekommenderar vi starkt att du skapar projektet som nämns i den här självstudien i en rotmapp eller nära rotmapp (långa mappsökvägar kan orsaka problem vid byggtiden).

  2. Konfigurera och testa ditt Mixed Reality integrerande headset.

    Anteckning

    Du behöver inga rörelsekontrollanter för den här kursen. Om du behöver stöd för att konfigurera det integrerande headsetet klickar du på länken för hur du konfigurerar Windows Mixed Reality.

Kapitel 1 – Azure-portalen: Skapa Azure Storage-kontot

Om du vill använda Azure Storage-tjänsten måste du skapa och konfigurera ett lagringskonto i Azure Portal.

  1. Logga in på Azure-portalen.

    Anteckning

    Om du inte redan har ett Azure-konto måste du skapa ett. Om du följer den här självstudien i ett klassrum eller en labbsituation ber du din lärare eller någon av rektorerna om hjälp med att konfigurera ditt nya konto.

  2. När du är inloggad klickar du på Lagringskonton på den vänstra menyn.

    Skärmbild av menyn i Azure-portalen. Lagringskonton är markerade.

  3. På fliken Lagringskonton klickar du på Lägg till.

    Skärmbild av dialogrutan lagringskonto. Lägg till är markerat.

  4. På fliken Skapa lagringskonto :

    1. Infoga ett namn för ditt konto. Tänk på att det här fältet endast accepterar siffror och gemener.

    2. Som Distributionsmodell väljer du Resource Manager.

    3. För Typ av konto väljer du Lagring (generell användning v1).

    4. För Prestanda väljer du Standard.*

    5. För Replikering väljer du Lokalt redundant lagring (LRS).

    6. Lämna Säker överföring obligatoriskt som Inaktiverad.

    7. Välj en prenumeration.

    8. Välj en resursgrupp eller skapa en ny. En resursgrupp är ett sätt att övervaka, kontrollera åtkomst, etablera och hantera fakturering för en samling Azure-tillgångar.

    9. Fastställ platsen för resursgruppen (om du skapar en ny resursgrupp). Platsen skulle helst finnas i den region där programmet skulle köras. Vissa Azure-tillgångar är bara tillgängliga i vissa regioner.

  5. Du måste bekräfta att du har förstått de villkor som tillämpas på den här tjänsten.

    Skärmbild av sidan Skapa lagringskonto.

  6. När du har klickat på Skapa måste du vänta tills tjänsten har skapats. Det kan ta en minut.

  7. Ett meddelande visas i portalen när tjänstinstansen har skapats.

    Skärmbild av meddelandet om att distributionen lyckades.

  8. Nu behöver du inte följa resursen, utan bara gå vidare till nästa kapitel.

Kapitel 2 – Azure-portalen: Skapa mediatjänsten

Om du vill använda Azure Media Service måste du konfigurera en instans av tjänsten som ska göras tillgänglig för ditt program (där kontoinnehavaren måste vara en Admin).

  1. I Azure-portalen klickar du på Skapa en resurs i det övre vänstra hörnet och söker efter Media Service och trycker på Retur. Den resurs som du vill ha har för närvarande en rosa ikon. klicka på det här om du vill visa en ny sida.

    Skärmbild av Azure-portalen. Alternativet Media Services är markerat.

  2. Den nya sidan innehåller en beskrivning av Media Service. Längst ned till vänster i den här prompten klickar du på knappen Skapa för att skapa en association med den här tjänsten.

    Skärmbild av Azure-portalen. Knappen Skapa är markerad.

  3. När du har klickat på Skapa en panel visas där du behöver ange information om din nya Media Service:

    1. Infoga önskat kontonamn för den här tjänstinstansen.

    2. Välj en prenumeration.

    3. Välj en resursgrupp eller skapa en ny. En resursgrupp är ett sätt att övervaka, kontrollera åtkomst, etablera och hantera fakturering för en samling Azure-tillgångar. Vi rekommenderar att du behåller alla Azure-tjänster som är associerade med ett enda projekt (t.ex. dessa labb) under en gemensam resursgrupp).

    Om du vill läsa mer om Azure-resursgrupper följer du den här länken om hur du hanterar Azure-resursgrupper.

    1. Fastställ platsen för resursgruppen (om du skapar en ny resursgrupp). Platsen skulle helst finnas i den region där programmet skulle köras. Vissa Azure-tillgångar är bara tillgängliga i vissa regioner.

    2. I avsnittet Lagringskonto klickar du på avsnittet Välj... och sedan på lagringskontot som du skapade i det senaste kapitlet.

    3. Du måste också bekräfta att du har förstått de villkor som tillämpas på den här tjänsten.

    4. Klicka på Skapa.

      Skärmbild av sidan Skapa mediatjänstkonto.

  4. När du har klickat på Skapa måste du vänta tills tjänsten har skapats. Det kan ta en minut.

  5. Ett meddelande visas i portalen när tjänstinstansen har skapats.

    Skärmbild av meddelandeikonen på portalmenyn.

  6. Klicka på meddelandet för att utforska din nya tjänstinstans.

    Skärmbild av meddelandet för lyckad distribution.

  7. Klicka på knappen Gå till resurs i meddelandet för att utforska din nya tjänstinstans.

  8. På den nya mediatjänstsidan, i panelen till vänster, klickar du på länken Tillgångar , som är ungefär halvvägs ned.

  9. Klicka på Ladda upp i det övre vänstra hörnet på sidan på nästa sida.

    Skärmbild av sidan Tillgångar. Alternativen Ladda upp och Tillgångar är markerade.

  10. Klicka på mappikonen för att bläddra bland dina filer och välj den första 360 Video som du vill strömma.

    Du kan följa den här länken för att ladda ned en exempelvideo.

    Skärmbild av sidan ladda upp en videotillgång.

Varning

Långa filnamn kan orsaka problem med kodaren: för att säkerställa att videor inte har problem bör du överväga att förkorta längden på dina videofilnamn.

  1. Förloppsindikatorn blir grön när videon har laddats upp.

    Skärmbild av förloppsindikatorn för att ladda upp en videotillgång.

  2. Klicka på texten ovan (yourservicename – Assets) för att återgå till sidan Tillgångar .

  3. Du kommer att märka att videon har laddats upp. Klicka på den.

    Skärmbild av sidan Tillgångar. Video 1 punkt M P 4 är markerad.

  4. Sidan som du omdirigeras till visar detaljerad information om videon. För att kunna använda videon måste du koda den genom att klicka på knappen Koda längst upp till vänster på sidan.

    Skärmbild av tillgångssidan. Kodningsknappen är markerad.

  5. En ny panel visas till höger, där du kan ange kodningsalternativ för filen. Ange följande egenskaper (vissa anges redan som standard):

    1. Mediakodarens namn Media Encoder Standard

    2. Kodning av förinställt innehåll – anpassningsbar mp4 med flera bithastigheter

    3. Jobbnamn Media Encoder Standard bearbetning av Video1.mp4

    4. Utdatamedietillgångens namn Video1.mp4 – Media Encoder Standard kodad

      Skärmbild av kodningssidan för en tillgång.

  6. Klicka på knappen Skapa.

  7. Du ser ett fält med kodningsjobbet tillagt, klickar på det fältet och en panel visas med kodningsförloppet som visas i det.

    Skärmbild av meddelandefältet märkt kodningsjobbet har lagts till.

    Skärmbild av sidan för kodarbearbetning.

  8. Vänta tills jobbet har slutförts. När det är klart kan du stänga panelen med "X" längst upp till höger på panelen.

    Skärmbild av förloppsindikatorn med statusen klar.

    Skärmbild av den översta menyn på mediekodarbearbetningssidan.

    Viktigt

    Hur mycket tid det tar beror på videons filstorlek. Den här processen kan ta ganska lite tid.

  9. Nu när den kodade versionen av videon har skapats kan du publicera den för att göra den tillgänglig. Om du vill göra det klickar du på den blå länken Tillgångar för att gå tillbaka till sidan tillgångar.

    Skärmbild av Azure-portalen. Länken tillgångar är markerad.

  10. Du kommer att se videon tillsammans med en annan, som är av tillgångstyp Multi-Bitrate MP4.

    Skärmbild av menyn Microsoft Azure-tillgångar.

    Anteckning

    Du kanske märker att den nya tillgången, tillsammans med din första video, är Okänd och har "0" byte för sin storlek, uppdatera bara fönstret så att det uppdateras.

  11. Klicka på den här nya tillgången.

    Skärmbild av katalogen med tillgångar.

  12. Du kommer att se en liknande panel som den du använde tidigare, bara det här är en annan tillgång. Klicka på knappen Publicera längst upp på sidan.

    Skärmbild av den översta menyraden. Knappen Publicera är markerad.

  13. Du uppmanas att ange en positionerare, som är startpunkten, till fil/s i dina tillgångar. För ditt scenario anger du följande egenskaper:

    1. Positionerartyp>Progressiv.

    2. Datum ochtid kommer att anges för dig, från ditt aktuella datum, till en tid i framtiden (hundra år i det här fallet). Lämna som den är eller ändra den så att den passar.

    Anteckning

    Mer information om lokaliserare och vad du kan välja finns i dokumentationen för Azure Media Services.

  14. Klicka på knappen Lägg till längst ned på panelen.

    Skärmbild som visar kataloglistor med dialogrutan tillgång för publicering.

  15. Videon har nu publicerats och kan strömmas med hjälp av dess slutpunkt. Längre ned på sidan finns avsnittet Filer . Det är här de olika kodade versionerna av videon kommer att finnas. Välj den högsta möjliga upplösningen (i bilden nedan är filen 1920x960) och sedan visas en panel till höger. Där hittar du en nedladdnings-URL. Kopiera den här slutpunkten eftersom du kommer att använda den senare i koden.

    Skärmbild av avsnittet Microsoft Azure Files.

    Skärmbild av sidan tillgångsinformation.

    Anteckning

    Du kan också trycka på knappen Spela upp för att spela upp videon och testa den.

  16. Nu måste du ladda upp den andra videon som du ska använda i det här labbet. Följ stegen ovan och upprepa samma process för den andra videon. Se till att du kopierar den andra slutpunkten också. Använd följande länk för att ladda ned en andra video.

  17. När båda videorna har publicerats är du redo att gå vidare till nästa kapitel.

Kapitel 3 – Konfigurera Unity-projektet

Följande är en typisk konfiguration för utveckling med Mixed Reality och är därför en bra mall för andra projekt.

  1. Öppna Unity och klicka på Nytt.

    Skärmbild av fliken Unity-projekt. Knappen Nytt är markerad.

  2. Nu måste du ange ett Unity-projektnamn, infoga MR_360VideoStreaming.. Kontrollera att projekttypen är inställd på 3D. Ange plats till någonstans som passar dig (kom ihåg att närmare rotkataloger är bättre). Klicka sedan på Skapa projekt.

    Skärmbild av sidan Nya Unity-projekt.

  3. När Unity är öppet är det värt att kontrollera att standardskriptredigeraren är inställd på Visual Studio. Gå till Redigerainställningar och gå sedan till Externa verktyg från det nya fönstret. Ändra extern skriptredigerare till Visual Studio 2017. Stäng fönstret Inställningar .

    Skärmbild av den externa skriptredigerarens meny. Visual Studio 2017 är valt.

  4. Gå sedan till Inställningar för filbygge och växla plattformen till Universell Windows-plattform genom att klicka på knappen Växla plattform.

  5. Kontrollera också att:

    1. Målenheten är inställd på Valfri enhet.

    2. Byggtyp är inställt på D3D.

    3. SDK är inställt på Senaste installerat.

    4. Visual Studio-versionen är inställd på Senaste installerad.

    5. Build and Run är inställt på Lokal dator.

    6. Oroa dig inte för att konfigurera Scener just nu, eftersom du kommer att konfigurera dessa senare.

    7. De återstående inställningarna bör lämnas som standard för tillfället.

      Skärmbild av skärmen För Enhetsversionsinställningar.

  6. I fönstret Build Settings (Skapa inställningar ) klickar du på knappen Spelarinställningar . Då öppnas den relaterade panelen i det utrymme där kontrollanten finns.

  7. I den här panelen måste några inställningar verifieras:

    1. På fliken Andra inställningar :

      1. Körningsversionen för skript ska vara stabil (.NET 3.5 Motsvarande).

      2. Skriptserverdelen ska vara .NET.

      3. API-kompatibilitetsnivån ska vara .NET 4.6.

        Skärmbild som visar sidan Inställningar för Universell Windows-plattform.

    2. Längre ned på panelen, i XR-inställningar (finns nedan Publicera inställningar), markerar du Virtual Reality Supported (Virtual Reality Supported) och kontrollerar att Windows Mixed Reality SDK har lagts till.

      Skärmbild av skärmen Unity X R-inställningar.

    3. På fliken Publiceringsinställningar går du till Funktioner och kontrollerar:

      • InternetClient

        Skärmbild av skärmen Funktioner. Internetklienten är markerad.

  8. När du har gjort dessa ändringar stänger du fönstret Skapa inställningar .

  9. Spara projektfilenSpara projekt.

Kapitel 4 – Importera InsideOutSphere Unity-paketet

Viktigt

Om du vill hoppa över Unity Set up-komponenten i den här kursen och fortsätta direkt till koden kan du ladda ned .unitypackage, importera den till projektet som ett anpassat paket och sedan fortsätta från kapitel 5. Du måste fortfarande skapa ett Unity-projekt.

För den här kursen måste du ladda ned ett Unity Asset Package med namnet InsideOutSphere.unitypackage.

Så här importerar du unitypackage:

  1. Med Unity-instrumentpanelen framför dig klickar du på Tillgångar på menyn överst på skärmen och klickar sedan på Importera paket > anpassat paket.

    Skärmbild av menyn tillgångar. Importpaketmenyn är öppen. Anpassat paket har valts.

  2. Använd filväljaren för att välja paketet InsideOutSphere.unitypackage och klicka på Öppna. En lista över komponenter för den här tillgången visas för dig. Bekräfta importen genom att klicka på Importera.

    Skärmbild av skärmen Importera Unity-paket.

  3. När importen är klar ser du att tre nya mappar, Material, Modeller och Prefabs, har lagts till i mappen Tillgångar . Den här typen av mappstruktur är typisk för ett Unity-projekt.

    Skärmbild av mappen tillgångar.

    1. Öppna mappen Modeller så ser du att InsideOutSphere-modellen har importerats.

    2. I mappen Material hittar du InsideOutSpheres material lambert1, tillsammans med ett material som heter ButtonMaterial, som används av GazeButton, som du snart kommer att se.

    3. Prefabs-mappen innehåller prefabför InsideOutSphere som innehåller både InsideOutSphere-modellen och GazeButton.

    4. Ingen kod ingår, du kommer att skriva koden genom att följa den här kursen.

  4. I hierarkin väljer du huvudkameraobjektet och uppdaterar följande komponenter:

    1. Transformering

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

      2. Rotation = X: 0, Y: 0, Z: 0.

      3. Skala X: 1, Y: 1, Z: 1.

    2. Kamera

      1. Clear Flags: Solid Color.

      2. Klippplan: Nära: 0,1, långt: 6.

        Skärmbild av skärmen Kontroll.

  5. Navigera till mappen Prefab och dra sedan prefab för InsideOutSphere till hierarkipanelen .

    Skärmbild av mappen Prefab och utvecklarmiljön.

  6. Expandera InsideOutSphere-objektet i hierarkin genom att klicka på den lilla pilen bredvid den. Du ser ett underordnat objekt under det med namnet GazeButton. Detta kommer att användas för att ändra scener och därmed videor.

    Skärmbild av hierarkifliken.

  7. I Kontrollfönstret klickar du på Komponenten Transformering av InsideOutSphere och kontrollerar att följande egenskaper har angetts:

Transformera – position

X Y Z
0 0 0

Transformera – rotation

X Y Z
0 -50 0

Transformera – skala

X Y Z
0 0 0

Skärmbild av kontrollskärmen som är öppen för Inside Out Sphere.

  1. Klicka på det underordnade objektet GazeButton och ange dess transformering enligt följande:

Transformera – position

X Y Z
3,6 1.3 0

Transformera – rotation

X Y Z
0 0 0

Transformera – skala

X Y Z
1 1 1

Skärmbild av scenfliken öppen.

Kapitel 5 – Skapa klassen VideoController

Klassen VideoController är värd för de två videoslutpunkter som ska användas för att strömma innehållet från Azure Media Service.

Så här skapar du den här klassen:

  1. Högerklicka i tillgångsmappen i projektpanelen och klicka på Skapa > mapp. Namnge mappen Skript.

    Skärmbild av menyn för tillgångsmappen. Menyn Skapa är öppen och mappen är markerad.

    Skärmbild av projektfliken. Mappen Tillgångar är markerad.

  2. Dubbelklicka på mappen Skript för att öppna den.

  3. Högerklicka i mappen och klicka sedan på Skapa > C#-skript. Ge skriptet namnet VideoController.

    Skärmbild av filen med namnet Video Controller.

  4. Dubbelklicka på det nya VideoController-skriptet för att öppna det med Visual Studio 2017.

    Skärmbild av koden för videostyrenhetsfilen.

  5. Uppdatera namnrymderna överst i kodfilen enligt följande:

    using System.Collections;
    using UnityEngine;
    using UnityEngine.SceneManagement;
    using UnityEngine.Video;
    
  6. Ange följande variabler i klassen VideoController tillsammans med metoden 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. Nu är det dags att ange slutpunkterna från dina Azure Media Service-videor:

    1. Den första i variabeln video1endpoint .

    2. Den andra i variabeln video2endpoint .

    Varning

    Det finns ett känt problem med att använda https i Unity, med version 2017.4.1f1. Om videorna ger ett fel vid uppspelning kan du prova att använda "http" i stället.

  8. Därefter måste metoden Start() redigeras. Den här metoden utlöses varje gång användaren växlar scen (vilket innebär att videon växlas) genom att titta på blickknappen.

        // Use this for initialization
        void Start()
        {
            Application.runInBackground = true;
            StartCoroutine(PlayVideo());
        }
    
  9. Efter metoden Start() infogar du metoden PlayVideo()IEnumerator , som kommer att användas för att starta videor sömlöst (så att ingen stamning visas).

        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. Den sista metoden du behöver för den här klassen är metoden ChangeScene(), som används för att växla mellan scener.

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

    Tips

    Metoden ChangeScene() använder en praktisk C#-funktion som kallas villkorsstyrd operator. Detta gör att villkor kan kontrolleras och sedan returneras värden baserat på resultatet av kontrollen, allt inom en enda instruktion. Följ den här länken om du vill veta mer om villkorsstyrd operator.

  11. Spara ändringarna i Visual Studio innan du återvänder till Unity.

  12. Tillbaka i Unity-redigeraren klickar du på och drar klassen VideoController [från]{.underline} mappen Skript till huvudkameraobjektethierarkipanelen .

  13. Klicka på huvudkameran och titta på kontrollpanelen. Du kommer att märka att det finns ett fält med ett tomt värde i den nyligen tillagda skriptkomponenten. Det här är ett referensfält som riktar sig till de offentliga variablerna i koden.

  14. Dra InsideOutSphere-objektet från hierarkipanelen till sphere-platsen , som du ser i bilden nedan.

    Skärmbild av hierarkimenyn. Huvudkamera har valts.Skärmbild av Sphere-facket.

Kapitel 6 – Skapa klassen Gaze

Den här klassen ansvarar för att skapa en Raycast som kommer att projiceras framåt från huvudkameran för att identifiera vilket objekt användaren tittar på. I det här fallet måste Raycast identifiera om användaren tittar på GazeButton-objektet i scenen och utlösa ett beteende.

Så här skapar du den här klassen:

  1. Gå till mappen Skript som du skapade tidigare.

  2. Högerklicka på Projektpanelen , SkapaC#-skript. Ge skriptet namnet Gaze.

  3. Dubbelklicka på det nya Gaze-skriptet för att öppna det med Visual Studio 2017.

  4. Kontrollera att följande namnområde är överst i skriptet och ta bort andra:

    using UnityEngine;
    
  5. Lägg sedan till följande variabler i klassen 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. Kod för metoderna Awake() och Start() måste nu läggas till.

        private void Awake()
        {
            // Set this class to behave similar to singleton 
            instance = this;
        }
    
        void Start()
        {
            FocusedGameObject = null;
        }
    
  7. Lägg till följande kod i metoden Update() för att projicera en Raycast och identifiera målträffen:

        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. Spara ändringarna i Visual Studio innan du återvänder till Unity.

  9. Klicka och dra klassen Gaze från mappen Skript till huvudkameraobjektet på hierarkipanelen .

Kapitel 7 – Konfigurera de två Unity-scenerna

Syftet med det här kapitlet är att konfigurera de två scenerna, där var och en är värd för en video som ska strömmas. Du duplicerar scenen som du redan har skapat, så att du inte behöver konfigurera den igen, även om du sedan redigerar den nya scenen, så att GazeButton-objektet finns på en annan plats och har ett annat utseende. Det här är för att visa hur du ändrar mellan scener.

  1. Gör detta genom att gå till Arkiv > Spara scen som .... Ett spara-fönster visas. Klicka på knappen Ny mapp .

    Kapitel 7 – Konfigurera de två Unity-scenerna

  2. Ge mappen namnet Scener.

  3. Fönstret Spara scen är fortfarande öppet. Öppna den nyligen skapade mappen Scener .

  4. I fältet Filnamn: text skriver du VideoScene1 och trycker sedan på Spara.

  5. I Unity öppnar du mappen Scener och vänsterklickar på videoscene1-filen . Använd tangentbordet och tryck på Ctrl + D så duplicerar du scenen

    Tips

    Du kan också utföra dubblettkommandot genom att gå till Redigera > dubblett.

  6. Unity ökar automatiskt scennamnens nummer, men kontrollerar det ändå för att säkerställa att det matchar den tidigare infogade koden.

    Du bör ha VideoScene1 och VideoScene2.

  7. Med dina två scener går du till Inställningar för filbygge>. När fönstret Skapa inställningar är öppet drar du dina scener till avsnittet Scener i Build .

    Skärmbild av fönstret Bygginställningar.

    Tips

    Du kan välja båda scenerna från mappen Scener genom att hålla ned Ctrl-knappen och sedan vänsterklicka på varje scen och slutligen dra båda över.

  8. Stäng fönstret Bygginställningar och dubbelklicka på VideoScene2.

  9. När den andra scenen är öppen klickar du på det underordnade Objektet GazeButton i InsideOutSphere och anger dess transformering enligt följande:

Transformera – position

X Y Z
0 1.3 3,6

Transformera – rotation

X Y Z
0 0 0

Transformera – skala

X Y Z
1 1 1
  1. När GazeButton-barnet fortfarande är markerat tittar du på inspektören och på nätfiltret. Klicka på det lilla målet bredvid mesh-referensfältet :

    Skärmbild av kontrollskärmen för Gaze Button.

  2. Popup-fönstret Välj nät visas. Dubbelklicka på kubnätet i listan över tillgångar.

    Skärmbild av popup-fönstret Välj nät.

  3. Mesh-filtret uppdateras och är nu en kub. Klicka nu på kugghjulsikonen bredvid Sphere Collider och klicka på Ta bort komponent för att ta bort kollideraren från det här objektet.

    Skärmbild av menyn Sphere Collider. Ta bort komponent har valts.

  4. Med GazeButton fortfarande markerat klickar du på knappen Lägg till komponent längst ned i Inspector. I sökfältet skriver du rutan och Box Collider är ett alternativ – klicka på det om du vill lägga till en Box Collider i GazeButton-objektet .

    Skärmbild av sökrutan Lägg till komponent.

  5. GazeButton har nu delvis uppdaterats för att se annorlunda ut, men nu skapar du ett nytt material, så att det ser helt annorlunda ut och är lättare att känna igen som ett annat objekt än objektet i den första scenen.

  6. Gå till mappen Material i projektpanelen. Duplicera ButtonMaterial Material (tryck på Ctrl + D på tangentbordet eller vänsterklicka på Material. Välj sedan Duplicera i menyalternativet Redigera fil).

    Skärmbild av mappen Material på projektfliken.Skärmbild av redigeringsmenyn med dubblett markerad.

  7. Välj det nya ButtonMaterial-materialet (här med namnet ButtonMaterial 1) och klicka på färgfönstret Albedo i Inspector. Ett popup-fönster visas där du kan välja en annan färg (välj vad du vill) och sedan stänga popup-fönstret. Materialet blir en egen instans och skiljer sig från originalet.

    Skärmbild av popup-fönstret för färgval.

  8. Dra det nya materialet till GazeButton-barnet för att nu helt uppdatera utseendet så att det enkelt kan skiljas från den första scener-knappen.

    Skärmbild av scenfliken för projektredigeraren.

  9. Nu kan du testa projektet i redigeraren innan du skapar UWP-projektet.

    • Tryck på knappen Spela upp i redigeraren och använd headsetet.

      Skärmbild som visar knapparna spela upp, pausa och hoppa över. Uppspelningsknappen är markerad.

  10. Titta på de två GazeButton-objekten för att växla mellan den första och andra videon.

Kapitel 8 – Skapa UWP-lösningen

När du har sett till att redigeraren inte har några fel är du redo att skapa.

Så här skapar du:

  1. Spara den aktuella scenen genom att klicka på Spara fil>.

  2. Markera kryssrutan Unity C# Projects (detta är viktigt eftersom du kan redigera klasserna när bygget har slutförts).

  3. Gå till Inställningar för filbygge >och klicka på Skapa.

  4. Du uppmanas att välja den mapp där du vill skapa lösningen.

  5. Skapa en BUILDS-mapp och skapa en annan mapp i mappen med ett valfritt namn.

  6. Klicka på den nya mappen och klicka sedan på Välj mapp, så att du kan välja den mappen för att börja bygga på den platsen.

    Skärmbild av mappen BUILDS markerad.Skärmbild av mappen Video Streaming Build markerad.

  7. När Unity har skapats (det kan ta lite tid) öppnas ett Utforskaren fönster på platsen för bygget.

Kapitel 9 – Distribuera på lokal dator

När bygget har slutförts visas ett Utforskaren fönster på platsen för bygget. Öppna mappen som du har döpt till och dubbelklicka sedan på lösningsfilen (.sln) i mappen för att öppna lösningen med Visual Studio 2017.

Det enda som återstår att göra är att distribuera appen till datorn (eller den lokala datorn).

Så här distribuerar du till den lokala datorn:

  1. Öppna lösningsfilen som just har skapats i Visual Studio 2017.

  2. I Lösningsplattform väljer du x86, Lokal dator.

  3. I Lösningskonfiguration väljer du Felsök.

    Skärmbild av menyn Lösningskonfiguration.

  4. Nu måste du återställa alla paket till din lösning. Högerklicka på lösningen och klicka på Återställ NuGet-paket för lösning...

    Anteckning

    Detta görs eftersom de paket som Unity har skapat måste riktas för att fungera med dina lokala datorreferenser.

  5. Gå till menyn Skapa och klicka på Distribuera lösning för att separat läsa in programmet på datorn. Visual Studio skapar först och distribuerar sedan ditt program.

  6. Appen bör nu visas i listan över installerade appar som är redo att startas.

    Skärmbild av listan över installerade appar.

När du kör Mixed Reality-programmet kommer du att vara inom den InsideOutSphere-modell som du använde i din app. Denna sfär kommer att vara där videon kommer att strömmas till, vilket ger en 360-graders vy, av den inkommande videon (som filmades för denna typ av perspektiv). Bli inte förvånad om videon tar några sekunder att läsa in, appen är föremål för din tillgängliga Internethastighet, eftersom videon måste hämtas och sedan laddas ned, så att den strömmas till din app. När du är klar kan du ändra scener och öppna din andra video genom att titta på den röda sfären! Sedan kan du gå tillbaka, med hjälp av den blå kuben i den andra scenen!

Ditt färdiga Azure Media Service-program

Grattis, du har skapat en mixed reality-app som använder Azure Media Service för att strömma 360 videor.

Skärmbild av en exempelapp för mixad verklighet.

Skärmbild av ett exempel på en mixed reality-app.

Bonusövningar

Övning 1

Det är helt möjligt att bara använda en enda scen för att ändra videor i den här självstudien. Experimentera med ditt program och gör det till en enda scen! Kanske till och med lägga till en annan video i mixen.

Övning 2

Experimentera med Azure och Unity och försök att implementera möjligheten för appen att automatiskt välja en video med en annan filstorlek, beroende på styrkan i en Internetanslutning.