HoloLens (1e generatie) en Azure 306: video streamen


Notitie

De Mixed Reality Academy-zelfstudies zijn ontworpen met het oog op HoloLens (1e generatie) en Mixed Reality Immersive Headsets. Daarom vinden we het belangrijk om deze zelfstudies te laten staan voor ontwikkelaars die nog steeds op zoek zijn naar hulp bij het ontwikkelen van deze apparaten. Deze zelfstudies worden niet bijgewerkt met de nieuwste hulpprogrammasets of interacties die worden gebruikt voor HoloLens 2. Ze worden onderhouden om te blijven werken op de ondersteunde apparaten. Er komt een nieuwe reeks zelfstudies die in de toekomst worden gepost, waarin wordt gedemonstreerd hoe u kunt ontwikkelen voor HoloLens 2. Deze kennisgeving wordt bijgewerkt met een koppeling naar deze zelfstudies wanneer deze worden gepost.


Schermopname van een voorbeeld van een Windows Mixed Reality V R.Schermopname van een Windows Mixed Reality V R-ervaring.

In deze cursus leert u hoe u uw Azure Media Services verbindt met een Windows Mixed Reality VR-ervaring om het afspelen van 360 graden video op immersive headsets mogelijk te maken.

Azure Media Services is een verzameling services waarmee u videostreamingservices van uitzendkwaliteit krijgt om een groter publiek te bereiken op de populairste mobiele apparaten van vandaag. Ga naar de pagina Azure Media Services voor meer informatie.

Nadat u deze cursus hebt voltooid, hebt u een mixed reality immersive headset-toepassing, die het volgende kan doen:

  1. Haal een video van 360 graden op uit een Azure-opslag via de Azure Media Service.

  2. De opgehaalde 360-gradenvideo weergeven binnen een Unity-scène.

  3. Navigeer tussen twee scènes, met twee verschillende video's.

In uw toepassing bepaalt u zelf hoe u de resultaten integreert met uw ontwerp. Deze cursus is ontworpen om u te leren hoe u een Azure-service kunt integreren met uw Unity-project. Het is uw taak om de kennis die u uit deze cursus opdoet te gebruiken om uw mixed reality-toepassing te verbeteren.

Ondersteuning voor apparaten

Cursus HoloLens Immersive headsets
MR en Azure 306: Video streamen ✔️

Vereisten

Notitie

Deze zelfstudie is bedoeld voor ontwikkelaars die basiservaring hebben met Unity en C#. Houd er ook rekening mee dat de vereisten en schriftelijke instructies in dit document overeenkomen met wat is getest en geverifieerd op het moment van schrijven (mei 2018). U bent vrij om de nieuwste software te gebruiken, zoals vermeld in het artikel over het installeren van de hulpprogramma's, hoewel niet mag worden aangenomen dat de informatie in deze cursus perfect overeenkomt met wat u in nieuwere software vindt dan wat hieronder wordt vermeld.

Voor deze cursus raden we de volgende hardware en software aan:

Voordat u begint

  1. Om problemen met het bouwen van dit project te voorkomen, wordt u sterk aangeraden het project te maken dat in deze zelfstudie wordt vermeld in een hoofdmap of een bijna-hoofdmap (lange mappaden kunnen problemen veroorzaken tijdens het bouwen).

  2. Stel uw Mixed Reality Immersive Headset in en test deze.

    Notitie

    Voor deze cursus hebt u geen bewegingscontrollers nodig. Als u ondersteuning nodig hebt bij het instellen van de Immersive Headset, klikt u op de koppeling voor het instellen van Windows Mixed Reality.

Hoofdstuk 1: Azure Portal: het Azure Storage-account maken

Als u de Azure Storage-service wilt gebruiken, moet u een opslagaccount maken en configureren in de Azure Portal.

  1. Meld u aan bij Azure Portal.

    Notitie

    Als u nog geen Azure-account hebt, moet u er een maken. Als u deze zelfstudie volgt in een leslokaal- of labsituatie, vraagt u uw docent of een van de docenten om hulp bij het instellen van uw nieuwe account.

  2. Zodra u bent aangemeld, klikt u op Opslagaccounts in het menu links.

    Schermopname van het menu van Azure Portal. Opslagaccounts is gemarkeerd.

  3. Klik op het tabblad Opslagaccounts op Toevoegen.

    Schermopname van het dialoogvenster Opslagaccount. Toevoegen is gemarkeerd.

  4. Op het tabblad Opslagaccount maken :

    1. Voeg een naam in voor uw account. Houd er rekening mee dat dit veld alleen cijfers en kleine letters accepteert.

    2. Bij Implementatiemodel selecteert u Resource manager.

    3. Selecteer Bij Soort account de optie Opslag (algemeen gebruik v1).

    4. Bij Prestaties selecteert u Standaard.*

    5. Selecteer lokaal redundante opslag (LRS) bij Replicatie.

    6. Laat Veilige overdracht vereist staan op Uitgeschakeld.

    7. Selecteer een Abonnement.

    8. Kies een resourcegroep of maak een nieuwe. Een resourcegroep biedt een manier om een verzameling Azure-assets te bewaken, toegang te beheren, in te richten en facturering te beheren.

    9. Bepaal de locatie voor uw resourcegroep (als u een nieuwe resourcegroep maakt). De locatie bevindt zich idealiter in de regio waar de toepassing wordt uitgevoerd. Sommige Azure-assets zijn alleen beschikbaar in bepaalde regio's.

  5. U moet bevestigen dat u de voorwaarden hebt begrepen die van toepassing zijn op deze Service.

    Schermopname van de pagina Opslagaccount maken.

  6. Nadat u op Maken hebt geklikt, moet u wachten tot de service is gemaakt. Dit kan een minuut duren.

  7. Er wordt een melding weergegeven in de portal zodra het service-exemplaar is gemaakt.

    Schermopname van de melding dat de implementatie is voltooid.

  8. Op dit punt hoeft u de resource niet te volgen, maar gaat u gewoon naar het volgende hoofdstuk.

Hoofdstuk 2: De Azure-portal: de Media Service maken

Als u de Azure Media Service wilt gebruiken, moet u een exemplaar van de service configureren dat beschikbaar moet worden gesteld aan uw toepassing (waarbij de accounthouder een Beheer moet zijn).

  1. Klik in de Azure-portal op Een resource maken in de linkerbovenhoek en zoek naar Media Service en druk op Enter. De resource die u wilt gebruiken, heeft momenteel een roze pictogram; klik hierop om een nieuwe pagina weer te geven.

    Schermopname van Azure Portal. De optie Media Services is gemarkeerd.

  2. De nieuwe pagina bevat een beschrijving van de Media Service. Klik linksonder in deze prompt op de knop Maken om een koppeling met deze service te maken.

    Schermopname van Azure Portal. De knop Maken is gemarkeerd.

  3. Zodra u op Een venster maken hebt geklikt, wordt weergegeven waar u enkele details over uw nieuwe Media Service moet opgeven:

    1. Voeg de gewenste accountnaam in voor dit service-exemplaar.

    2. Selecteer een Abonnement.

    3. Kies een resourcegroep of maak een nieuwe. Een resourcegroep biedt een manier om een verzameling Azure-assets te bewaken, toegang te beheren, in te richten en facturering te beheren. Het wordt aanbevolen om alle Azure-services die zijn gekoppeld aan één project (bijvoorbeeld deze labs) onder een gemeenschappelijke resourcegroep te houden.

    Als u meer wilt lezen over Azure-resourcegroepen, volgt u deze koppeling over het beheren van Azure-resourcegroepen.

    1. Bepaal de locatie voor uw resourcegroep (als u een nieuwe resourcegroep maakt). De locatie bevindt zich idealiter in de regio waar de toepassing wordt uitgevoerd. Sommige Azure-assets zijn alleen beschikbaar in bepaalde regio's.

    2. Klik voor de sectie Opslagaccount op de sectie Selecteer... en klik vervolgens op het opslagaccount dat u in het laatste hoofdstuk hebt gemaakt.

    3. U moet ook bevestigen dat u de voorwaarden hebt begrepen die van toepassing zijn op deze Service.

    4. Klik op Create.

      Schermopname van de pagina Media Service-account maken.

  4. Nadat u op Maken hebt geklikt, moet u wachten tot de service is gemaakt. Dit kan een minuut duren.

  5. Er wordt een melding weergegeven in de portal zodra het service-exemplaar is gemaakt.

    Schermopname van het meldingspictogram in het portalmenu.

  6. Klik op de melding om uw nieuwe service-exemplaar te verkennen.

    Schermopname van de melding voor een geslaagde implementatie.

  7. Klik op de knop Ga naar resource in de melding om uw nieuwe service-exemplaar te verkennen.

  8. Klik op de nieuwe mediaservicepagina in het deelvenster aan de linkerkant op de koppeling Assets , die zich ongeveer halverwege bevindt.

  9. Klik op de volgende pagina in de linkerbovenhoek van de pagina op Uploaden.

    Schermopname van de pagina Assets. De opties Uploaden en Assets zijn gemarkeerd.

  10. Klik op het mappictogram om door uw bestanden te bladeren en selecteer de eerste 360-video die u wilt streamen.

    U kunt deze koppeling volgen om een voorbeeldvideo te downloaden.

    Schermopname van de pagina een videoasset uploaden.

Waarschuwing

Lange bestandsnamen kunnen een probleem met de encoder veroorzaken: om ervoor te zorgen dat video's geen problemen hebben, kunt u de lengte van de namen van uw videobestanden verkorten.

  1. De voortgangsbalk wordt groen wanneer het uploaden van de video is voltooid.

    Schermopname van de voortgangsbalk voor het uploaden van een videoasset.

  2. Klik op de bovenstaande tekst (yourservicename - Assets) om terug te keren naar de pagina Assets .

  3. U ziet dat uw video is geüpload. Klik erop.

    Schermopname van de pagina Assets. Video 1 punt M P 4 is gemarkeerd.

  4. Op de pagina waarnaar u wordt omgeleid, ziet u gedetailleerde informatie over uw video. Als u uw video wilt kunnen gebruiken, moet u deze coderen door op de knop Coderen linksboven op de pagina te klikken.

    Schermopname van de assetpagina. De knop Coderen is gemarkeerd.

  5. Aan de rechterkant wordt een nieuw deelvenster weergegeven, waar u coderingsopties voor uw bestand kunt instellen. Stel de volgende eigenschappen in (sommige zijn al standaard ingesteld):

    1. Naam van media-encoder Media Encoder Standard

    2. Encoding preset Content Adaptive Multiple Bitrate MP4

    3. Taaknaam Media Encoder Standard verwerking van Video1.mp4

    4. NaamVideo1.mp4 van de media-asset -- Media Encoder Standard gecodeerd

      Schermopname van de pagina Een asset coderen.

  6. Klik op de knop Maken.

  7. U ziet een balk waaraan de coderingstaak is toegevoegd. Klik op die balk en er wordt een deelvenster weergegeven met daarin de voortgang van de codering.

    Schermopname van de kennisgevingsbalk met het label coderingstaak toegevoegd.

    Schermopname van de pagina encoderverwerking.

  8. Wacht tot de taak is voltooid. Als u klaar bent, kunt u het paneel sluiten met de 'X' rechtsboven in dat paneel.

    Schermopname van de voortgangsbalk met de status voltooid.

    Schermopname van het bovenste menu van de verwerkingspagina van de mediacoder.

    Belangrijk

    De tijd die dit kost, is afhankelijk van de bestandsgrootte van uw video. Dit proces kan behoorlijk wat tijd in beslag nemen.

  9. Nu de gecodeerde versie van de video is gemaakt, kunt u deze publiceren om deze toegankelijk te maken. Klik hiervoor op de blauwe koppeling Assets om terug te gaan naar de pagina assets.

    Schermopname van Azure Portal. De koppeling assets is gemarkeerd.

  10. U ziet uw video samen met een andere, die van assettype multi-bitrate MP4 is.

    Schermopname van het menu Microsoft Azure-assets.

    Notitie

    Mogelijk ziet u dat de nieuwe asset, naast uw eerste video, Onbekend is en '0' bytes heeft voor de grootte. Vernieuw gewoon het venster om het bij te werken.

  11. Klik op deze nieuwe asset.

    Schermopname van de map met assets.

  12. U ziet een paneel dat vergelijkbaar is met het deelvenster dat u eerder hebt gebruikt. Dit is alleen een ander activum. Klik op de knop Publiceren in het midden bovenaan de pagina.

    Schermopname van de bovenste menubalk. De knop Publiceren is gemarkeerd.

  13. U wordt gevraagd om een locator in te stellen, het toegangspunt, voor bestanden in uw assets. Stel voor uw scenario de volgende eigenschappen in:

    1. Locatortype>Progressief.

    2. De datum en tijd worden voor u ingesteld, vanaf uw huidige datum, tot een tijd in de toekomst (in dit geval honderd jaar). Laat ongewijzigd of wijzig het naar wens.

    Notitie

    Ga naar de Documentatie voor Azure Media Services voor meer informatie over locators en wat u kunt kiezen.

  14. Klik onderaan dat deelvenster op de knop Toevoegen .

    Schermopname van mapvermeldingen met het dialoogvenster Asset om te publiceren.

  15. Uw video is nu gepubliceerd en kan worden gestreamd met behulp van het eindpunt. Verderop op de pagina bevindt zich de sectie Bestanden . Hier worden de verschillende gecodeerde versies van uw video weergegeven. Selecteer de hoogst mogelijke resolutie (in de onderstaande afbeelding is dit het bestand 1920x960), waarna een deelvenster aan de rechterkant wordt weergegeven. Daar vindt u een Download-URL. Kopieer dit eindpunt zoals u het later in uw code gaat gebruiken.

    Schermopname van de sectie Microsoft Azure Files.

    Schermopname van de pagina assetgegevens.

    Notitie

    U kunt ook op de knop Afspelen drukken om uw video af te spelen en te testen.

  16. U moet nu de tweede video uploaden die u in dit lab gaat gebruiken. Volg de bovenstaande stappen en herhaal hetzelfde proces voor de tweede video. Zorg ervoor dat u ook het tweede eindpunt kopieert. Gebruik de volgende koppeling om een tweede video te downloaden.

  17. Zodra beide video's zijn gepubliceerd, bent u klaar om naar het volgende hoofdstuk te gaan.

Hoofdstuk 3- Het Unity-project instellen

Het volgende is een typische configuratie voor het ontwikkelen met de Mixed Reality en is als zodanig een goede sjabloon voor andere projecten.

  1. Open Unity en klik op Nieuw.

    Schermopname van het tabblad Unity-projecten. De knop Nieuw is gemarkeerd.

  2. U moet nu een Unity Project-naam opgeven, MR_360VideoStreaming invoegen. Zorg ervoor dat het projecttype is ingesteld op 3D. Stel de locatie in op een locatie die geschikt is voor u (houd er rekening mee dat dichter bij hoofdmappen beter is). Klik vervolgens op Project maken.

    Schermopname van de pagina Nieuwe Unity-projecten.

  3. Als Unity is geopend, is het de moeite waard om te controleren of de standaardscripteditor is ingesteld op Visual Studio. Ga naar Voorkeuren bewerken en navigeer vervolgens vanuit het nieuwe venster naar Externe hulpprogramma's. Wijzig De externe scripteditor in Visual Studio 2017. Sluit het venster Voorkeuren .

    Schermopname van het menu van de externe scripteditor. Visual Studio 2017 is geselecteerd.

  4. Ga vervolgens naar Instellingen voor bestandsbuild en schakel het platform over naar Universeel Windows-platform door op de knop Platform wisselen te klikken.

  5. Zorg er ook voor dat:

    1. Doelapparaat is ingesteld op Elk apparaat.

    2. Buildtype is ingesteld op D3D.

    3. SDK is ingesteld op Laatst geïnstalleerd.

    4. Visual Studio-versie is ingesteld op Laatst geïnstalleerd.

    5. Bouwen en uitvoeren is ingesteld op Lokale computer.

    6. U hoeft zich geen zorgen te maken over het nu instellen van scènes , omdat u deze later gaat instellen.

    7. De overige instellingen moeten voorlopig als standaard worden ingesteld.

      Schermopname van het scherm met build-instellingen van Unity.

  6. Klik in het venster Build-instellingen op de knop Spelerinstellingen . Hiermee opent u het gerelateerde deelvenster in de ruimte waar de Inspector zich bevindt.

  7. In dit deelvenster moeten enkele instellingen worden geverifieerd:

    1. Op het tabblad Overige instellingen :

      1. ScriptingRuntime-versie moet stabiel zijn (equivalent van.NET 3.5).

      2. De back-end van scripts moet .NET zijn.

      3. Api-compatibiliteitsniveau moet .NET 4.6 zijn.

        Schermopname van de pagina Instellingen voor Universeel Windows-platform.

    2. Verderop in het deelvenster, in XR-instellingen (onder Publicatie-instellingen), vinkt u Virtual Reality Ondersteund aan en controleert u of de Windows Mixed Reality SDK is toegevoegd.

      Schermopname van het instellingenscherm van Unity X R.

    3. Schakel op het tabblad Publicatie-instellingen onder Mogelijkheden het volgende in:

      • InternetClient

        Schermopname van het scherm Mogelijkheden. Internetclient is ingeschakeld.

  8. Zodra u deze wijzigingen hebt aangebracht, sluit u het venster Build-instellingen .

  9. Sla uw projectbestandop. Project opslaan.

Hoofdstuk 4- Het InsideOutSphere Unity-pakket importeren

Belangrijk

Als u het Unity Set up-onderdeel van deze cursus wilt overslaan en direct verder wilt gaan met code, kunt u dit .unitypackage downloaden, het in uw project importeren als een aangepast pakket en vervolgens doorgaan vanaf Hoofdstuk 5. U moet nog steeds een Unity-project maken.

Voor deze cursus moet u een Unity Asset-pakket met de naam InsideOutSphere.unitypackage downloaden.

How-to import the unitypackage:

  1. Met het Unity-dashboard voor u, klikt u op Assets in het menu bovenaan het scherm en klikt u vervolgens op Aangepast pakket > importeren.

    Schermopname van het menu assets. Het menu Importpakket is geopend. Aangepast pakket is geselecteerd.

  2. Gebruik de bestandskiezer om het pakket InsideOutSphere.unitypackage te selecteren en klik op Openen. Er wordt een lijst met onderdelen voor deze asset weergegeven. Bevestig het importeren door op Importeren te klikken.

    Schermopname van het scherm Unity Package importeren.

  3. Zodra het importeren is voltooid, ziet u dat er drie nieuwe mappen, Materialen, Modellen en Prefabs, zijn toegevoegd aan de map Assets . Dit type mapstructuur is typisch voor een Unity-project.

    Schermopname van de map assets.

    1. Open de map Modellen en u ziet dat het InsideOutSphere-model is geïmporteerd.

    2. In de map Materialen vindt u het InsideOutSpheres-materiaallambert1, samen met het materiaal ButtonMaterial, dat wordt gebruikt door de GazeButton, die u binnenkort zult zien.

    3. De map Prefabs bevat de prefab InsideOutSphere die zowel het InsideOutSphere-model als de GazeButton bevat.

    4. Er is geen code opgenomen. U schrijft de code door deze cursus te volgen.

  4. Selecteer in de hiërarchie het object Hoofdcamera en werk de volgende onderdelen bij:

    1. Transformeren

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

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

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

    2. Camera

      1. Markeringen wissen: effen kleur.

      2. Knipvlakken: In de buurt: 0.1, Ver: 6.

        Schermopname van het scherm Inspector.

  5. Navigeer naar de map Prefab en sleep de prefab InsideOutSphere naar het deelvenster Hiërarchie .

    Schermopname van het mapmenu Prefab en de ontwikkelomgeving.

  6. Vouw het object InsideOutSphere in de hiërarchie uit door op de kleine pijl ernaast te klikken. Eronder ziet u een onderliggend object met de naam GazeButton. Dit wordt gebruikt om scènes en dus video's te wijzigen.

    Schermopname van het tabblad Hiërarchie.

  7. Klik in het venster Inspector op het onderdeel Transform van InsideOutSphere en zorg ervoor dat de volgende eigenschappen zijn ingesteld:

Transformeren - positie

X Y Z
0 0 0

Transformeren - Draaien

X Y Z
0 -50 0

Transformeren - Schalen

X Y Z
0 0 0

Schermopname van het scherm Inspector geopend voor Inside Out Sphere.

  1. Klik op het onderliggende object GazeButton en stel de transformatie als volgt in:

Transformeren - positie

X Y Z
3,6 1.3 0

Transformeren - Draaien

X Y Z
0 0 0

Transformeren - Schalen

X Y Z
1 1 1

Schermopname van het geopende scènetabblad.

Hoofdstuk 5: De videocontrollerklasse maken

De VideoController-klasse fungeert als host voor de twee video-eindpunten die worden gebruikt voor het streamen van de inhoud van de Azure Media Service.

Ga als volgt te werk om deze klasse te maken:

  1. Klik met de rechtermuisknop in de map Asset in het deelvenster Project en klik op Map maken>. Noem de map Scripts.

    Schermopname van het menu assetmap. Het menu Maken is geopend en de map is geselecteerd.

    Schermopname van het tabblad Project. De map Assets is geselecteerd.

  2. Dubbelklik op de map Scripts om deze te openen.

  3. Klik met de rechtermuisknop in de map en klik vervolgens op C#-script maken>. Geef het script de naam VideoController.

    Schermopname van het bestand met de naam Video Controller.

  4. Dubbelklik op het nieuwe VideoController-script om het te openen met Visual Studio 2017.

    Schermopname van de code voor het videocontrollerbestand.

  5. Werk de naamruimten boven aan het codebestand als volgt bij:

    using System.Collections;
    using UnityEngine;
    using UnityEngine.SceneManagement;
    using UnityEngine.Video;
    
  6. Voer de volgende variabelen in de klasse VideoController in, samen met de methode 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 is het tijd om de eindpunten uit uw Azure Media Service-video's in te voeren:

    1. De eerste in de variabele video1endpoint .

    2. De tweede in de variabele video2endpoint .

    Waarschuwing

    Er is een bekend probleem met het gebruik van https in Unity, met versie 2017.4.1f1. Als de video's een fout geven bij het afspelen, kunt u in plaats daarvan http gebruiken.

  8. Vervolgens moet de methode Start() worden bewerkt. Deze methode wordt geactiveerd telkens wanneer de gebruiker van scène wisselt (waardoor de video wordt overgeschakeld) door te kijken naar de knop Gaze.

        // Use this for initialization
        void Start()
        {
            Application.runInBackground = true;
            StartCoroutine(PlayVideo());
        }
    
  9. Voeg na de methode Start() de methode PlayVideo()IEnumerator in, die wordt gebruikt om video's naadloos te starten (zodat er geen hapering wordt waargenomen).

        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. De laatste methode die u nodig hebt voor deze klasse is de methode ChangeScene(), die wordt gebruikt om tussen scènes te wisselen.

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

    Tip

    De methode ChangeScene() maakt gebruik van een handige C#-functie met de naam Voorwaardelijke operator. Hierdoor kunnen voorwaarden worden gecontroleerd en vervolgens waarden worden geretourneerd op basis van het resultaat van de controle, allemaal binnen één instructie. Volg deze koppeling voor meer informatie over voorwaardelijke operator.

  11. Sla uw wijzigingen op in Visual Studio voordat u terugkeert naar Unity.

  12. Ga terug naar de Unity Editor en sleep de klasse VideoController [van]{.underline} de map Scripts naar het object Hoofdcamera in het deelvenster Hiërarchie .

  13. Klik op de hoofdcamera en kijk naar het deelvenster Inspector. U ziet dat er binnen het zojuist toegevoegde scriptonderdeel een veld met een lege waarde is. Dit is een referentieveld, dat is gericht op de openbare variabelen in uw code.

  14. Sleep het object InsideOutSphere van het deelvenster Hierarchy naar de sleuf Sphere , zoals wordt weergegeven in de onderstaande afbeelding.

    Schermopname van het hiërarchiemenu. Hoofdcamera is geselecteerd.Schermopname van de Sphere-sleuf.

Hoofdstuk 6- De Gaze-klasse maken

Deze klasse is verantwoordelijk voor het maken van een Raycast die naar voren wordt geprojecteerd vanaf de hoofdcamera, om te detecteren naar welk object de gebruiker kijkt. In dit geval moet de Raycast bepalen of de gebruiker het object GazeButton in de scène bekijkt en een gedrag activeren.

Deze klasse maken:

  1. Ga naar de map Scripts die u eerder hebt gemaakt.

  2. Klik met de rechtermuisknop in het deelvenster Project op C#-script maken. Noem het script Gaze.

  3. Dubbelklik op het nieuwe Gaze-script om het te openen met Visual Studio 2017.

  4. Zorg ervoor dat de volgende naamruimte boven aan het script staat en verwijder alle andere:

    using UnityEngine;
    
  5. Voeg vervolgens de volgende variabelen toe in de klasse 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. Code voor de methoden Awake() en Start() moet nu worden toegevoegd.

        private void Awake()
        {
            // Set this class to behave similar to singleton 
            instance = this;
        }
    
        void Start()
        {
            FocusedGameObject = null;
        }
    
  7. Voeg de volgende code toe in de methode Update() om een Raycast te projecteren en de doeltreffer te detecteren:

        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. Sla uw wijzigingen op in Visual Studio voordat u terugkeert naar Unity.

  9. Klik en sleep de klasse Gaze van de map Scripts naar het object Hoofdcamera in het deelvenster Hiërarchie .

Hoofdstuk 7- De twee Unity-scènes instellen

Het doel van dit hoofdstuk is het instellen van de twee scènes, die elk een video hosten om te streamen. U gaat de scène dupliceren die u al hebt gemaakt, zodat u deze niet opnieuw hoeft in te stellen, maar vervolgens de nieuwe scène bewerkt, zodat het object GazeButton zich op een andere locatie bevindt en een ander uiterlijk heeft. Dit is om te laten zien hoe u tussen scènes kunt wisselen.

  1. Ga hiervoor naar Bestand > Scène opslaan als.... Er wordt een venster voor opslaan weergegeven. Klik op de knop Nieuwe map .

    Hoofdstuk 7- De twee Unity-scènes instellen

  2. Geef de map de naam Scènes.

  3. Het venster Scène opslaan blijft geopend. Open de zojuist gemaakte map Scenes .

  4. Typ VideoScene1 in het tekstveld Bestandsnaam: en druk op Opslaan.

  5. Ga terug naar Unity, open de map Scenes en klik met de linkermuisknop op uw VideoScene1-bestand . Gebruik het toetsenbord en druk op Ctrl + D om die scène te dupliceren

    Tip

    De opdracht Dupliceren kan ook worden uitgevoerd door naar Duplicaat bewerken >te gaan.

  6. Unity zal het nummer van de scènenamen automatisch verhogen, maar controleer het toch om ervoor te zorgen dat het overeenkomt met de eerder ingevoegde code.

    U moet VideoScene1 en VideoScene2 hebben.

  7. Ga met uw twee scènes naar Instellingen voor het > maken van bestanden. Terwijl het venster Build-instellingen is geopend, sleept u de scènes naar de sectie Scènes in Build .

    Schermopname van het venster Build Settings.

    Tip

    U kunt beide scènes selecteren in de map Scènes door de ctrl-knop ingedrukt te houden en vervolgens met de linkermuisknop op elke scène te klikken en ten slotte beide naar de andere te slepen.

  8. Sluit het venster Build Settings en dubbelklik op VideoScene2.

  9. Terwijl de tweede scène is geopend, klikt u op het onderliggende object GazeButton van de InsideOutSphere en stelt u de transformatie als volgt in:

Transformeren - positie

X Y Z
0 1.3 3,6

Transformeren - Draaien

X Y Z
0 0 0

Transformeren - Schalen

X Y Z
1 1 1
  1. Terwijl het kind GazeButton nog steeds is geselecteerd, kijkt u naar de inspector en naar het mesh-filter. Klik op het kleine doel naast het mesh-verwijzingsveld:

    Schermopname van het controlescherm voor De knop Gaze.

  2. Er wordt een pop-upvenster Mesh selecteren weergegeven. Dubbelklik op het kubus-mesh in de lijst met assets.

    Schermopname van het pop-upvenster Mesh selecteren.

  3. Het mesh-filter wordt bijgewerkt en is nu een kubus. Klik nu op het tandwielpictogram naast Sphere Collider en klik op Remove Component om de collider uit dit object te verwijderen.

    Schermopname van het menu Sphere Collider. Onderdeel verwijderen is geselecteerd.

  4. Terwijl de GazeButton nog steeds is geselecteerd, klikt u op de knop Component toevoegen onderaan de Inspector. Typ in het zoekveld het vaken Box Collider is een optie. Klik hierop om een Box Collider toe te voegen aan het object GazeButton .

    Schermopname van het zoekvak Component toevoegen.

  5. De GazeButton is nu gedeeltelijk bijgewerkt om er anders uit te zien, maar u maakt nu een nieuw materiaal, zodat het er heel anders uitziet en gemakkelijker te herkennen is als een ander object dan het object in de eerste scène.

  6. Navigeer naar de map Materialen in het deelvenster Project. Dupliceer het KnopmateriaalMateriaal (druk op Ctrl + D op het toetsenbord of klik met de linkermuisknop op materiaal en selecteer dupliceren in de menuoptie Bestand bewerken).

    Schermopname van de map Materialen op het projecttabblad.Schermopname van het menu Bewerken met duplicaat geselecteerd.

  7. Selecteer het nieuwe Knopmateriaalmateriaal (hier met de naam ButtonMaterial 1) en klik in de Inspector op het kleurvenster Albedo . Er wordt een pop-upvenster weergegeven waarin u een andere kleur kunt selecteren (kies de gewenste kleur) en sluit vervolgens de pop-up. Het Materiaal is een eigen exemplaar en verschilt van het origineel.

    Schermopname van het pop-upvenster voor kleurselectie.

  8. Sleep het nieuwe materiaal naar het gazebutton-onderliggend element om het uiterlijk volledig bij te werken, zodat het gemakkelijk te onderscheiden is van de knop voor de eerste scènes.

    Schermopname van het scènetabblad van de projecteditor.

  9. Op dit moment kunt u het project testen in de editor voordat u het UWP-project bouwt.

    • Druk op de knop Afspelen in de Editor en draag uw headset.

      Schermopname van de knoppen afspelen, onderbreken en overslaan. De knop Afspelen is gemarkeerd.

  10. Bekijk de twee GazeButton-objecten om te schakelen tussen de eerste en tweede video.

Hoofdstuk 8- De UWP-oplossing bouwen

Zodra u ervoor hebt gezorgd dat de editor geen fouten bevat, bent u klaar om te bouwen.

Ga als volgende te werk om te bouwen:

  1. Sla de huidige scène op door op Bestand > opslaan te klikken.

  2. Schakel het selectievakje Unity C#-projecten in (dit is belangrijk omdat u hiermee de klassen kunt bewerken nadat de build is voltooid).

  3. Ga naar Instellingen voor het maken >van bestanden en klik op Build.

  4. U wordt gevraagd de map te selecteren waarin u de oplossing wilt bouwen.

  5. Maak een MAP BUILDS en maak in die map een andere map met de juiste naam van uw keuze.

  6. Klik op de nieuwe map en klik vervolgens op Map selecteren, dus als u die map wilt kiezen, kunt u de build op die locatie starten.

    Schermopname van de map BUILDS gemarkeerd.Schermopname van de map Build voor videostreaming gemarkeerd.

  7. Zodra Unity klaar is met bouwen (dit kan enige tijd duren), wordt er een Bestandenverkenner venster geopend op de locatie van uw build.

Hoofdstuk 9 - Implementeren op lokale computer

Zodra de build is voltooid, wordt er een Bestandenverkenner venster weergegeven op de locatie van uw build. Open de map die u hebt genoemd en die u hebt gemaakt en dubbelklik vervolgens op het oplossingsbestand (.sln) in die map om uw oplossing te openen met Visual Studio 2017.

Het enige wat u nog hoeft te doen, is uw app implementeren op uw computer (of lokale computer).

Implementeren op lokale computer:

  1. Open in Visual Studio 2017 het oplossingsbestand dat zojuist is gemaakt.

  2. Selecteer in solution platformx86, Lokale computer.

  3. Selecteer foutopsporing in oplossingsconfiguratie.

    Schermopname van het menu Oplossingsconfiguratie.

  4. U moet nu alle pakketten herstellen naar uw oplossing. Klik met de rechtermuisknop op uw oplossing en klik op NuGet-pakketten herstellen voor oplossing...

    Notitie

    Dit wordt gedaan omdat de pakketten die Unity heeft gebouwd, moeten worden toegepast om te werken met uw lokale computerreferenties.

  5. Ga naar het menu Bouwen en klik op Oplossing implementeren om de toepassing naar uw computer te sideloaden. Visual Studio bouwt en implementeert uw toepassing vervolgens.

  6. Uw app wordt nu weergegeven in de lijst met geïnstalleerde apps, klaar om te worden gestart.

    Schermopname van de lijst met geïnstalleerde apps.

Wanneer u de Mixed Reality-toepassing uitvoert, bevindt u zich binnen het InsideOutSphere-model dat u in uw app hebt gebruikt. Deze bol is waar de video naartoe wordt gestreamd, wat een 360-graden weergave biedt van de binnenkomende video (die voor dit soort perspectief is gefilmd). Wees niet verbaasd als het een paar seconden duurt om de video te laden, uw app is onderhevig aan uw beschikbare internetsnelheid, omdat de video moet worden opgehaald en vervolgens gedownload, dus om in uw app te streamen. Als je klaar bent, verander je scènes en open je tweede video door naar de rode bol te staren! Ga dan gerust terug met behulp van de blauwe kubus in de tweede scène!

Uw voltooide Azure Media Service-toepassing

Gefeliciteerd, u hebt een mixed reality-app gebouwd die gebruikmaakt van Azure Media Service om 360 video's te streamen.

Schermopname van een voorbeeld van een mixed reality-app.

Schermopname van een voorbeeld van een mixed reality-app.

Bonusoefeningen

Oefening 1

Het is heel goed mogelijk om slechts één scène te gebruiken om video's te wijzigen in deze zelfstudie. Experimenteer met uw toepassing en maak er één scène van. Misschien voegt u zelfs nog een video toe aan de mix.

Oefening 2

Experimenteer met Azure en Unity en probeer de mogelijkheid te implementeren voor de app om automatisch een video met een andere bestandsgrootte te selecteren, afhankelijk van de sterkte van een internetverbinding.