HoloLens (prima generazione) e Azure 306: Streaming video


Nota

Le esercitazioni di Mixed Reality Academy sono state progettate in base a HoloLens (prima generazione) e ai visori VR immersive di realtà mista. Pertanto, riteniamo importante lasciarle a disposizione degli sviluppatori a cui serve ancora materiale sussidiario per lo sviluppo di questi dispositivi. Queste esercitazioni non verranno aggiornate con i set di strumenti o le interazioni più recenti usati per HoloLens 2. Rimarranno invariate per consentire di continuare a lavorare sui dispositivi supportati. Saranno disponibili nuove serie di esercitazioni che verranno pubblicate in futuro che mostreranno come sviluppare per HoloLens 2. Questo avviso verrà aggiornato con un collegamento a tali esercitazioni quando vengono pubblicati.


Screenshot di un esempio di Windows Mixed Reality V R.Screenshot di un'esperienza Windows Mixed Reality V R.

In questo corso si apprenderà come connettere i servizi multimediali di Azure a un'esperienza VR di Windows Mixed Reality per consentire la riproduzione video a 360 gradi in visori immersivi.

Servizi multimediali di Azure sono una raccolta di servizi che offrono servizi di streaming video di qualità di trasmissione per raggiungere gruppi di destinatari più grandi sui dispositivi mobili più diffusi di oggi. Per altre informazioni, visitare la pagina Servizi multimediali di Azure.

Dopo aver completato questo corso, si avrà un'applicazione visore vr vr immersivo di realtà mista, che sarà in grado di eseguire le operazioni seguenti:

  1. Recuperare un video a 360 gradi da un'archiviazione di Azure tramite il servizio multimediale di Azure.

  2. Visualizzare il video recuperato a 360 gradi all'interno di una scena unity.

  3. Spostarsi tra due scene, con due video diversi.

Nell'applicazione è possibile integrare i risultati con la progettazione. Questo corso è progettato per insegnare come integrare un servizio di Azure con il progetto Unity. È il tuo lavoro per usare le conoscenze acquisite da questo corso per migliorare l'applicazione di realtà mista.

Supporto di dispositivi

Corso HoloLens Visori VR immersive
MR e Azure 306: Streaming video ✔️

Prerequisiti

Nota

Questa esercitazione è progettata per gli sviluppatori che hanno esperienza di base con Unity e C#. Tenere presente anche che i prerequisiti e le istruzioni scritte all'interno di questo documento rappresentano ciò che è stato testato e verificato al momento della scrittura (maggio 2018). Si è liberi di usare il software più recente, come elencato nell'articolo degli strumenti di installazione, anche se non dovrebbe essere considerato che le informazioni in questo corso corrisponderanno perfettamente a ciò che troverete nel software più recente rispetto a quello elencato di seguito.

Per questo corso è consigliabile usare l'hardware e il software seguenti:

Prima di iniziare

  1. Per evitare problemi durante la compilazione di questo progetto, è consigliabile creare il progetto menzionato in questa esercitazione in una cartella radice o quasi radice (i percorsi di cartelle lunghe possono causare problemi in fase di compilazione).

  2. Configurare e testare il visore immersivo Realtà mista.

    Nota

    Per questo corso non saranno necessari controller di movimento. Se è necessario supportare la configurazione dell'visore visore immersivo, fare clic sul collegamento su come configurare Windows Mixed Reality.

Capitolo 1 - Portale di Azure: creazione dell'account di archiviazione di Azure

Per usare il servizio di archiviazione di Azure, è necessario creare e configurare un account di archiviazione nel portale di Azure.

  1. Accedere al portale di Azure.

    Nota

    Se non si dispone già di un account Azure, sarà necessario crearne uno. Se si segue questa esercitazione in una classe o in una situazione del lab, chiedere all'insegnante o a uno dei proctor di configurare il nuovo account.

  2. Dopo aver eseguito l'accesso, fare clic su Account di archiviazione nel menu a sinistra.

    Screenshot del menu Portale di Azure. Gli account di archiviazione sono evidenziati.

  3. Nella scheda Account di archiviazione fare clic su Aggiungi.

    Screenshot della finestra di dialogo account di archiviazione. L'aggiunta è evidenziata.

  4. Nella scheda Crea account di archiviazione :

    1. Inserire un nome per l'account, tenere presente che questo campo accetta solo numeri e lettere minuscole.

    2. Per Modello di distribuzione selezionare Gestione risorse.

    3. Per Tipo di account selezionare Archiviazione (utilizzo generico v1).

    4. Per Prestazioni selezionare Standard.*

    5. Per Replica selezionare Archiviazione con ridondanza locale (LRS).

    6. Lasciare il trasferimento sicuro obbligatorio come Disabilitato.

    7. Selezionare una Sottoscrizione.

    8. Scegliere un gruppo di risorse o crearne uno nuovo. Un gruppo di risorse consente di monitorare, controllare l'accesso, il provisioning e gestire la fatturazione per una raccolta di asset di Azure.

    9. Determinare la posizione per il gruppo di risorse ( se si sta creando un nuovo gruppo di risorse). La posizione si trova idealmente nell'area in cui l'applicazione verrà eseguita. Alcuni asset di Azure sono disponibili solo in determinate aree.

  5. Sarà necessario confermare che i Termini e le condizioni applicati al servizio siano stati compresi.

    Screenshot della pagina crea account di archiviazione.

  6. Dopo aver fatto clic su Crea, è necessario attendere che il servizio venga creato, potrebbe richiedere un minuto.

  7. Una notifica verrà visualizzata nel portale dopo la creazione dell'istanza del servizio.

    Screenshot della notifica riuscita della distribuzione.

  8. A questo punto non è necessario seguire la risorsa, passare semplicemente al capitolo successivo.

Capitolo 2 - Portale di Azure: creazione del servizio multimediale

Per usare il servizio multimediale di Azure, è necessario configurare un'istanza del servizio da rendere disponibile per l'applicazione(dove il titolare dell'account deve essere un Amministrazione).

  1. Nel portale di Azure fare clic su Crea una risorsa nell'angolo superiore sinistro e cercare Servizio multimediale, premere INVIO. La risorsa che si vuole ha attualmente un'icona rosa; fare clic su questa pagina per visualizzare una nuova pagina.

    Screenshot del portale di Azure. L'opzione Servizi multimediali è evidenziata.

  2. La nuova pagina fornisce una descrizione del servizio multimediale. Nella parte inferiore sinistra del prompt fare clic sul pulsante Crea per creare un'associazione con questo servizio.

    Screenshot del portale di Azure. Il pulsante Crea è evidenziato.

  3. Dopo aver fatto clic su Crea un pannello verrà visualizzato dove è necessario fornire alcuni dettagli sul nuovo servizio multimediale:

    1. Inserire il nome dell'account desiderato per questa istanza del servizio.

    2. Selezionare una Sottoscrizione.

    3. Scegliere un gruppo di risorse o crearne uno nuovo. Un gruppo di risorse consente di monitorare, controllare l'accesso, il provisioning e gestire la fatturazione per una raccolta di asset di Azure. È consigliabile mantenere tutti i servizi di Azure associati a un singolo progetto (ad esempio questi lab) in un gruppo di risorse comune.

    Per altre informazioni sui gruppi di risorse di Azure, seguire questo collegamento su come gestire i gruppi di risorse di Azure.

    1. Determinare la posizione per il gruppo di risorse ( se si sta creando un nuovo gruppo di risorse). La posizione si trova idealmente nell'area in cui l'applicazione verrà eseguita. Alcuni asset di Azure sono disponibili solo in determinate aree.

    2. Per la sezione Account di archiviazione fare clic sulla sezione Selezionare... e quindi fare clic sull'account di archiviazione creato nell'ultimo capitolo.

    3. Dovrai anche confermare che hai capito le Condizioni e le condizioni applicate al servizio.

    4. Fare clic su Crea.

      Screenshot della pagina Crea account del servizio multimediale.

  4. Dopo aver fatto clic su Crea, è necessario attendere che il servizio venga creato, potrebbe richiedere un minuto.

  5. Una notifica verrà visualizzata nel portale dopo la creazione dell'istanza del servizio.

    Screenshot dell'icona di notifica nel menu del portale.

  6. Fare clic sulla notifica per esplorare la nuova istanza del servizio.

    Screenshot della notifica per la corretta distribuzione.

  7. Fare clic sul pulsante Vai alla risorsa nella notifica per esplorare la nuova istanza del servizio.

  8. All'interno della nuova pagina Servizi multimediali, all'interno del pannello a sinistra, fare clic sul collegamento Asset , che si trova a metà strada verso il basso.

  9. Nell'angolo superiore sinistro della pagina nella pagina successiva fare clic su Carica.

    Screenshot della pagina Asset. Le opzioni Carica e Asset sono evidenziate.

  10. Fare clic sull'icona Cartella per esplorare i file e selezionare il primo video 360 che si desidera trasmettere.

    È possibile seguire questo collegamento per scaricare un video di esempio.

    Screenshot della pagina di caricamento di un asset video.

Avviso

I nomi file lunghi possono causare un problema con il codificatore: per garantire che i video non abbiano problemi, è consigliabile abbreviare la lunghezza dei nomi dei file video.

  1. L'indicatore di stato diventa verde al termine del caricamento del video.

    Screenshot dell'indicatore di stato del caricamento di un asset video.

  2. Fare clic sul testo precedente (nomeservizio - Asset) per tornare alla pagina Asset .

  3. Si noterà che il video è stato caricato correttamente. Fare clic su di esso.

    Screenshot della pagina Asset. Il video 1 punto M P 4 è evidenziato.

  4. La pagina a cui si viene reindirizzati mostrerà informazioni dettagliate sul video. Per poter usare il video è necessario codificarlo, facendo clic sul pulsante Codifica in alto a sinistra della pagina.

    Screenshot della pagina dell'asset. Il pulsante Di codifica è evidenziato.

  5. Verrà visualizzato un nuovo pannello a destra, in cui sarà possibile impostare le opzioni di codifica per il file. Impostare le proprietà seguenti (alcune verranno già impostate per impostazione predefinita):

    1. Nome del codificatore multimediale Media Encoder Standard

    2. Codifica del contenuto adattivo a velocità in bit multipla MP4 preimpostato di codifica

    3. Nome processo Media Encoder Standard elaborazione di Video1.mp4

    4. Nome dell'asset multimediale di output Video1.mp4 - Media Encoder Standard codificato

      Screenshot della pagina codificare un asset.

  6. Fare clic sul pulsante Crea.

  7. Si noterà una barra con processo di codifica aggiunta, fare clic su tale barra e verrà visualizzato un pannello con lo stato di avanzamento codifica visualizzato.

    Screenshot del processo di codifica con etichetta sulla barra delle notifiche aggiunto.

    Screenshot della pagina di elaborazione del codificatore.

  8. Attendere il completamento del processo. Al termine, è possibile chiudere il pannello con la "X" in alto a destra del pannello.

    Screenshot dell'indicatore di stato con lo stato completato.

    Screenshot del menu in alto della pagina di elaborazione del coder multimediale.

    Importante

    Il tempo necessario dipende dalle dimensioni del file del video. Questo processo può richiedere molto tempo.

  9. Ora che è stata creata la versione codificata del video, è possibile pubblicarla per renderla accessibile. A tale scopo, fare clic sul collegamento blu Asset per tornare alla pagina asset.

    Screenshot del portale di Azure. Il collegamento asset è evidenziato.

  10. Verrà visualizzato il video insieme a un altro, che è di Tipo di asset mp4 a bitrate multipli.

    Screenshot del menu Asset di Microsoft Azure.

    Nota

    È possibile notare che il nuovo asset, insieme al video iniziale, è Sconosciuto e ha "0" byte per dimensioni, è sufficiente aggiornare la finestra per aggiornarla.

  11. Fare clic su questo nuovo asset.

    Screenshot della directory che elenca gli asset.

  12. Verrà visualizzato un pannello simile a quello usato in precedenza, ma si tratta di un asset diverso. Fare clic sul pulsante Pubblica in alto al centro della pagina.

    Screenshot della barra dei menu in alto. Il pulsante Pubblica è evidenziato.

  13. Verrà richiesto di impostare un localizzatore, ovvero il punto di ingresso, su file/s negli asset. Per lo scenario impostare le proprietà seguenti:

    1. Tipo di> localizzatoreProgressivo.

    2. La data e l'ora verranno impostate per te, dalla data corrente, a un'ora in futuro (in questo caso cento anni). Lasciare invariato o modificarlo in base alle proprie esigenze.

    Nota

    Per altre informazioni sui localizzatori e su cosa è possibile scegliere, vedere la documentazione di Servizi multimediali di Azure.

  14. Nella parte inferiore del pannello fare clic sul pulsante Aggiungi .

    Screenshot che mostra le liste di directory con l'asset da pubblicare.

  15. Il video è ora pubblicato e può essere trasmesso tramite il relativo endpoint. Più in basso la pagina è una sezione File . Qui saranno presenti le diverse versioni codificate del video. Selezionare la risoluzione più alta possibile (nell'immagine seguente è il file 1920x960), quindi verrà visualizzato un pannello a destra. Verrà visualizzato un URL di download. Copiare questo endpoint perché verrà usato più avanti nel codice.

    Screenshot della sezione Microsoft File di Azure.

    Screenshot della pagina delle informazioni sull'asset.

    Nota

    È anche possibile premere il pulsante Riproduci per riprodurre il video e testarlo.

  16. È ora necessario caricare il secondo video che verrà usato in questo lab. Seguire i passaggi precedenti, ripetendo lo stesso processo per il secondo video. Assicurarsi di copiare anche il secondo endpoint . Usare il collegamento seguente per scaricare un secondo video.

  17. Dopo aver pubblicato entrambi i video, si è pronti per passare al capitolo successivo.

Capitolo 3 - Configurazione del progetto Unity

Di seguito è riportato un tipico set up per lo sviluppo con il Realtà mista e, di conseguenza, è un modello valido per altri progetti.

  1. Aprire Unity e fare clic su Nuovo.

    Screenshot della scheda Progetti Unity. Il pulsante Nuovo è evidenziato.

  2. È ora necessario specificare un nome di progetto Unity, inserire MR_360VideoStreaming. Assicurarsi che il tipo di progetto sia impostato su 3D. Impostare La posizione su un punto appropriato per l'utente (tenere presente che più vicino alle directory radice è preferibile). Fare quindi clic su Crea progetto.

    Screenshot della pagina Dei nuovi progetti unity.

  3. Con Unity aperto, vale la pena verificare che l'editor di script predefinito sia impostato su Visual Studio. Passare a Modificapreferenze e quindi dalla nuova finestra passare a Strumenti esterni. Modificare l'editor di script esterni in Visual Studio 2017. Chiudere la finestra Preferenze .

    Screenshot del menu dell'editor di script esterno. Visual Studio 2017 è selezionato.

  4. Passare quindi a Impostazioni compilazionefile e impostare la piattaforma su piattaforma UWP (Universal Windows Platform), facendo clic sul pulsante Cambia piattaforma.

  5. Assicurarsi anche che:

    1. Il dispositivo di destinazione è impostato su Qualsiasi dispositivo.

    2. Il tipo di compilazione è impostato su D3D.

    3. L'SDK è impostato su Più recente installato.

    4. La versione di Visual Studio è impostata su Più recente installata.

    5. Compilazione ed esecuzione è impostata su Computer locale.

    6. Non preoccuparti di configurare scene in questo momento, perché queste impostazioni verranno configurate in un secondo momento.

    7. Per il momento le impostazioni rimanenti devono essere lasciate come predefinite.

      Screenshot della schermata delle impostazioni di compilazione di Unity.

  6. Nella finestra Build Settings (Impostazioni compilazione) fare clic sul pulsante Player Settings (Impostazioni lettore ) per aprire il pannello correlato nello spazio in cui si trova il controllo .

  7. In questo pannello è necessario verificare alcune impostazioni:

    1. Nella scheda Altre impostazioni :

      1. La versione del runtimedi scripting deve essere stabile (equivalente a .NET 3.5).

      2. Il back-end di scripting deve essere .NET.

      3. Il livello di compatibilità api deve essere .NET 4.6.

        Screenshot che mostra la pagina Impostazioni per piattaforma UWP (Universal Windows Platform).

    2. Più avanti nel pannello, in Impostazioni XR (disponibile sotto Impostazioni di pubblicazione), selezionare Virtual Reality Supported (Realtà virtuale supportata), assicurarsi che sia stato aggiunto Windows Mixed Reality SDK.

      Screenshot della schermata delle impostazioni di Unity X R.

    3. Nella scheda Impostazioni di pubblicazione , in Funzionalità, selezionare:

      • InternetClient

        Screenshot della schermata Funzionalità. Il client Internet è selezionato.

  8. Dopo aver apportato queste modifiche, chiudere la finestra Impostazioni di compilazione .

  9. Salvare il progetto di salvataggiofile di progetto.

Capitolo 4 - Importazione del pacchetto InsideOutSphere Unity

Importante

Se si vuole ignorare il componente Configura Unity di questo corso e continuare direttamente nel codice, è possibile scaricare questo pacchetto unitypackage, importarlo nel progetto come pacchetto personalizzato e continuare dal capitolo 5. Sarà comunque necessario creare un progetto Unity.

Per questo corso è necessario scaricare un pacchetto di asset unity denominato InsideOutSphere.unitypackage.

Come importare il pacchetto unity:

  1. Con il dashboard di Unity davanti all'utente, fare clic su Asset nel menu nella parte superiore della schermata, quindi fare clic su Importa pacchetto > personalizzato.

    Screenshot del menu asset. Il menu del pacchetto di importazione è aperto. Il pacchetto personalizzato è selezionato.

  2. Usare la selezione file per selezionare il pacchetto InsideOutSphere.unitypackage e fare clic su Apri. Verrà visualizzato un elenco di componenti per questo asset. Confermare l'importazione facendo clic su Importa.

    Screenshot della schermata Importa pacchetto Unity.

  3. Al termine dell'importazione, si noteranno tre nuove cartelle, Materiali, Modelli e Prefab, che sono state aggiunte alla cartella Assets . Questo tipo di struttura di cartelle è tipico per un progetto Unity.

    Screenshot della cartella assets.

    1. Aprire la cartella Models e si noterà che il modello InsideOutSphere è stato importato.

    2. All'interno della cartella Materialstroverai il materiale InsideOutSphereslambert1, insieme a un materiale denominato ButtonMaterial, usato da GazeButton, che vedrai presto.

    3. La cartella Prefab contiene il prefab InsideOutSphere che contiene sia il modelloInsideOutSphere che lo GazeButton.

    4. Non è incluso alcun codice, si scriverà il codice seguendo questo corso.

  4. All'interno della gerarchia selezionare l'oggetto Fotocamera principale e aggiornare i componenti seguenti:

    1. Trasformare

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

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

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

    2. Fotocamera

      1. Cancella flag: colore a tinta unita.

      2. Ritaglio piani: vicino: 0,1, lontano: 6.

        Screenshot della schermata Inspector (Controllo).

  5. Passare alla cartella Prefab e quindi trascinare il prefab InsideOutSphere nel pannello Gerarchia .

    Screenshot del menu della cartella Prefab e dell'ambiente di sviluppo.

  6. Espandere l'oggetto InsideOutSphere all'interno della gerarchia facendo clic sulla piccola freccia accanto. Verrà visualizzato un oggetto figlio sotto di esso denominato GazeButton. Questo verrà usato per modificare le scene e quindi i video.

    Screenshot della scheda gerarchia.

  7. Nella finestra Di controllo fare clic sul componente Transform di InsideOutSphere, verificare che siano impostate le proprietà seguenti:

Trasforma - Posizione

X S Z
0 0 0

Trasforma - Rotazione

X S Z
0 -50 0

Trasformazione - Ridimensionamento

X S Z
0 0 0

Screenshot della schermata Inspector aperta per Inside Out Sphere.

  1. Fare clic sull'oggetto figlio GazeButton e impostarne Transform come indicato di seguito:

Trasforma - Posizione

X S Z
3,6 1.3 0

Trasforma - Rotazione

X S Z
0 0 0

Trasformazione - Ridimensionamento

X S Z
1 1 1

Screenshot della scheda scena aperta.

Capitolo 5 - Creare la classe VideoController

La classe VideoController ospita i due endpoint video che verranno usati per trasmettere il contenuto dal servizio multimediale di Azure.

Per creare questa classe:

  1. Fare clic con il pulsante destro del mouse nella cartella asset, disponibile nel pannello del progetto e scegliere Crea > cartella. Assegnare alla cartella il nome Scripts.

    Screenshot del menu della cartella asset. Il menu crea è aperto e la cartella è selezionata.

    Screenshot della scheda del progetto. La cartella Assets è selezionata.

  2. Fare doppio clic sulla cartella Script per aprirla.

  3. Fare clic con il pulsante destro del mouse all'interno della cartella, quindi scegliere Crea > script C#. Assegnare un nome allo script VideoController.

    Screenshot del file denominato Video Controller.

  4. Fare doppio clic sul nuovo script VideoController per aprirlo con Visual Studio 2017.

    Screenshot del codice per il file del controller video.

  5. Aggiornare gli spazi dei nomi nella parte superiore del file di codice come indicato di seguito:

    using System.Collections;
    using UnityEngine;
    using UnityEngine.SceneManagement;
    using UnityEngine.Video;
    
  6. Immettere le variabili seguenti nella classe VideoController, insieme al metodo Awake():

        /// <summary> 
        /// Provides Singleton-like behaviour to this class. 
        /// </summary> 
        public static VideoController instance; 
    
        /// <summary> 
        /// Reference to the Camera VideoPlayer Component.
        /// </summary> 
        private VideoPlayer videoPlayer; 
    
        /// <summary>
        /// Reference to the Camera AudioSource Component.
        /// </summary> 
        private AudioSource audioSource; 
    
        /// <summary> 
        /// Reference to the texture used to project the video streaming 
        /// </summary> 
        private RenderTexture videoStreamRenderTexture;
    
        /// <summary>
        /// Insert here the first video endpoint
        /// </summary>
        private string video1endpoint = "-- Insert video 1 Endpoint here --";
    
        /// <summary>
        /// Insert here the second video endpoint
        /// </summary>
        private string video2endpoint = "-- Insert video 2 Endpoint here --";
    
        /// <summary> 
        /// Reference to the Inside-Out Sphere. 
        /// </summary> 
        public GameObject sphere;
    
        void Awake()
        {
            instance = this;
        }
    
  7. Ora è il momento di immettere gli endpoint dai video del servizio multimediale di Azure:

    1. Primo nella variabile video1endpoint .

    2. Secondo nella variabile video2endpoint .

    Avviso

    Si verifica un problema noto con l'uso di https all'interno di Unity, con la versione 2017.4.1f1. Se i video forniscono un errore durante la riproduzione, provare a usare invece "http".

  8. Successivamente, il metodo Start() deve essere modificato. Questo metodo verrà attivato ogni volta che l'utente passa la scena (di conseguenza passando il video) guardando il pulsante sguardo.

        // Use this for initialization
        void Start()
        {
            Application.runInBackground = true;
            StartCoroutine(PlayVideo());
        }
    
  9. Seguendo il metodo Start() inserire il metodo PlayVideo()IEnumerator , che verrà usato per avviare i video senza problemi (quindi non viene visualizzato alcun stutter).

        private IEnumerator PlayVideo()
        {
            // create a new render texture to display the video 
            videoStreamRenderTexture = new RenderTexture(2160, 1440, 32, RenderTextureFormat.ARGB32);
    
            videoStreamRenderTexture.Create();
    
            // assign the render texture to the object material 
            Material sphereMaterial = sphere.GetComponent<Renderer>().sharedMaterial;
    
            //create a VideoPlayer component 
            videoPlayer = gameObject.AddComponent<VideoPlayer>();
    
            // Set the video to loop. 
            videoPlayer.isLooping = true;
    
            // Set the VideoPlayer component to play the video from the texture 
            videoPlayer.renderMode = VideoRenderMode.RenderTexture;
    
            videoPlayer.targetTexture = videoStreamRenderTexture;
    
            // Add AudioSource 
            audioSource = gameObject.AddComponent<AudioSource>();
    
            // Pause Audio play on Awake 
            audioSource.playOnAwake = true;
            audioSource.Pause();
    
            // Set Audio Output to AudioSource 
            videoPlayer.audioOutputMode = VideoAudioOutputMode.AudioSource;
            videoPlayer.source = VideoSource.Url;
    
            // Assign the Audio from Video to AudioSource to be played 
            videoPlayer.EnableAudioTrack(0, true);
            videoPlayer.SetTargetAudioSource(0, audioSource);
    
            // Assign the video Url depending on the current scene 
            switch (SceneManager.GetActiveScene().name)
            {
                case "VideoScene1":
                    videoPlayer.url = video1endpoint;
                    break;
    
                case "VideoScene2":
                    videoPlayer.url = video2endpoint;
                    break;
    
                default:
                    break;
            }
    
            //Set video To Play then prepare Audio to prevent Buffering 
            videoPlayer.Prepare();
    
            while (!videoPlayer.isPrepared)
            {
                yield return null;
            }
    
            sphereMaterial.mainTexture = videoStreamRenderTexture;
    
            //Play Video 
            videoPlayer.Play();
    
            //Play Sound 
            audioSource.Play();
    
            while (videoPlayer.isPlaying)
            {
                yield return null;
            }
        }
    
  10. L'ultimo metodo necessario per questa classe è il metodo ChangeScene(), che verrà usato per scambiare tra scene.

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

    Suggerimento

    Il metodo ChangeScene() usa una funzionalità C# utile denominata Operatore condizionale. Ciò consente di controllare le condizioni e quindi i valori restituiti in base al risultato del controllo, tutti all'interno di un'unica istruzione. Seguire questo collegamento per altre informazioni sull'operatore condizionale.

  11. Salvare le modifiche in Visual Studio prima di tornare a Unity.

  12. Tornare all'editor di Unity, fare clic e trascinare la classe VideoController [from]{.sottolinea} la cartella Script nell'oggetto Fotocamera principale nel pannello gerarchia .

  13. Fare clic sulla fotocamera principale e guardare il pannello di controllo. Si noterà che all'interno del componente Script appena aggiunto è presente un campo con un valore vuoto. Si tratta di un campo di riferimento destinato alle variabili pubbliche all'interno del codice.

  14. Trascinare l'oggetto InsideOutSphere dal pannello gerarchia allo slot Sphere , come illustrato nell'immagine seguente.

    Screenshot del menu gerarchia. La fotocamera principale è selezionata.Screenshot dello slot Sphere.

Capitolo 6 - Creare la classe Gaze

Questa classe è responsabile della creazione di un raycast che verrà proiettato avanti dalla fotocamera principale, per rilevare l'oggetto a cui l'utente sta esaminando. In questo caso, raycast dovrà identificare se l'utente sta esaminando l'oggetto GazeButton nella scena e attivare un comportamento.

Per creare questa classe:

  1. Passare alla cartella Script creata in precedenza.

  2. Fare clic con il pulsante destro del mouse nel pannello di progetto , crearescript C#. Assegnare allo script lo sguardo.

  3. Fare doppio clic sul nuovo script Gaze per aprirlo con Visual Studio 2017.

  4. Assicurarsi che lo spazio dei nomi seguente sia nella parte superiore dello script e rimuovere eventuali altri elementi:

    using UnityEngine;
    
  5. Aggiungere quindi le variabili seguenti all'interno della classe Gaze :

        /// <summary> 
        /// Provides Singleton-like behaviour to this class. 
        /// </summary> 
        public static Gaze instance;
    
        /// <summary> 
        /// Provides a reference to the object the user is currently looking at. 
        /// </summary> 
        public GameObject FocusedGameObject { get; private set; }
    
        /// <summary> 
        /// Provides a reference to compare whether the user is still looking at 
        /// the same object (and has not looked away). 
        /// </summary> 
        private GameObject oldFocusedObject = null;
    
        /// <summary> 
        /// Max Ray Distance 
        /// </summary> 
        float gazeMaxDistance = 300;
    
        /// <summary> 
        /// Provides whether an object has been successfully hit by the raycast. 
        /// </summary> 
        public bool Hit { get; private set; }
    
  6. Il codice per i metodi Awake() e Start() deve ora essere aggiunto.

        private void Awake()
        {
            // Set this class to behave similar to singleton 
            instance = this;
        }
    
        void Start()
        {
            FocusedGameObject = null;
        }
    
  7. Aggiungere il codice seguente nel metodo Update() per proiettare un Raycast e rilevare il colpo di destinazione:

        void Update()
        {
            // Set the old focused gameobject. 
            oldFocusedObject = FocusedGameObject;
            RaycastHit hitInfo;
    
            // Initialise Raycasting. 
            Hit = Physics.Raycast(Camera.main.transform.position, Camera.main.transform.forward, out hitInfo, gazeMaxDistance);
    
            // Check whether raycast has hit. 
            if (Hit == true)
            {
                // Check whether the hit has a collider. 
                if (hitInfo.collider != null)
                {
                    // Set the focused object with what the user just looked at. 
                    FocusedGameObject = hitInfo.collider.gameObject;
                }
                else
                {
                    // Object looked on is not valid, set focused gameobject to null. 
                    FocusedGameObject = null;
                }
            }
            else
            {
                // No object looked upon, set focused gameobject to null.
                FocusedGameObject = null;
            }
    
            // Check whether the previous focused object is this same 
            // object (so to stop spamming of function). 
            if (FocusedGameObject != oldFocusedObject)
            {
                // Compare whether the new Focused Object has the desired tag we set previously. 
                if (FocusedGameObject.CompareTag("GazeButton"))
                {
                    FocusedGameObject.SetActive(false);
                    VideoController.instance.ChangeScene();
                }
            }
        }
    
  8. Salvare le modifiche in Visual Studio prima di tornare a Unity.

  9. Fare clic e trascinare la classe Gaze dalla cartella Script all'oggetto Main Camera nel pannello gerarchia .

Capitolo 7 - Configurare le due scene di Unity

Lo scopo di questo capitolo è configurare le due scene, ognuna che ospita un video in streaming. Si duplicerà la scena già creata, in modo che non sia necessario configurarla di nuovo, anche se si modifica la nuova scena, in modo che l'oggetto GazeButton si trovi in una posizione diversa e abbia un aspetto diverso. Si tratta di mostrare come cambiare tra le scene.

  1. Eseguire questa operazione passando a Salva > scena come.... Verrà visualizzata una finestra di salvataggio. Fare clic sul pulsante Nuova cartella .

    Capitolo 7 - Configurare le due scene di Unity

  2. Assegnare un nome alla cartella Scene.

  3. La finestra Salva scena sarà comunque aperta. Aprire la cartella Scene appena creata.

  4. Nel campo Nome file digitareVideoScene1 e quindi premere Salva.

  5. Tornare a Unity, aprire la cartella Scene e fare clic con il pulsante sinistro del mouse sul file VideoScene1 . Usare la tastiera e premere CTRL + D per duplicare tale scena

    Suggerimento

    Il comando Duplicate può essere eseguito anche passando a Modifica > duplicato.

  6. Unity incrementerà automaticamente il numero dei nomi della scena, ma controllarlo comunque, per assicurarsi che corrisponda al codice inserito in precedenza.

    Dovresti avere VideoScene1 e VideoScene2.

  7. Con le due scene, passare a Impostazioni di compilazione file>. Con la finestra Impostazioni di compilazione aperta, trascinare le scene nella sezione Scene in Compilazione .

    Screenshot della finestra Impostazioni di compilazione.

    Suggerimento

    È possibile selezionare entrambe le scene dalla cartella Scene tenendo premuto il pulsante CTRL e quindi fare clic a sinistra su ogni scena e infine trascinare entrambi.

  8. Chiudere la finestra Impostazioni di compilazione e fare doppio clic su VideoScene2.

  9. Con la seconda scena aperta, fare clic sull'oggetto figlio GazeButton di InsideOutSphere e impostarne Transform come indicato di seguito:

Trasformazione - Posizione

X S Z
0 1.3 3,6

Trasformazione - Rotazione

X S Z
0 0 0

Trasformazione - Scalabilità

X S Z
1 1 1
  1. Con il figlio GazeButton ancora selezionato, esaminare Il controllo e il filtro mesh. Fare clic sulla destinazione piccola accanto al campo di riferimento Mesh :

    Screenshot della schermata di controllo per il pulsante sguardo.

  2. Verrà visualizzata una finestra popup Select Mesh . Fare doppio clic sulla mesh del cubo dall'elenco di Asset.

    Screenshot della finestra popup Seleziona mesh.

  3. Il filtro mesh verrà aggiornato e ora sarà un cubo. Fare quindi clic sull'icona Ingranaggio accanto a Sphere Collider e fare clic su Rimuovi componente per eliminare il collider da questo oggetto.

    Screenshot del menu Sphere Collider. È selezionata l'opzione Rimuovi componente.

  4. Con l'opzione GazeButton ancora selezionata, fare clic sul pulsante Aggiungi componente nella parte inferiore del controllo. Nel campo di ricerca digitare casella e Box Collider sarà un'opzione, quindi fare clic su questo, per aggiungere un Collider box all'oggetto GazeButton .

    Screenshot della casella di ricerca Aggiungi componente.

  5. Il GazeButton è ora aggiornato parzialmente, per apparire diverso, tuttavia, si creerà un nuovo materiale, in modo che sembri completamente diverso, ed è più facile da riconoscere come oggetto diverso, rispetto all'oggetto nella prima scena.

  6. Passare alla cartella Materiali all'interno del pannello di progetto. Duplicare il materiale ButtonMaterial (premere CTRL + D sulla tastiera o fare clic con il pulsante sinistro sul materiale, quindi dall'opzione Modifica file selezionare Duplicato).

    Screenshot della cartella Materiali nella scheda progetto.Screenshot del menu di modifica con duplicato selezionato.

  7. Selezionare il nuovo materiale ButtonMaterial (qui denominato ButtonMaterial 1) e all'interno della finestra Controllo fare clic sulla finestra colore Albedo . Verrà visualizzato un popup, in cui è possibile selezionare un altro colore (scegliere quale si vuole), quindi chiudere il popup. Il materiale sarà la propria istanza e diversa rispetto all'originale.

    Screenshot del popup di selezione dei colori.

  8. Trascinare il nuovo materiale sul bambino GazeButton , per aggiornarne completamente l'aspetto, in modo che sia facilmente distinguebile dal pulsante delle prime scene.

    Screenshot della scheda della scena dell'editor di progetto.

  9. A questo punto è possibile testare il progetto nell'editor prima di compilare il progetto UWP.

    • Premere il pulsante Playnell'editor e indossare il visore visore.

      Screenshot che mostra i pulsanti play, pause e skip. Il pulsante play è evidenziato.

  10. Esaminare i due oggetti GazeButton per passare dal primo al secondo video.

Capitolo 8 - Compilare la soluzione UWP

Dopo aver verificato che l'editor non abbia errori, è possibile eseguire la compilazione.

Per compilare:

  1. Salvare la scena corrente facendo clic su Salva file>.

  2. Selezionare la casella denominata Progetti Unity C# (questo è importante perché consente di modificare le classi dopo il completamento della compilazione).

  3. Passare a Impostazioni di compilazione file>, fare clic su Compila.

  4. Verrà richiesto di selezionare la cartella in cui si vuole compilare la soluzione.

  5. Creare una cartella BUILD e all'interno di tale cartella creare un'altra cartella con un nome appropriato di propria scelta.

  6. Fare clic sulla nuova cartella e quindi su Seleziona cartella, quindi scegliere tale cartella per iniziare la compilazione in tale percorso.

    Screenshot della cartella BUILD evidenziata.Screenshot della cartella Compilazione streaming video evidenziata.

  7. Dopo aver completato la compilazione di Unity (potrebbe richiedere qualche tempo), verrà aperta una finestra Esplora file nella posizione della compilazione.

Capitolo 9 - Distribuire nel computer locale

Una volta completata la compilazione, verrà visualizzata una finestra Esplora file nella posizione della compilazione. Aprire la cartella denominata e compilata, quindi fare doppio clic sul file soluzione (con estensione sln) all'interno di tale cartella per aprire la soluzione con Visual Studio 2017.

L'unica cosa da fare è distribuire l'app nel computer (o computer locale).

Per distribuire nel computer locale:

  1. In Visual Studio 2017 aprire il file di soluzione appena creato.

  2. Nella piattaforma della soluzione selezionare x86, Computer locale.

  3. Nella configurazione della soluzione selezionare Debug.

    Screenshot del menu Configurazione soluzione.

  4. Sarà ora necessario ripristinare tutti i pacchetti nella soluzione. Fare clic con il pulsante destro del mouse sulla soluzione e scegliere Ripristina pacchetti NuGet per la soluzione...

    Nota

    Questa operazione viene eseguita perché i pacchetti compilati da Unity devono essere destinati a usare i riferimenti ai computer locali.

  5. Passare al menu Compila e fare clic su Distribuisci soluzione per caricare sideload dell'applicazione nel computer. Visual Studio compila prima e quindi distribuisce l'applicazione.

  6. L'app dovrebbe ora essere visualizzata nell'elenco delle app installate, pronto per l'avvio.

    Screenshot dell'elenco delle app installate.

Quando si esegue l'applicazione Realtà mista, si sarà all'interno del modello InsideOutSphere usato all'interno dell'app. Questa sfera sarà dove il video verrà trasmesso, fornendo una visualizzazione a 360 gradi, del video in ingresso (che è stato filmato per questo tipo di prospettiva). Non sorprendersi se il video richiede un paio di secondi per caricare, l'app è soggetta alla velocità Internet disponibile, perché il video deve essere recuperato e quindi scaricato, quindi per trasmettere nella tua app. Quando sei pronto, cambia scene e apri il tuo secondo video, guardando alla sfera rossa! Poi si sente libero di tornare indietro, usando il cubo blu nella seconda scena!

Applicazione del servizio multimediale di Azure completata

Congratulazioni, è stata creata un'app di realtà mista che sfrutta il servizio multimediale di Azure per trasmettere 360 video.

Screenshot di un'app di realtà mista di esempio.

Screenshot di un esempio di app di realtà mista.

Esercizi bonus

Esercizio 1

È completamente possibile usare una singola scena per modificare i video all'interno di questa esercitazione. Sperimentare l'applicazione e renderla in una singola scena! Forse anche aggiungere un altro video al mix.

Esercizio 2

Sperimentare Azure e Unity e tentare di implementare la possibilità per l'app di selezionare automaticamente un video con dimensioni di file diverse, a seconda della forza di una connessione Internet.