HoloLens (1. Generation) und Azure 306: Streamingvideo


Hinweis

Die Tutorials der Mixed Reality Academy wurden im Hinblick auf HoloLens (1. Gen.) und immersive Mixed Reality-Headsets entworfen. Daher halten wir es für wichtig, diese Tutorials für Entwickler verfügbar zu halten, die noch nach Anleitung beim Entwickeln für diese Geräte suchen. Diese Tutorials werden nicht mit den neuesten Toolsets oder Interaktionen aktualisiert, die für HoloLens 2 verwendet werden. Sie werden gewartet, um weiterhin auf den unterstützten Geräten zu funktionieren. Es wird eine neue Reihe von Lernprogrammen geben, die zukünftig veröffentlicht werden, die zeigen, wie sie für HoloLens 2 entwickelt werden. Diese Benachrichtigung wird mit einem Link zu diesen Lernprogrammen aktualisiert, wenn sie veröffentlicht werden.


final product -startfinal product -start

In diesem Kurs erfahren Sie, wie Sie Ihre Azure Media Services mit einer Windows Mixed Reality VR-Erfahrung verbinden, um die Streaming-Videowiedergabe mit 360 Grad auf immersiven Headsets zu ermöglichen.

Azure Media Services sind eine Sammlung von Diensten, mit denen Sie Videostreamingdienste mit Übertragungsqualität erreichen können, um größere Zielgruppen auf den beliebtesten mobilen Geräten zu erreichen. Weitere Informationen finden Sie auf der Azure Media Services Seite.

Nachdem Sie diesen Kurs abgeschlossen haben, verfügen Sie über eine immersive Mixed Reality-Headset-Anwendung, die folgende Aktionen ausführen kann:

  1. Rufen Sie ein 360-Grad-Video von einem Azure Storage über den Azure Media Service ab.

  2. Zeigen Sie das abgerufene 360-Grad-Video in einer Unity-Szene an.

  3. Navigieren Sie zwischen zwei Szenen mit zwei verschiedenen Videos.

In Ihrer Anwendung liegt es ihnen bei der Integration der Ergebnisse in Ihr Design. Dieser Kurs soll Ihnen vermitteln, wie Sie einen Azure-Dienst in Ihre Unity-Project integrieren. Es ist Ihre Aufgabe, das Wissen zu nutzen, das Sie aus diesem Kurs gewinnen, um Ihre Mixed Reality-Anwendung zu verbessern.

Geräteunterstützung

Kurs HoloLens Immersive Headsets
MR und Azure 306: Streamen von Video ✔️

Voraussetzungen

Hinweis

Dieses Lernprogramm wurde für Entwickler entwickelt, die grundlegende Erfahrungen mit Unity und C# haben. Bitte beachten Sie auch, dass die Voraussetzungen und schriftlichen Anweisungen in diesem Dokument darstellen, was zum Zeitpunkt des Schreibens getestet und überprüft wurde (Mai 2018). Sie sind kostenlos, die neueste Software zu verwenden, wie im Artikel zur Installation der Tools aufgeführt, aber es sollte nicht angenommen werden, dass die Informationen in diesem Kurs perfekt mit dem übereinstimmen, was Sie in neuerer Software finden werden als die unten aufgeführten.

Wir empfehlen die folgende Hardware und Software für diesen Kurs:

Vorbereitung

  1. Um probleme beim Erstellen dieses Projekts zu vermeiden, wird dringend empfohlen, dass Sie das in diesem Lernprogramm erwähnte Projekt in einem Stamm- oder Nahstammordner erstellen (lange Ordnerpfade können probleme beim Buildzeit verursachen).

  2. Richten Sie Ihr Mixed Reality immersives Headset ein und testen Sie sie.

    Hinweis

    Für diesen Kurs benötigen Sie keine Bewegungscontroller. Wenn Sie Unterstützung beim Einrichten des immersiven Headsets benötigen, klicken Sie bitte auf den Link zum Einrichten Windows Mixed Reality.

Kapitel 1 – Das Azure-Portal: Erstellen des Azure Storage Kontos

Um den Azure Storage Dienst zu verwenden, müssen Sie ein Storage Konto im Azure-Portal erstellen und konfigurieren.

  1. Melden Sie sich beim Azure-Portal an.

    Hinweis

    Wenn Sie noch kein Azure-Konto haben, müssen Sie ein Konto erstellen. Wenn Sie diesem Lernprogramm in einer Unterrichts- oder Laborsituation folgen, bitten Sie Ihren Kursleiter oder einen der Proktoren, hilfe beim Einrichten Ihres neuen Kontos.

  2. Sobald Sie angemeldet sind, klicken Sie im linken Menü auf Storage Konten.

    Azure Storage Account Setup

  3. Klicken Sie auf der Registerkarte Storage Konten auf "Hinzufügen".

    Azure Storage Account Setup

  4. Auf der Registerkarte "Speicherkonto erstellen ":

    1. Fügen Sie einen Namen für Ihr Konto ein, beachten Sie, dass dieses Feld nur Zahlen akzeptiert, und Kleinbuchstaben.

    2. Wählen Sie für das Bereitstellungsmodellden Ressourcen-Manager aus.

    3. Wählen Sie für "Kontotyp" Storage (allgemeine Version v1) aus.

    4. Wählen Sie für "Leistung" die Option "Standard" aus.*

    5. Wählen Sie für die Replikationlokal redundanten Speicher (LRS) aus.

    6. Lassen Sie die sichere Übertragung als deaktiviert erforderlich.

    7. Wählen Sie ein Abonnementaus.

    8. Wählen Sie eine Ressourcengruppe aus, oder erstellen Sie eine neue. Eine Ressourcengruppe bietet eine Möglichkeit, die Abrechnung für eine Sammlung von Azure-Ressourcen zu überwachen, zu steuern, den Zugriff zu steuern, bereitzustellen und zu verwalten.

    9. Bestimmen Sie den Speicherort für Ihre Ressourcengruppe (wenn Sie eine neue Ressourcengruppe erstellen). Der Standort wäre idealerweise in der Region, in der die Anwendung ausgeführt wird. Einige Azure-Ressourcen sind nur in bestimmten Regionen verfügbar.

  5. Sie müssen bestätigen, dass Sie die auf diesen Dienst angewendeten Geschäftsbedingungen verstanden haben.

    Azure Storage Account Setup

  6. Nachdem Sie auf "Erstellen" geklickt haben, müssen Sie warten, bis der Dienst erstellt wird. Dies kann eine Minute dauern.

  7. Eine Benachrichtigung wird im Portal angezeigt, sobald die Dienstinstanz erstellt wurde.

    Azure Storage Account Setup

  8. An diesem Punkt müssen Sie die Ressource nicht befolgen, einfach zum nächsten Kapitel wechseln.

Kapitel 2 – Das Azure-Portal: Erstellen des Mediendiensts

Um den Azure Media Service zu verwenden, müssen Sie eine Instanz des Diensts konfigurieren, die ihrer Anwendung zur Verfügung gestellt werden soll (wobei der Kontoinhaber ein Administrator sein muss).

  1. Klicken Sie im Azure-Portal auf " Ressource erstellen" in der oberen linken Ecke, und suchen Sie nach Mediendienst, drücken Sie die EINGABETASTE. Die gewünschte Ressource weist derzeit ein rosaes Symbol auf; Klicken Sie darauf, um eine neue Seite anzuzeigen.

    The Azure Portal

  2. Die neue Seite enthält eine Beschreibung des Mediendiensts. Klicken Sie unten links neben dieser Eingabeaufforderung auf die Schaltfläche "Erstellen ", um eine Zuordnung zu diesem Dienst zu erstellen.

    The Azure Portal

  3. Nachdem Sie auf " Erstellen" geklickt haben, wird angezeigt, wo Sie einige Details zu Ihrem neuen Mediendienst angeben müssen:

    1. Fügen Sie Ihren gewünschten Kontonamen für diese Dienstinstanz ein.

    2. Wählen Sie ein Abonnementaus.

    3. Wählen Sie eine Ressourcengruppe aus, oder erstellen Sie eine neue. Eine Ressourcengruppe bietet eine Möglichkeit, die Abrechnung für eine Sammlung von Azure-Ressourcen zu überwachen, zu steuern, den Zugriff zu steuern, bereitzustellen und zu verwalten. Es wird empfohlen, alle Azure-Dienste, die einem einzelnen Projekt zugeordnet sind (z. B. diese Labs), unter einer gemeinsamen Ressourcengruppe zu halten.

    Wenn Sie mehr über Azure-Ressourcengruppen lesen möchten, folgen Sie diesem Link zum Verwalten von Azure-Ressourcengruppen.

    1. Bestimmen Sie den Speicherort für Ihre Ressourcengruppe (wenn Sie eine neue Ressourcengruppe erstellen). Der Standort wäre idealerweise in der Region, in der die Anwendung ausgeführt wird. Einige Azure-Ressourcen sind nur in bestimmten Regionen verfügbar.

    2. Klicken Sie im Abschnitt "Storage Konto" auf den Abschnitt "Bitte auswählen..." und dann auf das Storage Konto, das Sie im letzten Kapitel erstellt haben.

    3. Sie müssen auch bestätigen, dass Sie die auf diesen Dienst angewendeten Geschäftsbedingungen verstanden haben.

    4. Klicken Sie auf Erstellen.

      The Azure Portal

  4. Nachdem Sie auf "Erstellen" geklickt haben, müssen Sie warten, bis der Dienst erstellt wird. Dies kann eine Minute dauern.

  5. Eine Benachrichtigung wird im Portal angezeigt, sobald die Dienstinstanz erstellt wurde.

    The Azure Portal

  6. Klicken Sie auf die Benachrichtigung, um Ihre neue Dienstinstanz zu erkunden.

    The Azure Portal

  7. Klicken Sie in der Benachrichtigung auf die Schaltfläche " Zur Ressource wechseln ", um Ihre neue Dienstinstanz zu erkunden.

  8. Klicken Sie auf der neuen Seite "Mediendienst" innerhalb des Bereichs links auf den Link "Objekte ", der etwa halbwegs unten liegt.

  9. Klicken Sie auf der nächsten Seite in der oberen linken Ecke der Seite auf Hochladen.

    The Azure Portal

  10. Klicken Sie auf das Symbol "Ordner ", um Ihre Dateien zu durchsuchen, und wählen Sie das erste 360 Video aus, das Sie streamen möchten.

    Sie können diesem Link folgen, um ein Beispielvideo herunterzuladen.

    The Azure Portal

Warnung

Lange Dateinamen verursachen möglicherweise ein Problem mit dem Encoder: Um sicherzustellen, dass Videos keine Probleme haben, sollten Sie die Länge Ihrer Videodateinamen verkürzen.

  1. Die Statusleiste wird grün, wenn das Video das Hochladen abgeschlossen hat.

    The Azure Portal

  2. Klicken Sie auf den obigen Text (IhrServicename - Objekte), um zur Seite " Objekte " zurückzukehren.

  3. Sie werden feststellen, dass Ihr Video erfolgreich hochgeladen wurde. Klicken Sie darauf.

    The Azure Portal

  4. Die Seite, auf die Sie umgeleitet werden, zeigt Ihnen detaillierte Informationen zu Ihrem Video an. Um Ihr Video verwenden zu können, müssen Sie es codieren, indem Sie oben links auf der Seite auf die Schaltfläche "Codieren " klicken.

    The Azure Portal

  5. Ein neuer Bereich wird rechts angezeigt, wo Sie Codierungsoptionen für Ihre Datei festlegen können. Legen Sie die folgenden Eigenschaften fest (einige werden standardmäßig festgelegt):

    1. Medien-Encodername Media Encoder Standard

    2. Codierung voreingestellter Content Adaptive Multiple Bitrate MP4

    3. Auftragsname Media Encoder Standard Verarbeitung von Video1.mp4

    4. Name des AusgabemedienobjektsVideo1.mp4 - Media Encoder Standard codiert

      The Azure Portal

  6. Klicken Sie auf die Schaltfläche Erstellen .

  7. Sie werden feststellen, dass eine Leiste mit hinzugefügtem Codierungsauftrag hinzugefügt wurde, klicken Sie auf diese Leiste, und ein Panel wird mit dem darin angezeigten Codierungsfortschritt angezeigt.

    The Azure Portal

    The Azure Portal

  8. Warten Sie, bis der Auftrag abgeschlossen ist. Sobald sie fertig ist, können Sie den Bereich mit dem "X" oben rechts in diesem Bereich schließen.

    The Azure Portal

    The Azure Portal

    Wichtig

    Die Zeit, die dies dauert, hängt von der Dateigröße Ihres Videos ab. Dieser Prozess kann einige Zeit dauern.

  9. Nachdem die codierte Version des Videos erstellt wurde, können Sie es veröffentlichen, um sie barrierefrei zu machen. Klicken Sie dazu auf den blauen Link "Ressourcen ", um zur Seite "Ressourcen" zurückzukehren.

    The Azure Portal

  10. Ihr Video wird zusammen mit einem anderen Video angezeigt, das von Multi-Bitrate MP4 vom Typ "Asset Type Multi-Bitrate" ist.

    The Azure Portal

    Hinweis

    Möglicherweise stellen Sie fest, dass das neue Objekt neben Ihrem ersten Video unbekannt ist und "0" Bytes für die Größe enthält, aktualisieren Sie einfach das Fenster, um es zu aktualisieren.

  11. Klicken Sie auf dieses neue Objekt.

    The Azure Portal

  12. Sie sehen einen ähnlichen Bereich wie die zuvor verwendete, nur dies ist ein anderes Objekt. Klicken Sie auf die Schaltfläche "Veröffentlichen ", die sich oben auf der Seite befindet.

    The Azure Portal

  13. Sie werden aufgefordert, einen Locator festzulegen, der der Einstiegspunkt ist, auf Dateien in Ihren Objekten. Legen Sie für Ihr Szenario die folgenden Eigenschaften fest:

    1. Locator-Typ>Progressiver Fortschritt.

    2. Das Datum und die Uhrzeit werden für Sie von Ihrem aktuellen Datum auf eine Zeit in der Zukunft festgelegt (in diesem Fall einhundert Jahre). Lassen Sie es wie folgt, oder ändern Sie sie entsprechend.

    Hinweis

    Weitere Informationen zu Locators und dem, was Sie auswählen können, finden Sie in der Azure Media Services Dokumentation.

  14. Klicken Sie unten in diesem Bereich auf die Schaltfläche "Hinzufügen ".

    The Azure Portal

  15. Ihr Video wird jetzt veröffentlicht und kann mithilfe seines Endpunkts gestreamt werden. Weiter unten ist die Seite ein Abschnitt "Dateien ". Hier befinden sich die verschiedenen codierten Versionen Ihres Videos. Wählen Sie die höchste mögliche Auflösung aus (in der abbildung unten ist die Datei 1920x960), und dann wird ein Panel rechts angezeigt. Dort finden Sie eine Download-URL. Kopieren Sie diesen Endpunkt , während Sie ihn später in Ihrem Code verwenden.

    The Azure Portal

    The Azure Portal

    Hinweis

    Sie können auch die Schaltfläche " Wiedergeben " drücken, um Ihr Video wiederzugeben und zu testen.

  16. Sie müssen jetzt das zweite Video hochladen, das Sie in dieser Übung verwenden. Führen Sie die obigen Schritte aus, indem Sie denselben Prozess für das zweite Video wiederholen. Stellen Sie sicher, dass Sie auch den zweiten Endpunkt kopieren. Verwenden Sie den folgenden Link, um ein zweites Video herunterzuladen.

  17. Sobald beide Videos veröffentlicht wurden, können Sie zum nächsten Kapitel wechseln.

Kapitel 3 – Einrichten der Unity-Project

Im Folgenden sehen Sie eine typische Einrichtung für die Entwicklung mit dem Mixed Reality und ist eine gute Vorlage für andere Projekte.

  1. Öffnen Sie Unity , und klicken Sie auf "Neu".

    The Azure Portal

  2. Sie müssen jetzt einen Unity-Project Namen angeben, MR_360VideoStreaming einfügen.. Stellen Sie sicher, dass der Projekttyp auf 3D festgelegt ist. Legen Sie den Speicherort an einer beliebigen Stelle fest, die für Sie geeignet ist (denken Sie daran, dass die Stammverzeichnisse besser sind). Klicken Sie dann auf "Projekt erstellen".

    The Azure Portal

  3. Wenn Unity geöffnet ist, empfiehlt es sich, den Standardskript-Editor auf Visual Studio festzulegen. Wechseln Sie zu "EditPreferences", und navigieren Sie dann im neuen Fenster zu "Externe Tools". Ändern Sie den externen Skript-Editor in Visual Studio 2017. Schließen Sie das Fenster "Einstellungen" .

    The Azure Portal

  4. Wechseln Sie als Nächstes zu FileBuildEinstellungen, und wechseln Sie zu Universelle Windows-Plattform, indem Sie auf die Schaltfläche "Plattform wechseln" klicken.

  5. Stellen Sie außerdem sicher, dass:

    1. Zielgerät ist auf "Beliebiges Gerät" festgelegt.

    2. Der Buildtyp ist auf D3D festgelegt.

    3. SDK ist auf "Neueste Installation" festgelegt.

    4. Visual Studio Version ist auf "Neueste Installation" festgelegt.

    5. Build und Run ist auf lokalen Computer festgelegt.

    6. Machen Sie sich keine Gedanken über das Einrichten von Szenen , da Sie diese später einrichten werden.

    7. Die verbleibenden Einstellungen sollten jetzt als Standard beibehalten werden.

      Setting up the Unity Project

  6. Klicken Sie im Fenster "Build Einstellungen" auf die Schaltfläche "Player Einstellungen". Dadurch wird der zugehörige Bereich im Bereich geöffnet, in dem sich der Inspektor befindet.

  7. In diesem Bereich müssen einige Einstellungen überprüft werden:

    1. Auf der Registerkarte "Andere Einstellungen":

      1. SkriptingRuntime-Version sollte stabil sein (.NET 3.5 Äquivalent).

      2. Skripting-Back-End sollte .NET sein.

      3. API-Kompatibilitätsebene sollte .NET 4.6 sein.

        Setting up the Unity Project

    2. Weiter unten im Bereich, in XR-Einstellungen (unter "Veröffentlichen Einstellungen" gefunden), ticken Sie "Virtual Reality Unterstützt", stellen Sie sicher, dass das Windows Mixed Reality SDK hinzugefügt wird.

      Setting up the Unity Project

    3. Überprüfen Sie in der Registerkarte "Veröffentlichung Einstellungen" unter "Funktionen":

      • InternetClient

        Setting up the Unity Project

  8. Nachdem Sie diese Änderungen vorgenommen haben, schließen Sie das Fenster "Build Einstellungen".

  9. Speichern Sie Ihre Project FileSave Project.

Kapitel 4 – Importieren des InsideOutSphere Unity-Pakets

Wichtig

Wenn Sie die Unity Set up-Komponente dieses Kurses überspringen möchten, und fahren Sie direkt in Code fort, können Sie diese .unitypackage herunterladen, es als benutzerdefiniertes Paket importieren und dann von Kapitel 5 fortfahren. Sie müssen weiterhin eine Unity-Project erstellen.

Für diesen Kurs müssen Sie ein Unity-Asset-Paket namens InsideOutSphere.unitypackage herunterladen.

How-to-import the unitypackage:

  1. Klicken Sie im Unity-Dashboard vor Ihnen auf "Ressourcen " im Menü oben auf dem Bildschirm, und klicken Sie dann auf " Paket > benutzerdefiniertes Paket importieren".

    Importing the InsideOutSphere Unity Package

  2. Verwenden Sie die Dateiauswahl, um das InsideOutSphere.unitypackage-Paket auszuwählen, und klicken Sie auf "Öffnen". Eine Liste der Komponenten für dieses Objekt wird Ihnen angezeigt. Bestätigen Sie den Import, indem Sie auf "Importieren" klicken.

    Importing the InsideOutSphere Unity Package

  3. Nachdem der Import abgeschlossen ist, werden Drei neue Ordner, Materialien, Modelle und Prefabs angezeigt, dem Ordner " Assets " hinzugefügt. Diese Art von Ordnerstruktur ist typisch für ein Unity-Projekt.

    Importing the InsideOutSphere Unity Package

    1. Öffnen Sie den Ordner "Modelle ", und Sie sehen, dass das InsideOutSphere-Modell importiert wurde.

    2. Im Ordner "Materialien " finden Sie das InsideOutSpheres-Materiallambert1 zusammen mit einem Material namens ButtonMaterial, das von der GazeButton verwendet wird, die Sie bald sehen werden.

    3. Der Ordner "Prefabs" enthält die InsideOutSphere-Prefab, die sowohl das InsideOutSpheremodel als auch das GazeButton enthält.

    4. Kein Code ist enthalten, Sie schreiben den Code, indem Sie diesen Kurs folgen.

  4. Wählen Sie in der Hierarchie das Hauptkameraobjekt aus, und aktualisieren Sie die folgenden Komponenten:

    1. Transformieren

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

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

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

    2. Kamera

      1. Flags löschen: Solide Farbe.

      2. Clipping-Flugzeuge: Nahe: 0.1, Far: 6.

        Importing the InsideOutSphere Unity Package

  5. Navigieren Sie zum Ordner "Prefab" , und ziehen Sie dann den InsideOutSphere-Prefab in den Hierarchiebereich .

    Importing the InsideOutSphere Unity Package

  6. Erweitern Sie das InsideOutSphere-Objekt innerhalb der Hierarchie , indem Sie auf den kleinen Pfeil neben dem Objekt klicken. Unter diesem Namen "GazeButton" wird ein untergeordnetes Objekt angezeigt. Dies wird verwendet, um Szenen und somit Videos zu ändern.

    Importing the InsideOutSphere Unity Package

  7. Klicken Sie im Inspektorfenster auf die Transformationskomponente von InsideOutSphere, stellen Sie sicher, dass die folgenden Eigenschaften festgelegt sind:

    TRANSFORMATION – POSITION
    X 0 Y 0 Z 0
    TRANSFORMATION – DREHUNG
    X 0 Y -50 Z 0
    TRANSFORMATION – SKALIERUNG
    X 1 Y 1 Z 1

    Importing the InsideOutSphere Unity Package

  8. Klicken Sie auf das untergeordnete GazeButton-Objekt , und legen Sie die Transformation wie folgt fest:

    TRANSFORMATION – POSITION
    X 3.6 Y 1.3 Z 0
    TRANSFORMATION – DREHUNG
    X 0 Y 0 Z 0
    TRANSFORMATION – SKALIERUNG
    X 1 Y 1 Z 1

    Importing the InsideOutSphere Unity Package

Kapitel 5 – Erstellen der VideoController-Klasse

Die VideoController-Klasse hostet die beiden Videoendpunkte, die zum Streamen der Inhalte aus dem Azure Media Service verwendet werden.

So erstellen Sie diese Klasse:

  1. Klicken Sie mit der rechten Maustaste in den Ressourcenordner, der sich im Project Bereich befindet, und klicken Sie auf "Ordner erstellen>". Benennen Sie den Ordner Skripts.

    Create the VideoController class

    Create the VideoController class

  2. Doppelklicken Sie auf den Ordner "Skripts ", um sie zu öffnen.

  3. Klicken Sie mit der rechten Maustaste in den Ordner, und klicken Sie dann auf "C#-Skript erstellen>". Benennen Sie das Skript VideoController.

    Create the VideoController class

  4. Doppelklicken Sie auf das neue VideoController-Skript, um es mit Visual Studio 2017 zu öffnen.

    Create the VideoController class

  5. Aktualisieren Sie die Namespaces oben in der Codedatei wie folgt:

    using System.Collections;
    using UnityEngine;
    using UnityEngine.SceneManagement;
    using UnityEngine.Video;
    
  6. Geben Sie die folgenden Variablen in der VideoController-Klasse zusammen mit der Awake() -Methode ein:

        /// <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. Jetzt ist die Zeit, die Endpunkte aus Ihren Azure Media Service-Videos einzugeben:

    1. Die erste in die Video1endpoint-Variable .

    2. Der zweite in die Video2endpoint-Variable .

    Warnung

    Es gibt ein bekanntes Problem mit der Verwendung von https innerhalb von Unity, mit Version 2017.4.1f1. Wenn die Videos einen Fehler bei der Wiedergabe bereitstellen, versuchen Sie stattdessen die Verwendung von "http".

  8. Als Nächstes muss die Start()- Methode bearbeitet werden. Diese Methode wird jedes Mal ausgelöst, wenn der Benutzer die Szene wechselt (folglich das Video wechseln), indem er auf die Blickschaltfläche schaut.

        // Use this for initialization
        void Start()
        {
            Application.runInBackground = true;
            StartCoroutine(PlayVideo());
        }
    
  9. Fügen Sie nach der Start() -Methode die PlayVideo()IEnumerator-Methode ein, die verwendet wird, um Videos nahtlos zu starten (so dass keine Stutter angezeigt wird).

        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. Die letzte Methode, die Sie für diese Klasse benötigen, ist die ChangeScene() -Methode, die verwendet wird, um zwischen Szenen zu wechseln.

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

    Tipp

    Die ChangeScene() -Methode verwendet ein praktisches C#-Feature namens "Bedingter Operator". Dies ermöglicht die Überprüfung von Bedingungen und anschließenden Werten, die basierend auf dem Ergebnis der Überprüfung zurückgegeben werden, alle innerhalb einer einzelnen Anweisung. Folgen Sie diesem Link, um mehr über bedingten Operator zu erfahren.

  11. Speichern Sie Ihre Änderungen in Visual Studio, bevor Sie zu Unity zurückkehren.

  12. Klicken Sie im Unity-Editor auf die VideoController-Klasse [from]{.underline}, den Ordner "Skripts " in das Hauptkameraobjekt im Hierarchiebereich .

  13. Klicken Sie auf die Hauptkamera , und schauen Sie sich den Inspektorbereich an. Sie werden feststellen, dass innerhalb der neu hinzugefügten Skriptkomponente ein Feld mit einem leeren Wert vorhanden ist. Dies ist ein Referenzfeld, das auf die öffentlichen Variablen innerhalb des Codes ausgerichtet ist.

  14. Ziehen Sie das InsideOutSphere-Objekt aus dem Hierarchiebereich in den Kugelplatz , wie in der Abbildung unten dargestellt.

    Create the VideoController classCreate the VideoController class

Kapitel 6 – Erstellen der Blickklasse

Diese Klasse ist dafür verantwortlich, einen Raycast zu erstellen, der von der Hauptkameraprojiziert wird, um zu erkennen, welches Objekt der Benutzer betrachtet. In diesem Fall muss der Raycast ermitteln, ob der Benutzer das GazeButton-Objekt in der Szene betrachtet und ein Verhalten auslöst.

So erstellen Sie diese Klasse:

  1. Wechseln Sie zum Ordner "Skripts ", den Sie zuvor erstellt haben.

  2. Klicken Sie mit der rechten Maustaste auf das Project Panel, CreateC#-Skript. Nennen Sie das Skript "Gaze".

  3. Doppelklicken Sie auf das neue Blickskript, um es mit Visual Studio 2017 zu öffnen.

  4. Stellen Sie sicher, dass sich der folgende Namespace oben im Skript befindet, und entfernen Sie alle anderen:

    using UnityEngine;
    
  5. Fügen Sie dann die folgenden Variablen in der Gaze-Klasse hinzu:

        /// <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 für die Methoden "Awake() " und " Start()" müssen jetzt hinzugefügt werden.

        private void Awake()
        {
            // Set this class to behave similar to singleton 
            instance = this;
        }
    
        void Start()
        {
            FocusedGameObject = null;
        }
    
  7. Fügen Sie den folgenden Code in der Update() -Methode hinzu, um einen Raycast zu projizieren und den Zieltreffer zu erkennen:

        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. Speichern Sie Ihre Änderungen in Visual Studio, bevor Sie zu Unity zurückkehren.

  9. Klicken Und ziehen Sie die Gaze-Klasse aus dem Ordner "Skripts" in das Hauptkameraobjekt im Hierarchiebereich .

Kapitel 7 – Einrichten der beiden Unity-Szenen

Der Zweck dieses Kapitels besteht darin, die beiden Szenen einzurichten, die jeweils ein Video zum Streamen hosten. Sie werden die bereits erstellte Szene duplizieren, sodass Sie sie nicht erneut einrichten müssen, obwohl Sie die neue Szene dann bearbeiten, sodass sich das GazeButton-Objekt an einer anderen Stelle befindet und ein anderes Aussehen hat. Hier erfahren Sie, wie Sie zwischen Szenen wechseln können.

  1. Gehen Sie dazu zu "Szene speichern > unter...". Ein Speicherfenster wird angezeigt. Klicken Sie auf die Schaltfläche "Neuer Ordner ".

    Chapter 7 - Setup the two Unity Scenes

  2. Benennen Sie den Ordner "Szenen".

  3. Das Fenster " Szene speichern " ist weiterhin geöffnet. Öffnen Sie ihren neu erstellten Szenenordner .

  4. Geben Sie im Feld "Dateiname: Textfeld""VideoScene1" ein, und drücken Sie dann "Speichern".

  5. Öffnen Sie den Ordner "Szenen " wieder in Unity, und klicken Sie mit der linken Maustaste auf die Datei "VideoScene1 ". Verwenden Sie die Tastatur, und drücken Sie STRG+D , die Sie in dieser Szene duplizieren.

    Tipp

    Der Befehl "Duplizieren" kann auch ausgeführt werden, indem Er zu "Duplikat bearbeiten" >navigiert.

  6. Unity erhöht automatisch die Nummer der Szenennamen, aber überprüfen Sie es trotzdem, um sicherzustellen, dass sie dem zuvor eingefügten Code entspricht.

    Sie sollten VideoScene1 und VideoScene2 haben.

  7. Wechseln Sie mit ihren beiden Szenen zu "Dateibuild > Einstellungen". Wenn das Fenster "Erstellen Einstellungen" geöffnet ist, ziehen Sie Ihre Szenen in den Abschnitt "Szenen im Build".

    Chapter 7 -- Setup the two Unity Scenes

    Tipp

    Sie können beide Szenen aus Ihrem Szenenordner auswählen, indem Sie die STRG-Taste halten und dann auf jede Szene klicken und schließlich beide ziehen.

  8. Schließen Sie das Fenster "Build Einstellungen", und doppelklicken Sie auf "VideoScene2".

  9. Wenn die zweite Szene geöffnet ist, klicken Sie auf das untergeordnete GazeButton-Objekt der InsideOutSphere, und legen Sie die Transformation wie folgt fest:

    TRANSFORMATION – POSITION
    X 0 Y 1.3 Z 3.6
    TRANSFORMATION – DREHUNG
    X 0 Y 0 Z 0
    TRANSFORMATION – SKALIERUNG
    X 1 Y 1 Z 1
  10. Wenn das GazeButton-untergeordnete Element weiterhin ausgewählt ist, schauen Sie sich den Inspektor und den Mesh Filter an. Klicken Sie auf das kleine Ziel neben dem Mesh Referenzfeld:

    Chapter 7 -- Setup the two Unity Scenes

  11. Ein Popupfenster "Auswählen" Mesh wird angezeigt. Doppelklicken Sie in der Liste der Ressourcen auf das Cubegitter.

    Chapter 7 -- Setup the two Unity Scenes

  12. Der Mesh Filter wird aktualisiert und ist jetzt ein Cube. Klicken Sie nun auf das Zahnradsymbol neben Sphere Collider , und klicken Sie auf " Komponente entfernen", um den Collider aus diesem Objekt zu löschen.

    Chapter 7 -- Setup the two Unity Scenes

  13. Wenn "GazeButton" weiterhin ausgewählt ist, klicken Sie unten im Inspektor auf die Schaltfläche "Komponente hinzufügen". Geben Sie im Suchfeld ein Feld ein, und Box Collider ist eine Option – klicken Sie darauf, um ihrem GazeButton-Objekt einen Box Collider hinzuzufügen.

    Chapter 7 -- Setup the two Unity Scenes

  14. Der GazeButton wird jetzt teilweise aktualisiert, um anders zu aussehen, aber Sie erstellen jetzt ein neues Material, sodass es völlig anders aussieht und einfacher als ein anderes Objekt als das Objekt in der ersten Szene zu erkennen ist.

  15. Navigieren Sie im Project Panel zu Ihrem Ordner "Materialien". Duplizieren Sie das ButtonMaterial Material (drücken Sie STRGD + auf der Tastatur, oder klicken Sie mit der linken Maustaste auf das Material, und wählen Sie dann in der Menüoption "Datei bearbeiten" die Option "Duplizieren" aus.

    Chapter 7 -- Setup the two Unity ScenesChapter 7 -- Setup the two Unity Scenes

  16. Wählen Sie das neue ButtonMaterial Material (hier "ButtonMaterial 1") aus, und klicken Sie im Inspektor auf das Albedo-Farbfenster . Ein Popup wird angezeigt, in dem Sie eine andere Farbe auswählen können (wählen Sie die gewünschte Farbe aus), und schließen Sie das Popup. Das Material ist eine eigene Instanz und unterscheidet sich vom Original.

    Chapter 7 -- Setup the two Unity Scenes

  17. Ziehen Sie das neue Material auf das untergeordnete GazeButton-Element , um nun ihr Aussehen vollständig zu aktualisieren, damit es leicht von der ersten Szenenschaltfläche unterschieden werden kann.

    Chapter 7 -- Setup the two Unity Scenes

  18. An diesem Punkt können Sie das Projekt im Editor testen, bevor Sie das UWP-Projekt erstellen.

    • Drücken Sie die Wiedergabeschaltfläche im Editor , und tragen Sie Ihr Headset.

      Chapter 7 -- Setup the two Unity Scenes

  19. Sehen Sie sich die beiden GazeButton-Objekte an, um zwischen dem ersten und dem zweiten Video zu wechseln.

Kapitel 8 – Erstellen der UWP-Lösung

Nachdem Sie sichergestellt haben, dass der Editor keine Fehler aufweist, können Sie zum Erstellen bereit sein.

So erstellen Sie Folgendes:

  1. Speichern Sie die aktuelle Szene, indem Sie auf "Datei > speichern" klicken.

  2. Aktivieren Sie das Kontrollkästchen " Unity C#-Projekte " (dies ist wichtig, da Sie die Klassen nach Abschluss des Builds bearbeiten können).

  3. Wechseln Sie zu "Dateibuild>" Einstellungen, klicken Sie auf "Build".

  4. Sie werden aufgefordert, den Ordner auszuwählen, in dem Sie die Lösung erstellen möchten.

  5. Erstellen Sie einen BUILDS-Ordner , und erstellen Sie in diesem Ordner einen anderen Ordner mit einem geeigneten Namen Ihrer Wahl.

  6. Klicken Sie auf Ihren neuen Ordner, und klicken Sie dann auf "Ordner auswählen", um diesen Ordner auszuwählen, um den Build an diesem Speicherort zu starten.

    Chapter 8 -- Build the UWP SolutionChapter 8 -- Build the UWP Solution

  7. Nachdem Unity das Gebäude abgeschlossen hat (es kann einige Zeit dauern), wird ein Explorer Fenster am Speicherort Ihres Builds geöffnet.

Kapitel 9 – Bereitstellen auf lokalen Computern

Nachdem der Build abgeschlossen wurde, wird ein Explorer Fenster an der Position Ihres Builds angezeigt. Öffnen Sie den Ordner, den Sie benannt und erstellt haben, und doppelklicken Sie dann in dieser Ordnerdatei auf die Projektmappe (.sln), um Ihre Lösung mit Visual Studio 2017 zu öffnen.

Das einzige, was sie tun müssen, ist die Bereitstellung Ihrer App auf Ihrem Computer (oder lokalem Computer).

So stellen Sie den lokalen Computer bereit:

  1. Öffnen Sie in Visual Studio 2017 die Projektmappendatei, die gerade erstellt wurde.

  2. Wählen Sie in der Lösungsplattformx86, lokaler Computer aus.

  3. Wählen Sie im Projektmappenkonfigurations-Befehl"Debuggen" aus.

    Chapter 9 -- Deploy on Local Machine

  4. Sie müssen jetzt alle Pakete in Ihrer Lösung wiederherstellen. Klicken Sie mit der rechten Maustaste auf Ihre Lösung, und klicken Sie auf "NuGet Pakete für Lösung wiederherstellen"...

    Hinweis

    Dies geschieht, da die pakete, die Unity erstellt hat, für die Arbeit mit Ihren lokalen Computern referenziert werden müssen.

  5. Wechseln Sie zum Menü "Erstellen ", und klicken Sie auf " Lösung bereitstellen", um die Anwendung auf Ihren Computer querzuladen. Visual Studio wird zuerst erstellt und dann Ihre Anwendung bereitstellen.

  6. Ihre App sollte nun in der Liste der installierten Apps angezeigt werden, die zum Starten bereit sind.

    Chapter 9 -- Deploy on Local Machine

Wenn Sie die Mixed Reality-Anwendung ausführen, befinden Sie sich im InsideOutSphere-Modell, das Sie in Ihrer App verwendet haben. Diese Sphäre wird sein, in der das Video gestreamt wird, um eine 360-Grad-Ansicht des eingehenden Videos (das für diese Art von Perspektive gefilmt wurde). Sie sind nicht überrascht, wenn das Video einige Sekunden dauert, um zu laden, ihre App unterliegt Ihrer verfügbaren Internetgeschwindigkeit, da das Video abgerufen und dann heruntergeladen werden muss, damit Sie in Ihre App streamen können. Wenn Sie bereit sind, ändern Sie Szenen und öffnen Sie Ihr zweites Video, indem Sie auf die rote Sphäre blicken! Dann fühlen Sie sich frei zurück, indem Sie den blauen Würfel in der zweiten Szene verwenden!

Ihre fertige Azure Media Service-Anwendung

Herzlichen Glückwunsch, Sie haben eine Mixed Reality-App erstellt, die den Azure Media Service nutzt, um 360 Videos zu streamen.

lab outcome

lab outcome

Bonusübungen

Übung 1

Es ist vollständig möglich, nur eine einzelne Szene zu verwenden, um Videos innerhalb dieses Lernprogramms zu ändern. Experimentieren Sie mit Ihrer Anwendung, und machen Sie es in eine einzelne Szene! Vielleicht fügen Sie dem Mix sogar ein weiteres Video hinzu.

Übung 2

Experimentieren Sie mit Azure und Unity, und versuchen Sie, die Möglichkeit für die App zu implementieren, ein Video automatisch mit einer anderen Dateigröße auszuwählen, abhängig von der Stärke einer Internetverbindung.