HoloLens (1. Generation) und Azure 306: Videostreaming

Artikel
03/21/2023

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

Screenshot eines Windows Mixed Reality V R-Beispiels. Screenshot einer Windows Mixed Reality V R-Benutzeroberfläche.

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

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

Nach Abschluss dieses Kurses verfügen Sie über eine immersive Mixed Reality-Headsetanwendung, die folgende Aufgaben 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. In diesem Kurs erfahren Sie, wie Sie einen Azure-Dienst in Ihr Unity-Projekt integrieren. Es ist Ihre Aufgabe, das Wissen, das Sie aus diesem Kurs gewonnen haben, zu nutzen, um Ihre Mixed Reality-Anwendung zu verbessern.

Geräteunterstützung

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

Voraussetzungen

Hinweis

Dieses Tutorial richtet sich an Entwickler, die über grundlegende Erfahrungen mit Unity und C# verfügen. Bitte beachten Sie auch, dass die Voraussetzungen und schriftlichen Anweisungen in diesem Dokument das darstellen, was zum Zeitpunkt des Schreibens (Mai 2018) getestet und überprüft wurde. Sie können die neueste Software verwenden, wie im Artikel Installieren der Tools aufgeführt, aber es sollte nicht davon ausgegangen werden, dass die Informationen in diesem Kurs perfekt dem entsprechen, was Sie in neuerer Software finden, als unten aufgeführt.

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 Headsets (VR)
Windows 10 Fall Creators Update (oder höher) mit aktiviertem Entwicklermodus
Das neueste Windows 10 SDK
Unity 2017.4
Visual Studio 2017
Ein Windows Mixed Reality immersives Headset (VR)
Internetzugriff für Azure-Setup und -Datenabruf
Zwei 360-Grad-Videos im MP4-Format (sie finden einige lizenzfreie Videos auf dieser Downloadseite)

Vorbereitung

Um Probleme beim Erstellen dieses Projekts zu vermeiden, wird dringend empfohlen, dass Sie das in diesem Tutorial erwähnte Projekt in einem Stamm- oder Fast-Stammordner erstellen (lange Ordnerpfade können zur Buildzeit Zu Problemen führen).
Richten Sie Ihr Mixed Reality Immersive 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 Windows Mixed Reality.

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

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

Melden Sie sich beim Azure-Portal an.

Hinweis

Wenn Sie noch nicht über ein Azure-Konto verfügen, müssen Sie eines erstellen. Wenn Sie dieses Tutorial in einer Unterrichts- oder Laborsituation befolgen, bitten Sie Ihren Kursleiter oder einen der Experten um Hilfe beim Einrichten Ihres neuen Kontos.
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 dieses Feld nur Zahlen und Kleinbuchstaben akzeptiert.
2. Wählen Sie unter Bereitstellungsmodell die Option Ressourcen-Manager aus.
3. Wählen Sie unter Kontoartdie Option Speicher (universell v1) aus.
4. Wählen Sie unter Leistung die Option Standard aus.*
5. Wählen Sie unter Replikationdie Option Lokal redundanter Speicher (LRS) aus.
6. Übernehmen Sie die Option Sichere Übertragung erforderlich als Deaktiviert.
7. Wählen Sie ein Abonnementaus.
8. Wählen Sie eine Ressourcengruppe aus, oder erstellen Sie eine neue. Eine Ressourcengruppe bietet eine Möglichkeit zum Überwachen, Steuern des Zugriffs, Bereitstellen und Verwalten der Abrechnung für eine Sammlung von Azure-Ressourcen.
9. Ermitteln Sie den Speicherort für Ihre Ressourcengruppe (wenn Sie eine neue Ressourcengruppe erstellen). Der Speicherort befindet sich idealerweise in der Region, in der die Anwendung ausgeführt wird. Einige Azure-Ressourcen sind nur in bestimmten Regionen verfügbar.
Sie müssen bestätigen, dass Sie die für diesen Dienst geltenden Geschäftsbedingungen verstanden haben.
Nachdem Sie auf Erstellen geklickt haben, müssen Sie warten, bis der Dienst erstellt wurde. Dies kann eine Minute dauern.
Eine Benachrichtigung wird im Portal angezeigt, sobald der Dienst instance erstellt wurde.
An diesem Punkt müssen Sie der Ressource nicht folgen, wechseln Sie einfach zum nächsten Kapitel.

Kapitel 2: Das Azure-Portal: Erstellen des Media Service

Um den Azure Media Service verwenden zu können, müssen Sie eine instance des Diensts konfigurieren, der Ihrer Anwendung zur Verfügung gestellt wird (wobei der Kontoinhaber ein Admin sein muss).

Klicken Sie im Azure-Portal in der oberen linken Ecke auf Ressource erstellen , und suchen Sie nach Media Service, und drücken Sie die EINGABETASTE. Die gewünschte Ressource verfügt derzeit über ein rosa Symbol. Klicken Sie darauf, um eine neue Seite anzuzeigen.
Die neue Seite enthält eine Beschreibung des Media Service. Klicken Sie unten links neben dieser Eingabeaufforderung auf die Schaltfläche Erstellen , um eine Zuordnung zu diesem Dienst zu erstellen.
Nachdem Sie auf Erstellen geklickt haben, wird der Bereich angezeigt, in dem Sie einige Details zu Ihrem neuen Media Service angeben müssen:
1. Geben Sie den gewünschten Kontonamen für diesen Dienst instance 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 zum Überwachen, Steuern des Zugriffs, Bereitstellen und Verwalten der Abrechnung für eine Sammlung von Azure-Ressourcen. Es wird empfohlen, alle Azure-Dienste, die einem einzelnen Projekt (z. B. diesen Labs) 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. Ermitteln Sie den Speicherort für Ihre Ressourcengruppe (wenn Sie eine neue Ressourcengruppe erstellen). Der Speicherort befindet sich 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 Speicherkonto auf den Abschnitt Bitte wählen Sie aus, und klicken Sie dann auf das Speicherkonto, das Sie im letzten Kapitel erstellt haben.
3. Sie müssen auch bestätigen, dass Sie die für diesen Dienst geltenden 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.
Eine Benachrichtigung wird im Portal angezeigt, sobald der Dienst instance erstellt wurde.
Klicken Sie auf die Benachrichtigung, um Ihre neue Dienst-instance zu erkunden.
Klicken Sie in der Benachrichtigung auf die Schaltfläche Zu Ressource wechseln, um Ihren neuen Dienst instance zu erkunden.
Klicken Sie auf der neuen Seite des Mediendiensts im Bereich auf der linken Seite auf den Link Ressourcen , der sich etwa auf halbem Weg befindet.
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 das erste 360-Video auszuwählen, 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 also die Länge Ihrer Videodateinamen verkürzen.

Die Statusanzeige wird grün, wenn das Video hochgeladen wurde.
Klicken Sie auf den text oben (Yourservicename – Assets), um zur Seite Assets zurückzukehren.
Sie werden feststellen, dass Ihr Video erfolgreich hochgeladen wurde. Klicken Sie darauf.
Die Seite, zu der Sie weitergeleitet werden, zeigt Ihnen detaillierte Informationen zu Ihrem Video. 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 neuer Bereich angezeigt, in dem Sie Codierungsoptionen für Ihre Datei festlegen können. Legen Sie die folgenden Eigenschaften fest (einige werden bereits standardmäßig festgelegt):
1. Medienencodername Media Encoder Standard
2. Codierung voreingestellter Inhalte Adaptive Multiple Bitrate MP4
3. Auftragsname Media Encoder Standard Verarbeitung von Video1.mp4
4. Name des AusgabemedienobjektsVideo1.mp4 – Media Encoder Standard codiert
Klicken Sie auf die Schaltfläche Erstellen .
Sie werden eine Leiste mit dem hinzugefügten Codierungsauftrag bemerken, klicken Sie auf diese Leiste, und ein Bereich wird angezeigt, in dem der Status "Codierung" angezeigt wird.
Warten Sie, bis der Auftrag abgeschlossen ist. Sobald dies abgeschlossen ist, können Sie den Bereich mit dem "X" oben rechts in diesem Bereich schließen.

Wichtig

Wie lange dies dauert, hängt von der Dateigröße Ihres Videos ab. Dieser Prozess kann einige Zeit in Anspruch nehmen.
Nachdem die codierte Version des Videos erstellt wurde, können Sie es veröffentlichen, um es zugänglich zu machen. Klicken Sie dazu auf den blauen Link Ressourcen , um zur Ressourcenseite zurückzukehren.
Sie sehen Ihr Video zusammen mit einem anderen Video, das vom Ressourcentyp Multi-Bitrate MP4 ist.

Hinweis

Möglicherweise stellen Sie fest, dass das neue Medienobjekt neben Ihrem ersten 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.
Es wird ein ähnlicher Bereich wie der angezeigt, den Sie zuvor verwendet haben. Dies ist nur ein anderes Objekt. Klicken Sie oben in der Mitte der Seite auf die Schaltfläche Veröffentlichen .
Sie werden aufgefordert, einen Locator( der Einstiegspunkt) auf Datei/n in Ihren Assets festzulegen. Legen Sie für Ihr Szenario die folgenden Eigenschaften fest:
1. Locatortyp>Progressiv.
2. Das Datum und die Uhrzeit werden für Sie von Ihrem aktuellen Datum auf eine Zeit in der Zukunft (in diesem Fall hundert Jahre) festgelegt. Lassen Sie es unverändert, oder ändern Sie es entsprechend.
Hinweis

Weitere Informationen zu Locators und zu den Optionen, die Sie auswählen können, 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 des 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öchstmögliche Auflösung aus (in der abbildung unten ist es die Datei 1920x960), und dann wird ein Bereich auf der rechten Seite angezeigt. Dort finden Sie eine Download-URL. Kopieren Sie diesen Endpunkt , wie Sie ihn später im Code verwenden werden.

Hinweis

Sie können auch die Schaltfläche Wiedergabe drücken, um Ihr Video abzuspielen und es zu testen.
Sie müssen nun das zweite Video hochladen, das Sie in diesem Lab verwenden werden. Führen Sie die obigen 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

Das Folgende ist eine typische Einrichtung für die Entwicklung mit dem Mixed Reality und daher eine gute Vorlage für andere Projekte.

Öffnen Sie Unity, und klicken Sie auf Neu.
Sie müssen nun einen Unity-Projektnamen angeben und MR_360VideoStreaming einfügen. Stellen Sie sicher, dass der Projekttyp auf 3D festgelegt ist. Legen Sie den Speicherort auf einen für Sie geeigneten Ort fest (denken Sie daran, dass näher an Stammverzeichnissen besser ist). Klicken Sie dann auf Projekt erstellen.
Wenn Unity geöffnet ist, lohnt es sich, zu überprüfen, ob der Standardskript-Editor auf Visual Studio festgelegt ist. Navigieren 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 die Plattform auf Universelle Windows-Plattform, indem Sie auf die Schaltfläche Plattform wechseln klicken.
Stellen Sie außerdem folgendes sicher:
1. Zielgerät ist auf Beliebiges Gerät festgelegt.
2. Buildtyp ist auf D3D festgelegt.
3. SDK ist auf Zuletzt installiert festgelegt.
4. Visual Studio Version ist auf Zuletzt installiert festgelegt.
5. Build and Run ist auf Lokaler Computer festgelegt.
6. Machen Sie sich jetzt keine Gedanken über die Einrichtung von Szenen , da Sie diese später einrichten werden.
7. Die restlichen Einstellungen sollten vorerst als Standard beibehalten werden.
Klicken Sie im Fenster Buildeinstellungen auf die Schaltfläche Playereinstellungen . Dadurch wird der zugehörige Bereich in dem 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 :
  1. DieSkriptruntimeversion sollte stabil (.NET 3.5-Äquivalent) sein.
  2. Skript-Back-End sollte .NET sein.
  3. Der API-Kompatibilitätsgrad sollte .NET 4.6 sein.
2. Wählen Sie weiter unten im Bereich unter XR-Einstellungen (unter Veröffentlichungseinstellungen) das Kontrollkästchen Virtual Reality Unterstützt aus, und stellen Sie sicher, dass das Windows Mixed Reality SDK hinzugefügt wurde.
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 Ihre ProjektdateiSpeichern Sie Projekt.

Kapitel 4: Importieren des InsideOutSphere Unity-Pakets

Wichtig

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

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

Importieren des UnityPackage:

Klicken Sie mit dem Unity-Dashboard vor Ihnen im Menü oben auf dem Bildschirm auf Ressourcen, und klicken Sie dann auf Benutzerdefiniertes Paket > importieren.
Wählen Sie mit der Dateiauswahl das Paket InsideOutSphere.unitypackage aus, und klicken Sie auf Öffnen. Eine Liste der Komponenten für dieses Medienobjekt wird Angezeigt. Bestätigen Sie den Import, indem Sie auf Importieren klicken.
Nachdem der Import abgeschlossen ist, werden Sie feststellen, dass Ihrem Ordner Assets drei neue Ordner hinzugefügt wurden: Materialien, Modelle und Prefabs. Diese Art von Ordnerstruktur ist typisch für ein Unity-Projekt.
1. Öffnen Sie den Ordner Models , und Sie sehen, dass das InsideOutSphere-Modell importiert wurde.
2. Im Ordner Materials finden Sie das InsideOutSpheres-Materiallambert1 zusammen mit einem Material namens ButtonMaterial, das vom GazeButton verwendet wird, das Sie in Kürze sehen werden.
3. Der Ordner Prefabs enthält das InsideOutSphere-Prefab, das sowohl das InsideOutSphere-Modell als auch gazeButton enthält.
4. Es ist kein Code enthalten. Sie schreiben den Code, indem Sie diesem Kurs folgen.
Wählen Sie in der Hierarchie das Objekt Hauptkamera 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. Skala 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 das InsideOutSphere-Prefab in den Hierarchiebereich .
Erweitern Sie das InsideOutSphere-Objekt in der Hierarchie , indem Sie auf den kleinen Pfeil daneben klicken. Darunter wird ein untergeordnetes Objekt namens GazeButton angezeigt. Dies wird verwendet, um Szenen und damit Videos zu ändern.
Klicken Sie im Inspektorfenster auf die Transformationskomponente von InsideOutSphere, und stellen Sie sicher, dass die folgenden Eigenschaften festgelegt sind:

Transformieren – Position

X	J	Z
0	0	0

Transformieren – Drehung

X	J	Z
0	-50	0

Transformieren – Skalieren

X	J	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	J	Z
3.6	1.3	0

Transformieren – Drehung

X	J	Z
0	0	0

Transformieren – Skalieren

X	J	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 von Azure Media Service verwendet werden.

So erstellen Sie diese Klasse:

Klicken Sie im Projektbereich mit der rechten Maustaste auf den Ressourcenordner, und klicken Sie dann auf Ordner erstellen>. Nennen 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 am Anfang 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 es an der Zeit, die Endpunkte aus Ihren Azure Media Service-Videos einzugeben:
1. Die erste in die variable video1endpoint .
2. Die zweite in die variable video2endpoint .
Warnung

Es gibt ein bekanntes Problem bei der Verwendung von https in Unity mit Version 2017.4.1f1. Wenn die Videos bei der Wiedergabe einen Fehler enthalten, versuchen Sie stattdessen, "http" zu verwenden.
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 wechselt), 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 Stottern 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. Dadurch können Bedingungen überprüft und dann Werte basierend auf dem Ergebnis der Überprüfung zurückgegeben werden, alles innerhalb einer einzelnen Anweisung. Folgen Sie diesem Link, um mehr über bedingten Operator zu erfahren.
Speichern Sie Ihre Änderungen in Visual Studio, bevor Sie zu Unity zurückkehren.
Klicken Sie zurück im Unity-Editor, und ziehen Sie die VideoController-Klasse [from]{.underline} 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 sich in der neu hinzugefügten Skriptkomponente ein Feld mit einem leeren Wert befindet. Dies ist ein Verweisfeld, das auf die öffentlichen Variablen in Ihrem Code abzielt.
Ziehen Sie das InsideOutSphere-Objekt aus dem Hierarchiebereich auf den Sphere-Slot , wie in der abbildung unten gezeigt.

Kapitel 6: Erstellen der Gaze-Klasse

Diese Klasse ist für das Erstellen eines Raycasts verantwortlich, der von der Hauptkamera nach vorne projiziert wird, um zu erkennen, welches Objekt der Benutzer betrachtet. In diesem Fall muss raycast ermitteln, 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 im Projektbereich mit der rechten Maustaste auf 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 ganz oben im Skript befindet, und entfernen Sie alle anderen Namespaces:
```
using UnityEngine;
```

Fügen Sie dann die folgenden Variablen 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 Sie auf die Gaze-Klasse , und ziehen Sie sie aus dem Ordner Skripts in das Objekt Hauptkamera 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 bereits erstellte Szene, 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 Aussehen aufweist. Dies soll zeigen, wie zwischen den Szenen gewechselt werden kann.

Gehen Sie dazu zu Datei > speichern Szene unter.... Es wird ein Fenster zum Speichern angezeigt. Klicken Sie auf die Schaltfläche Neuer Ordner .
Nennen Sie den Ordner Szenen.
Das Fenster "Szene speichern " ist weiterhin geöffnet. Öffnen Sie Den neu erstellten Ordner Scenes .
Geben Sie im Textfeld Dateiname:VideoScene1 ein, und drücken Sie dann Speichern.
Zurück zu Unity, öffnen Sie Ihren Ordner Scenes , und klicken Sie mit der linken Maustaste auf Ihre VideoScene1-Datei . Verwenden Sie Ihre Tastatur, und drücken Sie STRG+D , um diese Szene zu duplizieren

Tipp

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

Sie sollten Über VideoScene1 und VideoScene2 verfügen.
Wechseln Sie mit Ihren beiden Szenen zu Dateierstellungseinstellungen>. 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-Schaltfläche gedrückt halten, dann mit der linken Maustaste auf jede Szene klicken und schließlich beides quer 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	J	Z
0	1.3	3.6

Transformation – Drehung

X	J	Z
0	0	0

Transformieren – Skalieren

X	J	Z
1	1	1

Wenn das untergeordnete GazeButton-Element weiterhin ausgewählt ist, sehen Sie sich den Inspektor und den Gitterfilter an. Klicken Sie auf das kleine Ziel neben dem Feld Mesh-Verweis :
Ein Popupfenster "Gitter auswählen " wird angezeigt. Doppelklicken Sie in der Liste der Objekte auf das Cube-Gitter.
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.
Wenn gazeButton noch ausgewählt ist, klicken Sie unten im Inspektor auf die Schaltfläche Komponente hinzufügen. Geben Sie im Suchfeld feld und Box Collider eine Option ein. Klicken Sie darauf, um Ihrem GazeButton-Objekt einen Box Collider hinzuzufügen.
Der GazeButton wurde jetzt teilweise aktualisiert, um anders aussehen zu können, aber Sie erstellen jetzt ein neues Material, sodass es völlig anders aussieht und leichter als das Objekt in der ersten Szene zu erkennen ist.
Navigieren Sie im Projektbereich zu Ihrem Ordner Materialien. Duplizieren Sie die SchaltflächeMaterialmaterial (drücken Sie STRG + D auf der Tastatur, oder klicken Sie mit der linken Maustaste auf Material, und wählen Sie dann im Menü Datei bearbeiten die Option Duplizieren aus).
Wählen Sie das neue ButtonMaterialmaterial (hier ButtonMaterial 1) aus, und klicken Sie im Inspektor auf das Farbfenster Albedo . Es wird ein Popup 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 sein eigener instance und unterscheidet sich vom Original.
Ziehen Sie das neue Material auf das untergeordnete GazeButton-Element , um das Aussehen nun vollständig zu aktualisieren, sodass es leicht von der Schaltfläche der ersten Szenen zu unterscheiden ist.
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 erstellen.

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 Sie die Klassen nach Abschluss des Buildvorgangs bearbeiten können).
Wechseln Sie zu Dateibuildeinstellungen>, und klicken Sie auf Erstellen.
Sie werden aufgefordert, den Ordner auszuwählen, in dem Sie die Projektmappe erstellen möchten.
Erstellen Sie einen BUILDS-Ordner , und erstellen Sie in diesem Ordner einen anderen Ordner mit einem entsprechenden Namen Ihrer Wahl.
Klicken Sie auf Ihren neuen Ordner, und klicken Sie dann auf Ordner auswählen, um diesen Ordner auszuwählen, um mit dem Build an diesem Speicherort zu beginnen.
Sobald Unity die Erstellung abgeschlossen hat (dies 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 Ihres Builds angezeigt. Öffnen Sie den Ordner, den Sie benannt haben, und doppelklicken Sie dann auf die Projektmappendatei (.sln) in diesem Ordner, um Ihre Projektmappe mit Visual Studio 2017 zu öffnen.

Das einzige, was noch zu tun ist, 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 auf der Lösungsplattformdie Option x86, Lokaler Computer aus.
Wählen Sie in der Projektmappenkonfigurationdebuggen aus.
Sie müssen nun alle Pakete in Ihrer Lösung wiederherstellen. Klicken Sie mit der rechten Maustaste auf Ihre Projektmappe, und klicken Sie auf NuGet-Pakete für Projektmappe wiederherstellen...

Hinweis

Dies geschieht, weil die Pakete, die Unity erstellt hat, für die Arbeit mit Ihren lokalen Computern referenziert werden müssen.
Navigieren 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 und bietet eine 360-Grad-Ansicht des eingehenden Videos (das für diese Art von Perspektive gefilmt wurde). Seien Sie nicht überrascht, wenn das Laden des Videos einige Sekunden dauert. Ihre App unterliegt ihrer verfügbaren Internetgeschwindigkeit, da das Video abgerufen und dann heruntergeladen werden muss, um in Ihre App zu streamen. Wenn Sie bereit sind, ändern Sie die Szenen und öffnen Sie Ihr zweites Video, indem Sie die rote Kugel betrachten! Dann können Sie zurück gehen und 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 azure Media Service zum Streamen von 360 Videos nutzt.

Screenshot einer Mixed Reality-Beispiel-App.

Screenshot eines Mixed Reality-App-Beispiels.

Bonusübungen

Übung 1

Es ist durchaus möglich, in diesem Tutorial nur eine einzelne Szene zum Ändern von Videos zu verwenden. Experimentieren Sie mit Ihrer Anwendung und machen Sie sie in eine einzelne Szene! Vielleicht fügen Sie der Mischung sogar ein weiteres Video hinzu.

Übung 2

Experimentieren Sie mit Azure und Unity, und versuchen Sie, die Möglichkeit zu implementieren, dass die App je nach Stärke einer Internetverbindung automatisch ein Video mit einer anderen Dateigröße auswählen kann.

HoloLens (1. Generation) und Azure 306: Videostreaming

Geräteunterstützung

Voraussetzungen

Vorbereitung

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

Kapitel 2: Das Azure-Portal: Erstellen des Media Service

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