HoloLens (1. Generation) und Azure 306: Videostreaming

Artikel
02/18/2025

Hinweis

Die Tutorials der Mixed Reality Academy wurden unter Berücksichtigung von HoloLens (1. Generation) und Mixed Reality Immersive Headsets entwickelt. Daher ist es uns wichtig, diese Tutorials für Entwickler zu belassen, die noch nach Anleitungen bei der Entwicklung 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 beibehalten, um weiterhin auf den unterstützten Geräten zu arbeiten. Es wird eine neue Reihe von Tutorials geben, die in Zukunft veröffentlicht werden, um zu veranschaulichen, wie für HoloLens 2 entwickelt werden kann. Dieser Hinweis wird mit einem Link zu diesen Tutorials aktualisiert, sobald 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 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 Übertragungsqualität nutzen können, um größere Zielgruppen auf den heute beliebtesten mobilen Geräten zu erreichen. Weitere Informationen finden Sie auf der Seite Azure Media Services.

Nach Abschluss dieses Kurses verfügen Sie über eine immersive Mixed Reality-Headset-Anwendung, die folgende Aufgaben ausführen kann:

Rufen Sie ein 360-Grad-Video aus einem Azure Storage über 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 gewinnen, zu nutzen, um Ihre Mixed Reality-Anwendung zu verbessern.

Geräteunterstützung

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

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 entsprechen, was zum Zeitpunkt des Schreibens (Mai 2018) getestet und überprüft wurde. Sie können die neueste Software verwenden, die im Artikel Installieren der Tools aufgeführt ist, obwohl nicht davon ausgegangen werden sollte, dass die Informationen in diesem Kurs perfekt dem entsprechen, 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 immersiver (VR)-Headsets
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 (einige lizenzfreie Videos finden Sie auf dieser Downloadseite)

Vorbereitende Schritte

Um Probleme beim Erstellen dieses Projekts zu vermeiden, wird dringend empfohlen, das in diesem Tutorial erwähnte Projekt in einem Stammordner oder in der Nähe des Stammordners zu 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 von 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 Lab-Situation durcharbeiten, bitten Sie Ihren Kursleiter oder einen der Betreuer 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 Leistungdie Option Standard aus.*
5. Wählen Sie unter Replikationdie Option Lokal redundanter Speicher (LRS) aus.
6. Lassen Sie Sichere Übertragung erforderlich als Deaktiviert.
7. Wählen Sie ein Abonnement aus.
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. Bestimmen Sie den Speicherort für Ihre Ressourcengruppe (wenn Sie eine neue Ressourcengruppe erstellen). Der Standort 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, nachdem die Dienst-instance erstellt wurde.
An diesem Punkt müssen Sie der Ressource nicht folgen, wechseln Sie einfach zum nächsten Kapitel.

Kapitel 2: Azure-Portal: Erstellen von Media Service

Um 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 weist derzeit ein rosafarbenes Symbol auf. Klicken Sie darauf, um eine neue Seite anzuzeigen.
Die neue Seite enthält eine Beschreibung des Media Service. Klicken Sie unten links in dieser Eingabeaufforderung auf die Schaltfläche Erstellen , um eine Zuordnung zu diesem Dienst zu erstellen.
Nachdem Sie auf Erstellen geklickt haben, wird ein 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 Abonnement aus.
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 zugeordnet sind (z. B. diese Labs), in einer gemeinsamen Ressourcengruppe zu speichern.
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 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, nachdem die 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 Ihre neue Dienst-instance zu erkunden.
Klicken Sie auf der neuen Seite Mediendienst im Bereich auf der linken Seite auf den Link Medienobjekte , der sich etwa in der Mitte 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 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 Statusanzeige wird grün angezeigt, wenn das Hochladen des Videos abgeschlossen ist.
Klicken Sie auf den Text oben (IhrServicename – Assets), um zur Seite Assets zurückzukehren.
Sie werden feststellen, dass Ihr Video erfolgreich hochgeladen wurde. Klicken Sie darauf.
Auf der Seite, zu der Sie weitergeleitet werden, finden Sie ausführliche 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 sind bereits standardmäßig festgelegt):
1. Name des Medienencoders Media Encoder Standard
2. Voreingestellte Codierung von Content 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 sehen eine Leiste mit hinzugefügtem Codierungsauftrag. Klicken Sie auf diese Leiste, und ein Bereich wird angezeigt, in dem der Fortschritt der Codierung angezeigt wird.
Warten Sie, bis der Auftrag abgeschlossen ist. Sobald dies abgeschlossen ist, können Sie das Panel 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 Vorgang kann einige Zeit in Anspruch nehmen.
Nachdem die codierte Version des Videos erstellt wurde, können Sie sie veröffentlichen, um es zugänglich zu machen. Klicken Sie dazu auf den blauen Link Objekte , um zur Ressourcenseite zurückzukehren.
Sie sehen Ihr Video zusammen mit einem anderen Video, das vom Medienobjekttyp Multi-Bitrate MP4 ist.

Hinweis

Möglicherweise stellen Sie fest, dass das neue Medienobjekt neben 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 Medienobjekt.
Sie sehen ein ähnliches Panel wie zuvor, nur dies ist eine andere Ressource. Klicken Sie oben in der Mitte der Seite auf die Schaltfläche Veröffentlichen .
Sie werden aufgefordert, einen Locator als Einstiegspunkt auf Dateien 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 festgelegt, von Ihrem aktuellen Datum bis zu einer Uhrzeit in der Zukunft (in diesem Fall hundert Jahre). Lassen Sie es unverändert, oder ändern Sie es 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 ist jetzt veröffentlicht und kann mithilfe des zugehörigen 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 die Datei 1920 x 960), und dann wird ein Bereich auf der rechten Seite angezeigt. Dort finden Sie eine Download-URL. Kopieren Sie diesen Endpunkt , da Sie ihn später in Ihrem Code verwenden werden.

Hinweis

Sie können auch die Schaltfläche Wiedergeben drücken, um Ihr Video wiederzugeben 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 mit dem nächsten Kapitel fortfahren.

Kapitel 3: Einrichten des Unity-Projekts

Es folgt eine typische Einrichtung für die Entwicklung mit dem Mixed Reality und ist 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 Speicherort fest (denken Sie daran, dass näher an Stammverzeichnissen besser ist). Klicken Sie dann auf Projekt erstellen.
Wenn Unity geöffnet ist, empfiehlt es sich, das Standardskript zu überprüfen Editor auf Visual Studio festgelegt ist. Wechseln Sie zu Einstellungen bearbeiten, und navigieren Sie dann im neuen Fenster zu Externe Tools. Ändern Sie external script Editor in Visual Studio 2017. Schließen Sie das Fenster Einstellungen .
Wechseln Sie als Nächstes zu Dateibuildeinstellungen, und ändern 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 Any Device (Beliebiges Gerät) festgelegt.
2. Buildtyp ist auf D3D festgelegt.
3. SDK ist auf Latest installed (Neueste Installation) festgelegt.
4. Visual Studio-Version ist auf Zuletzt installiert festgelegt.
5. Build und Ausführen ist auf Lokaler Computer festgelegt.
6. Machen Sie sich jetzt keine Gedanken über das Einrichten 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 sein (.NET 3.5-Äquivalent).
  2. Das 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 Supported (Virtuelle Realität 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 ProjektdateiProjekt speichern.

Kapitel 4: Importieren des InsideOutSphere Unity-Pakets

Wichtig

Wenn Sie die Unity Setup-Komponente 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 Unitypackages:

Klicken Sie mit dem Unity-Dashboard oben auf dem Bildschirm im Menü auf Ressourcen, und klicken Sie dann auf Benutzerdefiniertes Paket > importieren.
Verwenden Sie die Dateiauswahl, um das Paket InsideOutSphere.unitypackage auszuwählen, 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 Materialien 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 Hauptkameraobjekt aus, und aktualisieren Sie die folgenden Komponenten:
1. Transform
  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 das Prefab InsideOutSphere in den Hierarchiebereich .
Erweitern Sie das InsideOutSphere-Objekt innerhalb 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	Y	Z
0	0	0

Transformation – Drehung

X	Y	Z
0	-50	0

Transformieren – Skalieren

X	Y	Z
0	0	0

Screenshot des geöffneten Inspektorbildschirms für Inside Out Sphere.

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

Transformieren – Skalieren

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

So erstellen Sie diese Klasse:

Klicken Sie mit der rechten Maustaste auf den Ressourcenordner, der sich im Projektbereich befindet, und klicken Sie 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 zusammen mit der Awake()-Methode in die VideoController-Klasse 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 video1endpoint-Variable .
2. Die zweite in der video2endpoint-Variablen .
Warnung

Es gibt ein bekanntes Problem bei der Verwendung von https in Unity mit Version 2017.4.1f1. Wenn in den Videos bei der Wiedergabe ein Fehler angezeigt wird, versuchen Sie es 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 wechselt), indem er sich die Anvisieren-Schaltfläche 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 (damit 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. Dies ermöglicht die Überprüfung von Bedingungen und dann zurückgegebenen Werten basierend auf dem Ergebnis der Überprüfung, 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 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 in der neu hinzugefügten Skriptkomponente ein Feld mit einem leeren Wert vorhanden ist. Dies ist ein Verweisfeld, das auf die öffentlichen Variablen in Ihrem Code abzielt.
Ziehen Sie das InsideOutSphere-Objekt aus dem Hierarchiebereich in den Sphere-Slot , wie in der folgenden Abbildung dargestellt.

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ösen.

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 Skript Anvisieren, um es mit Visual Studio 2017 zu öffnen.
Stellen Sie sicher, dass sich der folgende Namespace oben im Skript befindet, und entfernen Sie alle anderen Namespaces:
```
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 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. Sie bearbeiten dann jedoch die neue Szene, sodass sich das GazeButton-Objekt an einer anderen Position befindet und ein anderes Aussehen hat. Dies soll zeigen, wie zwischen den Szenen gewechselt werden kann.

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

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 Über VideoScene1 und VideoScene2 verfügen.
Wechseln Sie mit Ihren beiden Szenen zu Dateibuildeinstellungen>. Ziehen Sie ihre Szenen im geöffneten Fenster Buildeinstellungen in den Abschnitt Szenen im Build .

Tipp

Sie können beide Szenen aus Dem Ordner Scenes auswählen, indem Sie die STRG-Taste gedrückt halten, dann mit der linken Maustaste auf jede Szene klicken und schließlich beides über ziehen.
Schließen Sie das Fenster Buildeinstellungen , und doppelklicken Sie auf VideoScene2.
Klicken Sie bei geöffneter zweiter Szene auf das untergeordnete GazeButton-Objekt von 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

Transformieren – Skalieren

X	Y	Z
1	1	1

Wenn das untergeordnete GazeButton-Element noch ausgewählt ist, sehen Sie sich den Inspektor und den Gitterfilter an. Klicken Sie auf das kleine Ziel neben dem Gitterverweisfeld:
Das Popupfenster Gitter auswählen wird angezeigt. Doppelklicken Sie in der Liste der Objekte auf das Cube-Gitter.
Der Gitterfilter wird aktualisiert und ist jetzt ein Cube. Klicken Sie nun auf das Zahnradsymbol neben Sphere Collider und dann auf Komponente entfernen, um den Collider aus diesem Objekt zu löschen.
Klicken Sie bei aktiviertem GazeButton unten im Inspektor auf die Schaltfläche Komponente hinzufügen. Geben Sie im Suchfeld feld ein, und Box Collider ist eine Option. Klicken Sie darauf, um Ihrem GazeButton-Objekt einen Box Collider hinzuzufügen.
Das GazeButton-Objekt wurde jetzt teilweise aktualisiert, sodass es anders aussieht, 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 zum Ordner Materialien. Duplizieren Sie die SchaltflächeMaterialmaterial (drücken Sie STRG + D auf der Tastatur, oder klicken Sie mit der linken Maustaste auf das Material, und wählen Sie dann im Menü Datei bearbeitendie Option Duplizieren aus).
Wählen Sie das neue ButtonMaterial Material (hier ButtonMaterial 1) aus, und klicken Sie im Inspektor auf das Albedo-Farbfenster . 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 eigenes 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 den Buildvorgang ausführen.

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 Projektmappe erstellen möchten.
Erstellen Sie einen BUILDS-Ordner , und erstellen Sie in diesem Ordner einen weiteren 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 Buildvorgang an diesem Speicherort zu starten.
Sobald 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 Ihres Builds angezeigt. Öffnen Sie den Ordner, den Sie benannt und erstellt haben, und doppelklicken Sie dann auf die Projektmappendatei (.sln) in diesem Ordner, um Ihre Projektmappe mit Visual Studio 2017 zu öffnen.

Es bleibt nur noch, Ihre App auf Ihrem Computer (oder lokalen Computer) bereitzustellen.

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ösungsplattformx86, Lokaler Computer aus.
Wählen Sie unter Projektmappenkonfigurationdie Option Debuggen aus.
Sie müssen jetzt 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 von Unity erstellten Pakete gezielt sein müssen, um mit Ihren lokalen Computern zu arbeiten.
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 und bietet eine 360-Grad-Ansicht des eingehenden Videos (das für diese Art von Perspektive gefilmt wurde). Wundern Sie sich nicht, wenn das Laden des Videos einige Sekunden dauert. Ihre App unterliegt der verfügbaren Internetgeschwindigkeit, da das Video abgerufen und dann heruntergeladen werden muss, damit es in Ihre App gestreamt werden kann. Wenn Sie bereit sind, ändern Sie die 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 Azure Media Service zum Streamen von 360-Videos nutzt.

Screenshot einer Beispiel-Mixed Reality-App.

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

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 zu einer einzigen Szene! Vielleicht fügen Sie sogar ein weiteres Video zur Mischung hinzu.

Übung 2

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

Teilen über

HoloLens (1. Generation) und Azure 306: Videostreaming

Geräteunterstützung

Voraussetzungen

Vorbereitende Schritte

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

Kapitel 2: Azure-Portal: Erstellen von 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

Feedback

Zusätzliche Ressourcen