Condividi tramite


HoloLens (prima generazione) e Azure 306: Video in streaming


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. Ci sarà una nuova serie di esercitazioni che verranno pubblicate in futuro che dimostreranno come sviluppare per HoloLens 2. Questo avviso verrà aggiornato con un collegamento a tali esercitazioni quando vengono pubblicate.


Screenshot di un esempio di Windows Realtà mista V R.Screenshot di un'esperienza di Windows Realtà mista V R.

In questo corso scoprirai come connettere il tuo Servizi multimediali di Azure a un'esperienza VR di Windows Realtà mista per consentire la riproduzione video a 360 gradi in streaming su visori VR immersive.

Servizi multimediali di Azure sono una raccolta di servizi che offrono servizi di streaming video di qualità di trasmissione per raggiungere un pubblico più ampio 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 immersive 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 spetta all'utente come integrare i risultati con la progettazione. Questo corso è progettato per illustrare come integrare un servizio di Azure con il progetto Unity. È il tuo compito 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). Sei libero di usare il software più recente, come elencato all'interno dell'articolo installare gli strumenti, anche se non si deve presumere che le informazioni in questo corso corrispondano perfettamente a ciò che troverai 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 di riscontrare problemi durante la compilazione di questo progetto, è consigliabile creare il progetto menzionato in questa esercitazione in una cartella radice o quasi radice (i percorsi delle cartelle lunghe possono causare problemi in fase di compilazione).

  2. Configurare e testare il visore VR immersive Realtà mista.

    Nota

    Per questo corso non saranno necessari controller di movimento. Se è necessario supportare la configurazione del visore VR immersive, fare clic sul collegamento su come configurare Windows Realtà mista.

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

Per usare il servizio 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 ha già un account Azure, è necessario crearne uno. Se si segue questa esercitazione in una classe o in una situazione di laboratorio, chiedere all'insegnante o a uno dei prottori di assistenza per configurare il nuovo account.

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

    Screenshot del menu del 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'opzione Aggiungi è 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. In Modello di distribuzione selezionare Resource Manager.

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

    4. In Prestazioni selezionare Standard.*

    5. Per Replica selezionare Archiviazione con ridondanza locale.

    6. Lasciare Obbligatorio trasferimento sicuro 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, effettuare il provisioning e gestire la fatturazione per una raccolta di asset di Azure.

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

  5. Sarà necessario verificare di aver compreso le condizioni e le condizioni applicate al servizio.

    Screenshot della pagina Crea account di archiviazione.

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

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

    Screenshot della notifica di distribuzione riuscita.

  8. A questo punto non è necessario seguire la risorsa, semplicemente passare 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 (in cui il titolare dell'account deve essere un amministratore).

  1. Nel portale di Azure fare clic su Crea una risorsa nell'angolo in alto a sinistra e cercare Servizi multimediali, premere INVIO. La risorsa che si desidera ha attualmente un'icona rosa; fare clic su questo pulsante per visualizzare una nuova pagina.

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

  2. La nuova pagina fornirà una descrizione del servizio multimediale. Nella parte inferiore sinistra di questa richiesta 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, effettuare 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 località per il gruppo di risorse (se si sta creando un nuovo gruppo di risorse). La posizione si trova idealmente nell'area in cui verrà eseguita l'applicazione. 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. Sarà anche necessario verificare di aver compreso le condizioni e le condizioni applicate al servizio.

    4. Cliccare su Crea.

      Screenshot della pagina Crea account del servizio multimediale.

  4. Dopo aver fatto clic su Crea, è necessario attendere che il servizio venga creato, l'operazione 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 Servizio multimediale, all'interno del pannello a sinistra, fare clic sul collegamento Asset, che si trova a metà strada verso il basso.

  9. Nella pagina successiva, nell'angolo superiore sinistro della pagina, 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 vuole 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 assicurarsi 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 della barra di stato di 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 codificatore multimediale Media Encoder Standard

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

    3. Nome processo Elaborazione Standard del codificatore multimediale di Video1.mp4

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

      Screenshot della pagina codificare un asset.

  6. Fare clic sul pulsante Crea.

  7. Si noterà una barra con il processo di codifica aggiunto, fare clic su tale barra e verrà visualizzato un pannello con lo stato di avanzamento della 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 della barra 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 asset multi bitrate MP4.

    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 superiore. 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>localizzatore Progressivo.

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

    Nota

    Per altre informazioni sui localizzatori e su cosa è possibile scegliere, visitare la documentazione 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 . Questa è la posizione in cui saranno presenti le diverse versioni codificate del video. Selezionare la risoluzione più alta possibile (nell'immagine sottostante è il file 1920x960), quindi verrà visualizzato un pannello a destra. Qui troverai 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. Una volta pubblicati entrambi i video, si è pronti per passare al capitolo successivo.

Capitolo 3 - Configurazione del progetto Unity

Di seguito è riportata una configurazione tipica 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. Sarà 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 di compilazione filee passare alla piattaforma per 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 Versione più recente installata.

    5. Compilazione ed esecuzione è impostata su Computer locale.

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

    7. Le impostazioni rimanenti devono essere lasciate come predefinite per il momento.

      Screenshot della schermata delle impostazioni di compilazione di Unity.

  6. Nella finestra Impostazioni di compilazione fare clic sul pulsante 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 runtime di 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 (disponibili sotto Impostazioni di pubblicazione), selezionare Realtà virtuale supportata, assicurarsi che Windows Realtà mista SDK sia stato aggiunto.

      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 salvataggio del filedi progetto.

Capitolo 4 - Importazione del pacchetto InsideOutSphere Unity

Importante

Se si vuole ignorare il componente Di configurazione di Unity di questo corso e continuare direttamente nel codice, è possibile scaricare questo pacchetto unitypackage, importarlo nel progetto come pacchetto personalizzato e quindi 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 unity di fronte 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, 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 Materials troverai il materiale InsideOutSpheres lambert1, insieme a un materiale denominato ButtonMaterial, usato da GazeButton, che vedrai presto.

    3. La cartella Prefab contiene il prefab InsideOutSphere che contiene sia il modello InsideOutSphere che gazeButton.

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

  4. In Hierarchy (Gerarchia) selezionare l'oggetto Main Camera (Fotocamera principale) e aggiornare i componenti seguenti:

    1. Transform

      1. Posizione = 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. Sotto di esso verrà visualizzato un oggetto figlio denominato GazeButton. Questo verrà usato per cambiare scene e quindi 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 Y Z
0 0 0

Trasforma - Rotazione

X Y Z
0 50- 0

Trasforma - Ridimensionamento

X Y Z
0 0 0

Screenshot della schermata Inspector aperta per Inside Out Sphere.

  1. Fare clic sull'oggetto figlio GazeButton e impostarne transform come segue:

Trasforma - Posizione

X Y Z
3.6 1.3 0

Trasforma - Rotazione

X Y Z
0 0 0

Trasforma - Ridimensionamento

X Y 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. Denominare la cartella 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 Scripts per aprirla.

  3. Fare clic con il pulsante destro del mouse all'interno della cartella, quindi scegliere Crea > script C#. Assegnare allo script il nome 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 all'inizio 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. A questo punto è possibile immettere gli endpoint dai video di Servizi multimediali di Azure:

    1. Primo nella variabile video1endpoint .

    2. Secondo nella variabile video2endpoint .

    Avviso

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

  8. Successivamente, è necessario modificare il metodo Start(). Questo metodo verrà attivato ogni volta che l'utente cambia scena (di conseguenza cambiando il video) guardando il pulsante sguardo fisso.

        // Use this for initialization
        void Start()
        {
            Application.runInBackground = true;
            StartCoroutine(PlayVideo());
        }
    
  9. Dopo il metodo Start(), inserire il metodo IEnumerator PlayVideo(), che verrà usato per avviare facilmente i video (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 lo scambio tra scene.

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

    Suggerimento

    Il metodo ChangeScene() usa una comoda funzionalità C# denominata Operatore condizionale. In questo modo è possibile controllare le condizioni e quindi i valori restituiti in base al risultato del controllo, tutti all'interno di una singola istruzione. Seguire questo collegamento per altre informazioni sull'operatore condizionale.

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

  12. Nell'editor di Unity fare clic e trascinare la classe VideoController [from]{.underline} nella cartella Scripts nell'oggetto Fotocamera principale nel pannello Gerarchia .

  13. Fare clic sulla fotocamera principale e osservare 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 della 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 in avanti dalla fotocamera principale, per rilevare l'oggetto che 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 Scripts creata in precedenza.

  2. Fare clic con il pulsante destro del mouse nel pannello del progetto, Creascript C#. Assegnare allo script il nome Gaze.

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

  4. Verificare che lo spazio dei nomi seguente si trova all'inizio 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. È ora necessario aggiungere il codice per i metodi Awake() e Start().

        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 l'hit 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 Scripts 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. Duplicare la scena già creata, in modo che non sia necessario configurarla di nuovo, anche se si modificherà la nuova scena, in modo che l'oggetto GazeButton si trovi in una posizione diversa e abbia un aspetto diverso. Questo è quello di mostrare come passare da una scena all'altro.

  1. Per eseguire questa operazione, passare a File Save Scene as... (Salva > scena con nome). Verrà visualizzata una finestra di salvataggio. Fare clic sul pulsante Nuova cartella .

    Capitolo 7 - Configurare le due scene di Unity

  2. Denominare le scene della cartella.

  3. La finestra Salva scena sarà ancora aperta. Aprire la cartella Scenes appena creata.

  4. Nel campo Nome file: testo digitare VideoScene1, quindi premere Salva.

  5. Tornare in 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 la scena

    Suggerimento

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

  6. Unity incrementerà automaticamente i nomi delle scene, ma lo verificherà 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 , quindi fare clic con il pulsante sinistro su ogni scena e infine trascinare entrambe le scene.

  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 nel modo seguente:

Trasforma - Posizione

X Y Z
0 1.3 3.6

Trasforma - Rotazione

X Y Z
0 0 0

Trasforma - Ridimensionamento

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

    Screenshot della schermata di controllo per il pulsante sguardo fisso.

  2. Verrà visualizzata una finestra popup Seleziona mesh . Fare doppio clic sulla mesh del cubo dall'elenco asset.

    Screenshot della finestra popup Seleziona mesh.

  3. Il filtro mesh verrà aggiornato e ora sarà un cubo. Fare clic sull'icona a forma di ingranaggio accanto a Collisore sphere e fare clic su Rimuovi componente per eliminare il collisore da questo oggetto.

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

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

    Screenshot della casella di ricerca Aggiungi componente.

  5. GazeButton è ora parzialmente aggiornato, per apparire diverso, ma ora 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 del progetto. Duplicare il materiale ButtonMaterial (premere CTRL + D sulla tastiera o fare clic con il pulsante sinistro del mouse sul materiale, quindi dall'opzione di menu Modifica file selezionare Duplica).

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

  7. Selezionare il nuovo buttonMaterial Material (qui denominato ButtonMaterial 1) e nella finestra Inspector (Controllo) fare clic sulla finestra colore Albedo. Verrà visualizzata una finestra popup, in cui è possibile selezionare un altro colore (scegliere a seconda di quale vuoi), quindi chiudere il popup. Il materiale sarà la propria istanza e diverso dall'originale.

    Screenshot del popup di selezione dei colori.

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

    Screenshot della scheda scena dell'editor di progetti.

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

    • Premere il pulsante Riproduci nell'editor e indossare il visore VR.

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

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

Capitolo 8 - Creare la soluzione UWP

Dopo aver verificato che l'editor non contenga errori, si è pronti per la compilazione.

Per compilare:

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

  2. Selezionare la casella denominata Progetti C# unity. Questo è importante perché consente di modificare le classi al termine 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 Video Streaming Build evidenziata.

  7. Al termine della compilazione di Unity (potrebbe essere necessario del tempo), verrà aperta una finestra Esplora file nella posizione della compilazione.

Capitolo 9 - Distribuire nel computer locale

Al termine della compilazione, verrà visualizzata una finestra Esplora file nella posizione della compilazione. Aprire la cartella denominata e compilata, quindi fare doppio clic sul file della soluzione (.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 eseguire la distribuzione 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 all'uso dei riferimenti ai computer locali.

  5. Passare al menu Compila e fare clic su Distribuisci soluzione per trasferire localmente l'applicazione nel computer. Visual Studio compilerà prima e quindi distribuirà l'applicazione.

  6. L'app dovrebbe ora essere visualizzata nell'elenco delle app installate, pronte 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à la posizione in cui verrà trasmesso il video, fornendo una visualizzazione a 360 gradi, del video in ingresso (girato per questo tipo di prospettiva). Non sorprendersi se il video richiede un paio di secondi per il caricamento, l'app è soggetta alla velocità internet disponibile, perché il video deve essere recuperato e quindi scaricato, in modo da trasmettere nella tua app. Quando sei pronto, cambia scene e apri il tuo secondo video, guardando alla sfera rossa! Quindi è possibile tornare indietro, usando il cubo blu nella seconda scena!

Applicazione di Servizi multimediali di Azure completata

È stata creata un'app di realtà mista che sfrutta il Servizio multimediale di Azure per lo streaming di 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 trasformarla 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.