HoloLens (1. Generation) und Azure 306: Video streamen

Artikel
07/04/2024

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 in Zukunft veröffentlicht werden, die zeigen, wie sie für HoloLens 2 entwickelt werden. Dieser Hinweis wird mit einem Link zu diesen Lernprogrammen aktualisiert, wenn sie veröffentlicht werden.

Screenshot eines Windows Mixed Reality V R-Beispiels. Screenshot einer Windows Mixed Reality V R-Umgebung.

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

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

Nach Abschluss dieses Kurses haben Sie eine immersive Mixed Reality-Headset-Anwendung, die folgende Aktionen ausführen kann:

Rufen Sie ein 360-Grad-Video aus einem Azure Storage über den Azure Media Service ab.
Zeigen Sie das abgerufene 360-Grad-Video in einer Unity-Szene an.
Navigieren Sie zwischen zwei Szenen mit zwei verschiedenen Videos.

In Ihrer Anwendung liegt es an Ihnen, wie Sie die Ergebnisse in Ihr Design integrieren. Dieser Kurs wurde entwickelt, um Ihnen zu vermitteln, wie Sie einen Azure-Dienst in Ihr Unity-Projekt integrieren. Es ist Ihre Aufgabe, das Wissen zu nutzen, das Sie aus diesem Kurs gewinnen, um Ihre Mixed Reality-Anwendung zu verbessern.

Unterstützung für Geräte

Kurs	HoloLens	Immersive Headsets
MR und Azure 306: Streamingvideo		✔️

Voraussetzungen

Hinweis

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

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

Ein Entwicklungs-PC, kompatibel mit Windows Mixed Reality für die Entwicklung von immersiven (VR)-Headsets
Windows 10 Fall Creators Update (oder höher) mit aktivierter Entwicklermodus
Das neueste Windows 10 SDK
Unity 2017.4
Visual Studio 2017
Ein immersives Windows Mixed Reality-Headset (VR)
Internetzugriff für Azure-Setup und Datenabruf
Zwei 360-Grad-Videos im MP4-Format (Sie finden einige lizenzfreie Videos auf dieser Downloadseite)

Vor der Installation

Um Probleme beim Erstellen dieses Projekts zu vermeiden, wird dringend empfohlen, das in diesem Lernprogramm erwähnte Projekt in einem Stamm- oder Near-Root-Ordner zu erstellen (lange Ordnerpfade können zu Buildzeit zu Problemen führen).
Richten Sie Ihr immersives Mixed Reality-Headset ein, und testen Sie es.

Hinweis

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

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

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

Melden Sie sich beim Azure-Portalan.

Hinweis

Wenn Sie noch nicht über ein Azure-Konto verfügen, müssen Sie ein Konto erstellen. Wenn Sie diesem Lernprogramm in einer Unterrichts- oder Laborsituation folgen, bitten Sie Ihren Kursleiter oder einen der Betreuer, Hilfe beim Einrichten Ihres neuen Kontos zu erhalten.
Nachdem Sie angemeldet sind, klicken Sie im linken Menü auf "Speicherkonten ".
Klicken Sie auf der Registerkarte "Speicherkonten " auf " Hinzufügen".
Auf der Registerkarte "Speicherkonto erstellen ":
1. Fügen Sie einen Namen für Ihr Konto ein, beachten Sie, dass in diesem Feld nur Zahlen und Kleinbuchstaben akzeptiert werden.
2. Wählen Sie für das Bereitstellungsmodell den Ressourcen-Manager aus.
3. Wählen Sie für "Kontotyp" die Option "Speicher" (allgemeiner Zweck v1) aus.
4. Wählen Sie für "Leistung" die Option "Standard" aus.*
5. Wählen Sie für die Replikation lokal redundanten Speicher (LRS) aus.
6. Verlassen Sie die sichere Übertragung, die als deaktiviert erforderlich ist.
7. Wählen Sie ein Abonnementaus.
8. Wählen Sie eine Ressourcengruppe aus, oder erstellen Sie eine neue Gruppe . 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 würde. Einige Azure-Ressourcen sind nur in bestimmten Regionen verfügbar.
Sie müssen bestätigen, dass Sie die auf diesen Dienst angewendeten Allgemeinen Geschäftsbedingungen verstanden haben.
Nachdem Sie auf "Erstellen" geklickt haben, müssen Sie warten, bis der Dienst erstellt wurde. Dies kann eine Minute dauern.
Sobald die Dienstinstanz erstellt wurde, wird im Portal eine Benachrichtigung angezeigt.
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).

Klicken Sie im Azure-Portal in der oberen linken Ecke auf " Ressource erstellen", und suchen Sie nach "Mediendienst", drücken Sie die EINGABETASTE. Die gewünschte Ressource weist derzeit ein rosa Symbol auf. klicken Sie auf diese Seite, um eine neue Seite anzuzeigen.
Die neue Seite enthält eine Beschreibung des Mediendiensts. Klicken Sie unten links in dieser Eingabeaufforderung auf die Schaltfläche "Erstellen ", um eine Zuordnung mit diesem Dienst zu erstellen.
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 (z. B. diesen Laboren) zugeordnet sind, unter einer gemeinsamen Ressourcengruppe zu halten.
Wenn Sie mehr über Azure-Ressourcengruppen erfahren 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 würde. Einige Azure-Ressourcen sind nur in bestimmten Regionen verfügbar.
2. Klicken Sie für den Abschnitt "Speicherkonto " auf den Abschnitt "Bitte auswählen..." , und klicken Sie dann auf das Speicherkonto , das Sie im letzten Kapitel erstellt haben.
3. Sie müssen auch bestätigen, dass Sie die auf diesen Dienst angewendeten Allgemeinen Geschäftsbedingungen verstanden haben.
4. Klicken Sie auf Erstellen.
Nachdem Sie auf "Erstellen" geklickt haben, müssen Sie warten, bis der Dienst erstellt wurde. Dies kann eine Minute dauern.
Sobald die Dienstinstanz erstellt wurde, wird im Portal eine Benachrichtigung angezeigt.
Klicken Sie auf die Benachrichtigung, um Ihre neue Dienstinstanz zu erkunden.
Klicken Sie in der Benachrichtigung auf die Schaltfläche "Zur Ressource wechseln", um Ihre neue Dienstinstanz zu erkunden.
Klicken Sie auf der neuen Mediendienstseite im Bereich auf der linken Seite auf den Link "Objekte ", der etwa halb unten ist.
Klicken Sie auf der nächsten Seite in der oberen linken Ecke der Seite auf "Hochladen".
Klicken Sie auf das Ordnersymbol, 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.

Warnung

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

Die Statusleiste wird grün angezeigt, wenn das Video den Upload abgeschlossen hat.
Klicken Sie auf den obigen Text (IhrServicename – Objekte), um zur Seite "Objekte" zurückzukehren.
Sie werden feststellen, dass Ihr Video erfolgreich hochgeladen wurde. Klicken Sie darauf.
Auf der Seite, zu der Sie umgeleitet werden, werden Detaillierte Informationen zu Ihrem Video angezeigt. 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.
Rechts wird ein neues Panel angezeigt, in dem Sie Codierungsoptionen für Ihre Datei festlegen können. Legen Sie die folgenden Eigenschaften fest (einige werden standardmäßig bereits festgelegt):
1. Medien-Encodername Media Encoder Standard
2. Codierung voreingestellter Inhalte adaptiver Multiple Bitrate MP4
3. Auftragsname Media Encoder Standardverarbeitung von Video1.mp4
4. Ausgabemedienobjektname Video1.mp4 - Media Encoder Standard codiert
Klicken Sie auf die Schaltfläche Erstellen .
Sie werden feststellen, dass eine Leiste mit hinzugefügtem Codierungsauftrag hinzugefügt wurde, klicken Sie auf diese Leiste, und ein Bereich wird mit dem darin angezeigten Codierungsfortschritt angezeigt.
Warten Sie, bis der Auftrag abgeschlossen ist. Sobald sie abgeschlossen ist, können Sie das Panel mit dem "X" oben rechts in diesem Bereich schließen.

Wichtig

Die Zeit, die dies dauert, hängt von der Dateigröße Ihres Videos ab. Dieser Vorgang kann einige Zeit in Anspruch nehmen.
Nachdem die codierte Version des Videos erstellt wurde, können Sie es veröffentlichen, um es barrierefrei zu machen. Klicken Sie dazu auf den blauen Link "Objekte ", um zur Seite "Objekte" zurückzukehren.
Sie sehen Ihr Video zusammen mit einer anderen, die vom Typ "Asset Type Multi-Bitrate MP4" ist.

Hinweis

Möglicherweise stellen Sie fest, dass das neue Objekt zusammen mit Ihrem anfänglichen Video unbekannt ist und "0" Bytes für die Größe aufweist, aktualisieren Sie einfach Ihr Fenster, damit es aktualisiert wird.
Klicken Sie auf dieses neue Objekt.
Sie sehen ein ähnliches Panel wie das zuvor verwendete Panel, nur dies ist eine andere Ressource. Klicken Sie auf die Schaltfläche "Veröffentlichen ", die sich oben in der Mitte der Seite befindet.
Sie werden aufgefordert, einen Locator festzulegen, bei dem es sich um den Einstiegspunkt handelt, um Dateien in Ihren Ressourcen zu speichern. Legen Sie für Ihr Szenario die folgenden Eigenschaften fest:
1. Locator-Typ>Progressive.
2. Das Datum und die Uhrzeit werden für Sie von Ihrem aktuellen Datum auf eine Uhrzeit in der Zukunft festgelegt (in diesem Fall einhundert Jahre). Lassen Sie dies wie folgt, oder ändern Sie sie entsprechend.
Hinweis

Weitere Informationen zu Locators und zur Auswahl finden Sie in der Dokumentation zu Azure Media Services.
Klicken Sie unten in diesem Bereich auf die Schaltfläche "Hinzufügen" .
Ihr Video wird jetzt veröffentlicht und kann mithilfe seines Endpunkts gestreamt werden. Weiter unten auf der Seite befindet sich 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 darunter die Datei 1920x960), und dann wird ein Bereich rechts angezeigt. Dort finden Sie eine Download-URL. Kopieren Sie diesen Endpunkt , während Sie ihn später in Ihrem Code verwenden.

Hinweis

Sie können auch die Wiedergabetaste drücken, um Ihr Video wiederzugeben und zu testen.
Sie müssen nun das zweite Video hochladen, das Sie in dieser Übung verwenden werden. Führen Sie die vorstehenden Schritte aus, und wiederholen Sie denselben Prozess für das zweite Video. Stellen Sie sicher, dass Sie auch den zweiten Endpunkt kopieren. Verwenden Sie den folgenden Link, um ein zweites Video herunterzuladen.
Sobald beide Videos veröffentlicht wurden, können Sie zum nächsten Kapitel wechseln.

Kapitel 3 – Einrichten des Unity-Projekts

Es folgt eine typische Einrichtung für die Entwicklung mit Mixed Reality und als solche ist eine gute Vorlage für andere Projekte.

Öffnen Sie Unity , und klicken Sie auf "Neu".
Sie müssen nun einen Unity-Projektnamen angeben, MR_360VideoStreaming einfügen. Stellen Sie sicher, dass der Projekttyp auf 3D festgelegt ist. Legen Sie den Speicherort an einer für Sie geeigneten Stelle fest (denken Sie daran, dass die Stammverzeichnisse besser sind). Klicken Sie dann auf "Projekt erstellen".
Wenn Unity geöffnet ist, lohnt es sich, den Standardmäßigen Skript-Editor auf Visual Studio festzulegen. Wechseln Sie zu "Einstellungen bearbeiten", 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.
Wechseln Sie als Nächstes zu "Dateibuildeinstellungen", und wechseln Sie zu Universelle Windows-Plattform, indem Sie auf die Schaltfläche "Plattform wechseln" klicken.
Stellen Sie außerdem sicher, dass:
1. Das Zielgerät ist auf "Beliebiges Gerät" festgelegt.
2. 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 den lokalen Computer festgelegt.
6. Machen Sie sich im Moment keine Sorgen über das Einrichten von Szenen , da Sie diese später einrichten werden.
7. Die restlichen Einstellungen sollten jetzt als Standard beibehalten werden.
Klicken Sie im Fenster "Buildeinstellungen " auf die Schaltfläche "Spielereinstellungen ". Dadurch wird der zugehörige Bereich im Bereich geöffnet, in dem sich der Inspektor befindet.
In diesem Bereich müssen einige Einstellungen überprüft werden:
1. Auf der Registerkarte "Andere Einstellungen" folgendes:
  1. Skripting Runtime-Version sollte stabil sein (.NET 3.5-Entsprechung).
  2. Scripting Back-End sollte .NET sein .
  3. API-Kompatibilitätsstufe sollte .NET 4.6 sein .
2. Klicken Sie weiter unten im Bereich unter "XR-Einstellungen" (unter "Veröffentlichungseinstellungen" finden Sie auf "Virtual Reality Unterstützt"), und vergewissern Sie sich, dass das Windows Mixed Reality SDK hinzugefügt wird.
3. Aktivieren Sie auf der Registerkarte "Veröffentlichungseinstellungen " unter "Funktionen" Folgendes:
  - InternetClient
Nachdem Sie diese Änderungen vorgenommen haben, schließen Sie das Fenster "Buildeinstellungen" .
Speichern Sie Das Projekt "Projekt speichern".

Kapitel 4 – Importieren des InsideOutSphere Unity-Pakets

Wichtig

Wenn Sie die Unity Set up-Komponente dieses Kurses überspringen und direkt mit Code fortfahren möchten, können Sie dieses Unitypackage herunterladen, es als benutzerdefiniertes Paket in Ihr Projekt importieren und dann von Kapitel 5 fortfahren. Sie müssen weiterhin ein Unity-Projekt erstellen.

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

So importieren Sie das Unitypackage:

Klicken Sie mit dem Unity-Dashboard vor Ihnen im Menü oben auf dem Bildschirm auf "Assets", und klicken Sie dann auf "Paket benutzerdefiniertes Paket > importieren".
Verwenden Sie die Dateiauswahl, um das InsideOutSphere.unitypackage-Paket auszuwählen und auf "Öffnen" zu klicken. Ihnen wird eine Liste der Komponenten für dieses Objekt angezeigt. Bestätigen Sie den Import, indem Sie auf "Importieren" klicken.
Nachdem der Import abgeschlossen ist, werden Sie feststellen, dass drei neue Ordner, Materialien, Modelle und Prefabs zu Ihrem Ordner "Assets " hinzugefügt wurden. Diese Art von Ordnerstruktur ist typisch für ein Unity-Projekt.
1. Öffnen Sie den Ordner "Models ", und Sehen Sie, dass das InsideOutSphere-Modell importiert wurde.
2. Im Ordner "Materialien" finden Sie das InsideOutSpheres-Material lambert1 zusammen mit einem Material namens ButtonMaterial, das von der GazeButton verwendet wird, die Sie bald sehen werden.
3. Der Ordner "Prefabs" enthält den InsideOutSphere-Prefab, der sowohl das InsideOutSphere-Modell als auch das GazeButton-Modell enthält.
4. Es ist kein Code enthalten, sie schreiben den Code, indem Sie diesem Kurs folgen.
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: Volltonfarbe.
  2. Clipping planes: Near: 0.1, Far: 6.
Navigieren Sie zum Ordner "Prefab ", und ziehen Sie dann den InsideOutSphere-Prefab in den Hierarchiebereich .
Erweitern Sie das InsideOutSphere-Objekt innerhalb der Hierarchie , indem Sie auf den kleinen Pfeil daneben klicken. Unter dem Namen GazeButton wird ein untergeordnetes Objekt angezeigt. Dies wird verwendet, um Szenen und damit Videos zu ändern.
Klicken Sie im Inspektorfenster auf die Transformationskomponente von InsideOutSphere, um sicherzustellen, dass die folgenden Eigenschaften festgelegt sind:

Transformieren – Position

X	Y	Z
0	0	0

Transformation – Drehung

X	Y	Z
0	-50	0

Transformation – Skalierung

X	Y	Z
0	0	0

Screenshot des Bildschirms

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

Transformieren – Position

X	Y	Z
3.6	1.3	0

Transformation – Drehung

X	Y	Z
0	0	0

Transformation – Skalierung

X	Y	Z
1	1	1

Screenshot der geöffneten Registerkarte

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:

Klicken Sie mit der rechten Maustaste in den Objektordner, der sich im Projektbereich befindet, und klicken Sie auf " Ordner erstellen > ". Benennen Sie den Ordner Skripts.
Doppelklicken Sie auf den Ordner "Skripts ", um ihn zu öffnen.
Klicken Sie mit der rechten Maustaste in den Ordner, und klicken Sie dann auf "C#-Skript erstellen>". Nennen Sie das Skript "VideoController".
Doppelklicken Sie auf das neue VideoController-Skript , um es mit Visual Studio 2017 zu öffnen.

Aktualisieren Sie die Namespaces oben in der Codedatei wie folgt:

using System.Collections;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.Video;

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;
    }

Jetzt ist die Zeit, die Endpunkte aus Ihren Azure Media Service-Videos einzugeben:
1. Der erste in die Video1endpoint-Variable .
2. Der zweite in die Video2endpoint-Variable .
Warnung

Es gibt ein bekanntes Problem bei der Verwendung von https in Unity, mit Version 2017.4.1f1. Wenn die Videos einen Fehler bei der Wiedergabe bereitstellen, versuchen Sie stattdessen mit "http".
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 sich die Blicktaste ansieht.
```
    // Use this for initialization
    void Start()
    {
        Application.runInBackground = true;
        StartCoroutine(PlayVideo());
    }
```

Fügen Sie nach der Start() -Methode die PlayVideo() IEnumerator-Methode ein, die verwendet wird, um Videos nahtlos zu starten (sodass kein Stutter zu sehen ist).

    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;
        }
    }

Die letzte Methode, die Sie für diese Klasse benötigen, ist die ChangeScene() -Methode, die zum Austauschen zwischen Szenen verwendet wird.
```
    public void ChangeScene()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().name == "VideoScene1" ? "VideoScene2" : "VideoScene1");
    }
```
Tipp

Die ChangeScene()- Methode verwendet ein praktisches C#-Feature namens " Bedingter Operator". Auf diese Weise können Bedingungen überprüft werden, und dann werte, die basierend auf dem Ergebnis der Prüfung zurückgegeben werden, alle innerhalb einer einzelnen Anweisung. Folgen Sie diesem Link, um mehr über den bedingten Operator zu erfahren.
Speichern Sie Ihre Änderungen in Visual Studio, bevor Sie zu Unity zurückkehren.
Klicken Sie im Unity-Editor auf die VideoController-Klasse [from]{.underline}, und ziehen Sie sie in den Ordner "Skripts " in das Hauptkameraobjekt im Hierarchiebereich .
Klicken Sie auf die Hauptkamera , und sehen 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 in Ihrem Code ausgerichtet ist.
Ziehen Sie das InsideOutSphere-Objekt aus dem Hierarchiepanel auf den Kugelplatz , wie in der abbildung unten dargestellt.

Kapitel 6 – Erstellen der Gaze-Klasse

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

So erstellen Sie diese Klasse:

Wechseln Sie zum Ordner "Skripts", den Sie zuvor erstellt haben.
Klicken Sie mit der rechten Maustaste in den Projektbereich, C#-Skript erstellen. Nennen Sie das Skript "Gaze".
Doppelklicken Sie auf das neue Gaze-Skript , um es mit Visual Studio 2017 zu öffnen.
Stellen Sie sicher, dass sich der folgende Namespace am Anfang des Skripts befindet, und entfernen Sie alle anderen:
```
using UnityEngine;
```

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; }

Code für die Methoden Awake() und Start() muss jetzt hinzugefügt werden.

    private void Awake()
    {
        // Set this class to behave similar to singleton 
        instance = this;
    }

    void Start()
    {
        FocusedGameObject = null;
    }

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();
            }
        }
    }

Speichern Sie Ihre Änderungen in Visual Studio, bevor Sie zu Unity zurückkehren.
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 duplizieren die szene, die Sie bereits erstellt haben, sodass Sie sie nicht erneut einrichten müssen, obwohl Sie dann die neue Szene bearbeiten, sodass sich das GazeButton-Objekt an einer anderen Position befindet und ein anderes Erscheinungsbild hat. Dies ist, um zu zeigen, wie zwischen Szenen gewechselt wird.

Gehen Sie dazu zu "Szene > speichern unter...". Ein Speicherfenster wird angezeigt. Klicken Sie auf die Schaltfläche "Neuer Ordner ".
Benennen Sie den Ordner "Szenen".
Das Fenster " Szene speichern" ist weiterhin geöffnet. Öffnen Sie den neu erstellten Szenenordner .
Geben Sie im Feld "Dateiname: " " VideoScene1" ein, und drücken Sie dann "Speichern".
Ö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 diese Szene duplizieren möchten.

Tipp

Der Befehl "Duplizieren" kann auch ausgeführt werden, indem sie zu "Duplikat bearbeiten" > navigieren.
Unity erhöht automatisch die Nummer der Szenennamen, aber überprüfen Sie sie trotzdem, um sicherzustellen, dass sie mit dem zuvor eingefügten Code übereinstimmt.

Sie sollten VideoScene1 und VideoScene2 haben.
Wechseln Sie mit ihren beiden Szenen zu " Dateibuildeinstellungen > ". Wenn das Fenster "Buildeinstellungen " geöffnet ist, ziehen Sie Ihre Szenen in den Abschnitt "Szenen im Build ".

Tipp

Sie können beide Szenen aus dem Ordner "Szenen" auswählen, indem Sie die STRG-Taste gedrückt halten und dann mit der linken Maustaste auf jede Szene klicken und schließlich beides ziehen.
Schließen Sie das Fenster "Buildeinstellungen ", und doppelklicken Sie auf "VideoScene2".
Wenn die zweite Szene geöffnet ist, klicken Sie auf das untergeordnete GazeButton-Objekt der InsideOutSphere, und legen Sie dessen Transformation wie folgt fest:

Transformieren – Position

X	Y	Z
0	1.3	3.6

Transformation – Drehung

X	Y	Z
0	0	0

Transformation – Skalierung

X	Y	Z
1	1	1

Nachdem das untergeordnete Element "GazeButton " noch ausgewählt ist, sehen Sie sich den Inspektor und den Gitterfilter an. Klicken Sie auf das kleine Ziel neben dem Gitterverweisfeld :
Ein Popupfenster "Gitter auswählen" wird angezeigt. Doppelklicken Sie in der Liste der Objekte auf das Cubegitter.
Der Gitterfilter wird aktualisiert und ist jetzt ein Cube. Klicken Sie nun auf das Zahnradsymbol neben Sphere Collider , und klicken Sie auf "Komponente entfernen", um den Kollider aus diesem Objekt zu löschen.
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.
Das GazeButton-Steuerelement ist jetzt teilweise aktualisiert, um anders zu aussehen, Sie erstellen nun jedoch 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.
Navigieren Sie im Projektbereich zum Ordner "Materialien". Duplizieren Sie das ButtonMaterial-Material (drücken Sie STRG + D 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).
Wählen Sie das neue ButtonMaterial Material (hier mit dem Namen 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 dann das Popup. Das Material ist seine eigene Instanz und unterscheidet sich vom Original.
Ziehen Sie das neue Material auf das untergeordnete GazeButton-Element, um nun das Aussehen vollständig zu aktualisieren, damit es leicht von der Schaltfläche "Erste Szenen" unterschieden werden kann.
An diesem Punkt können Sie das Projekt im Editor testen, bevor Sie das UWP-Projekt erstellen.
- Drücken Sie die Wiedergabetaste im Editor , und tragen Sie Ihr Headset.
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:

Speichern Sie die aktuelle Szene, indem Sie auf " Datei > speichern" klicken.
Aktivieren Sie das Kontrollkästchen "Unity C#-Projekte " (dies ist wichtig, da es Ihnen ermöglicht, die Klassen nach Abschluss des Builds zu bearbeiten).
Wechseln Sie zu "Dateibuildeinstellungen>", und klicken Sie auf "Erstellen".
Sie werden aufgefordert, den Ordner auszuwählen, in dem Sie die Lösung erstellen möchten.
Erstellen Sie einen BUILDS-Ordner , und erstellen Sie in diesem Ordner einen anderen Ordner mit einem geeigneten Namen Ihrer Wahl.
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.
Nachdem Unity das Erstellen abgeschlossen hat (es kann einige Zeit dauern), wird ein Explorer Fenster am Speicherort Ihres Builds geöffnet.

Kapitel 9 – Bereitstellen auf dem lokalen Computer

Nachdem der Build abgeschlossen wurde, wird ein Explorer Fenster am Speicherort Des Builds angezeigt. Öffnen Sie den Ordner, den Sie benannt und erstellt haben, und doppelklicken Sie dann in diesem Ordner auf die Projektmappendatei (.sln), um Ihre Projektmappe mit Visual Studio 2017 zu öffnen.

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

So stellen Sie die Bereitstellung auf dem lokalen Computer bereit:

Öffnen Sie in Visual Studio 2017 die soeben erstellte Projektmappendatei.
Wählen Sie in der Lösungsplattform x86, lokaler Computer aus.
Wählen Sie in der Lösungskonfiguration "Debuggen" aus.
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.
Wechseln Sie zum Menü " Erstellen", und klicken Sie auf " Lösung bereitstellen", um die Anwendung auf Ihren Computer querzuladen. Visual Studio erstellt zuerst ihre Anwendung und stellt sie dann bereit.
Ihre App sollte nun in der Liste der installierten Apps angezeigt werden, die zum Starten bereit sind.

Wenn Sie die Mixed Reality-Anwendung ausführen, befinden Sie sich innerhalb des InsideOutSphere-Modells , das Sie in Ihrer App verwendet haben. In dieser Sphäre wird das Video gestreamt, um eine 360-Grad-Ansicht des eingehenden Videos (das für diese Art von Perspektive gefilmt wurde) zu streamen. Lassen Sie sich nicht überraschen, wenn das Video ein paar Sekunden zum Laden benötigt, unterliegt Ihre App 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 Kugel blicken! Dann können Sie mit dem blauen Würfel in der zweiten Szene zurückkehren!

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.

Screenshot einer Beispiel-Mixed Reality-App.

Screenshot eines Beispiels für eine Mixed Reality-App.

Bonusübungen

Übung 1

Es ist völlig möglich, nur eine einzelne Szene zu verwenden, um Videos in diesem Lernprogramm zu ändern. Experimentieren Sie mit Ihrer Anwendung, und machen Sie es in eine einzelne Szene! Fügen Sie vielleicht sogar ein weiteres Video zur Mischung 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.

Freigeben über

HoloLens (1. Generation) und Azure 306: Video streamen

Unterstützung für Geräte

Voraussetzungen

Vor der Installation

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

Kapitel 2 – Das Azure-Portal: Erstellen des Mediendiensts

Kapitel 3 – Einrichten des Unity-Projekts

Kapitel 4 – Importieren des InsideOutSphere Unity-Pakets

Kapitel 5 – Erstellen der VideoController-Klasse

Kapitel 6 – Erstellen der Gaze-Klasse

Kapitel 7 – Einrichten der beiden Unity-Szenen

Kapitel 8 – Erstellen der UWP-Lösung

Kapitel 9 – Bereitstellen auf dem lokalen Computer

Ihre fertige Azure Media Service-Anwendung

Bonusübungen

Zusätzliche Ressourcen