HoloLens (1ère génération) et Azure 306 : Vidéo en streaming

Dans ce cours, vous allez apprendre à connecter azure Media Services à une expérience de réalité virtuelle Windows Mixed Reality pour permettre la diffusion en continu de la lecture vidéo à 360 degrés sur des casques immersifs.

Azure Media Services est une collection de services qui vous offre des services de diffusion en continu vidéo de qualité pour atteindre des audiences plus larges sur les appareils mobiles les plus populaires d’aujourd’hui. Pour plus d’informations, visitez la page Azure Media Services.

À la fin du cours, vous devez disposer d’une application de casque immersif de réalité mixte capable de :

1. Récupérez une vidéo à 360 degrés à partir d’un stockage Azure, via Azure Media Service.

2. Afficher la vidéo à 360 degrés récupérée dans une scène Unity.

3. Naviguez entre deux scènes, avec deux vidéos différentes.

Dans votre application, c’est à vous de choisir la façon dont vous intégrez les résultats à votre conception. Ce cours est conçu pour vous apprendre à intégrer un service Azure à votre projet Unity. Il vous revient d’utiliser les connaissances que vous avez acquises dans ce cours pour améliorer votre application de réalité mixte.

Prise en charge des appareils

Conditions préalables

Nous vous recommandons d’utiliser le matériel et les logiciels suivants pour ce cours :

• Un PC de développement, compatible avec Windows Mixed Reality pour le développement de casque immersif (VR)
• Windows 10 Fall Creators Update (ou version ultérieure) avec le mode développeur activé
• Le dernier KIT de développement logiciel (SDK) Windows 10
• Unity 2017.4
• Visual Studio 2017
• Un casque Windows Mixed Reality immersif (VR)
• Accès à Internet pour la configuration et la récupération des données Azure
• Deux vidéos à 360 degrés au format mp4 (vous trouverez des vidéos gratuites sur cette page de téléchargement)

Avant de commencer

1. Pour réduire les problèmes de génération avec ce projet, créez le projet de didacticiel dans un dossier racine ou proche de la racine. Les chemins d’accès longs aux dossiers peuvent entraîner des problèmes au moment de la génération.

2. Configurez et testez votre casque immersif Mixed Reality.

   Remarque

   Les contrôleurs de mouvement ne sont pas requis pour ce cours. Si vous avez besoin d’aide pour configurer le casque immersif, cliquez sur le lien pour savoir comment configurer Windows Mixed Reality.

Chapitre 1 : Le portail Azure : création du compte de stockage Azure

Pour utiliser le service Stockage Azure, vous devez créer et configurer un compte de stockage dans le Portail Azure.

1. Connectez-vous au portail Azure.

   Remarque

   Si vous n’avez pas encore de compte Azure, vous devez en créer un. Si vous suivez ce tutoriel dans une situation de classe ou de laboratoire, demandez à votre instructeur ou à l’un des surveillants de vous aider à configurer votre nouveau compte.

2. Une fois que vous êtes connecté, cliquez sur Comptes de stockage dans le menu de gauche.

   

3. Sous l’onglet Comptes de stockage , cliquez sur Ajouter.

   

4. Sous l’onglet Créer un compte de stockage :

   1. Insérez un nom pour votre compte. N’oubliez pas que ce champ accepte uniquement les chiffres et les lettres minuscules.

   2. Pour Modèle de déploiement, sélectionnez Gestionnaire de ressources.

   3. Pour Type de compte, sélectionnez Stockage (usage général v1) .

   4. Pour Performances, sélectionnez Standard.*

   5. Pour Réplication, sélectionnez Stockage localement redondant (LRS).

   6. Laissez Transfert sécurisé requis sur Désactivé.

   7. Sélectionnez un abonnement.

   8. Choisissez un groupe de ressources ou créez-en un. Un groupe de ressources permet de surveiller, de contrôler l’accès, de provisionner et de gérer la facturation d’une collection de ressources Azure.

   9. Déterminez l’emplacement de votre groupe de ressources (si vous créez un groupe de ressources). L’emplacement serait idéalement dans la région où l’application s’exécuterait. Certaines ressources Azure ne sont disponibles que dans certaines régions.

5. Vous devez confirmer que vous comprenez les conditions générales appliquées à ce service.

   

6. Cliquez sur Créer et attendez que le service soit créé, car cela peut prendre une minute.

7. Une notification s’affiche dans le portail une fois le service instance créé.

   

8. À ce stade, vous n’avez pas besoin de suivre la ressource, et passez au chapitre suivant.

Chapitre 2 : Le portail Azure : création de Media Service

Pour utiliser Azure Media Service, vous devez configurer une instance du service à mettre à disposition de votre application (où le titulaire du compte doit être un Administration).

1. Dans le portail Azure, cliquez sur Créer une ressource dans le coin supérieur gauche, puis recherchez Media Service,appuyez sur Entrée. Cliquez sur l’icône rose correspondant à la ressource que vous souhaitez afficher une nouvelle page.

   

2. La nouvelle page fournit une description de Media Service. En bas à gauche de cette invite, cliquez sur le bouton Créer pour créer une association avec ce service.

   

3. Un panneau s’affiche dans lequel vous fournissez des détails sur votre nouveau service Media Service :

   1. Insérez le nom de compte souhaité pour ce service instance.

   2. Sélectionnez un abonnement.

   3. Choisissez un groupe de ressources ou créez-en un. Un groupe de ressources permet de surveiller, de contrôler l’accès, de provisionner et de gérer la facturation d’une collection de ressources Azure. Il est recommandé de conserver tous les services Azure associés à un seul projet (par exemple, ces labos) sous un groupe de ressources commun).

   Si vous souhaitez en savoir plus sur les groupes de ressources Azure, suivez ce lien sur la gestion des groupes de ressources Azure.

   4. Déterminez l’emplacement de votre groupe de ressources (si vous créez un groupe de ressources). L’emplacement serait idéalement dans la région où l’application s’exécuterait. Certaines ressources Azure ne sont disponibles que dans certaines régions.

   5. Pour la section Compte de stockage , cliquez sur la section Sélectionnez... , puis cliquez sur le compte de stockage que vous avez créé dans le dernier chapitre.

   6. Vous devez également confirmer que vous comprenez les conditions générales appliquées à ce service.

   7. Cliquez sur Créer.

      

4. Une fois que vous avez cliqué sur Créer, vous devez attendre que le service soit créé, ce qui peut prendre une minute.

5. Une notification s’affiche dans le portail une fois le service instance créé.

   

6. Cliquez sur la notification pour explorer votre nouvelle instance de service.

   

7. Cliquez sur le bouton Accéder à la ressource dans la notification pour explorer votre nouveau service instance.

8. Dans la nouvelle page Media Service, dans le panneau de gauche, cliquez sur le lien Ressources , qui se trouve à mi-chemin vers le bas.

9. Dans la page suivante, dans le coin supérieur gauche de la page, cliquez sur Charger.

   

10. Cliquez sur l’icône Dossier pour parcourir vos fichiers et sélectionnez la première vidéo 360 que vous souhaitez diffuser en continu.

    Vous pouvez suivre ce lien pour télécharger un exemple de vidéo.

    

11. La barre de progression devient verte lorsque le chargement de la vidéo est terminé.

    

12. Cliquez sur le texte ci-dessus (nom de votre service - Ressources) pour revenir à la page Ressources .

13. Notez que votre vidéo a été chargée. Cliquez dessus.

    

14. La page vers laquelle vous êtes redirigé affiche des informations détaillées sur votre vidéo. Pour pouvoir utiliser votre vidéo, vous devez l’encoder en cliquant sur le bouton Encoder en haut à gauche de la page.

    

15. Un nouveau panneau s’affiche, où vous pouvez définir les options d’encodage de votre fichier. Définissez les propriétés suivantes (certaines sont déjà définies par défaut) :

    1. Nom de l’encodeur multimédia Media Encoder Standard

    2. Encodage de contenu prédéfini MP4 à débit binaire multiple adaptatif

    3. Nom du travail Media Encoder Standard traitement des Video1.mp4

    4. Nom de la ressource multimédia de sortieVideo1.mp4 -- Media Encoder Standard encodé

       

16. Cliquez sur le bouton Créer.

17. Notez une barre avec un travail d’encodage ajouté, cliquez sur cette barre et un panneau s’affiche avec la progression de l’encodage.

    

    

18. Attendez que le travail soit terminé. Une fois le travail terminé, n’hésitez pas à fermer le panneau avec le « X » en haut à droite de ce panneau.

    

    

    Importante

    La durée du travail dépend de la taille du fichier de votre vidéo. Ce processus peut prendre un certain temps.

19. Maintenant que la version encodée de la vidéo est créée, vous pouvez la publier pour la rendre accessible. Pour ce faire, cliquez sur le lien bleu Ressources pour revenir à la page des ressources.

    

20. Vous voyez votre vidéo avec une autre, qui est de type d’actif MP4 à débit binaire multiple.

    

    Remarque

    Vous remarquerez peut-être que la nouvelle ressource, en même temps que votre vidéo initiale, est Unknown et a « 0 » octets pour sa taille, il suffit d’actualiser votre fenêtre pour qu’elle soit mise à jour.

21. Cliquez sur cette nouvelle ressource.

    

22. Vous voyez un panneau similaire à celui que vous avez utilisé précédemment, qui est une ressource différente. Cliquez sur le bouton Publier situé en haut au centre de la page.

    

23. Vous êtes invité à définir un localisateur, qui est le point d’entrée, sur fichier/s dans vos ressources. Pour votre scénario, définissez les propriétés suivantes :

    1. Type de> localisateurProgressif.

    2. La date et l’heure sont définies pour vous, de votre date actuelle, à une heure dans le futur (100 ans dans ce cas). Laissez tel tel qu’il est ou changez-le pour qu’il convienne.

24. En bas de ce panneau, cliquez sur le bouton Ajouter .

    

25. Votre vidéo est maintenant publiée et peut être diffusée en continu à l’aide de son point de terminaison. Plus bas dans la page se trouve une section Fichiers , où résident les différentes versions encodées de votre vidéo. Sélectionnez la résolution la plus élevée possible (l’image est le fichier 1920x960), puis un panneau s’affiche. Vous y trouverez une URL de téléchargement. Copiez ce point de terminaison tel que vous l’utiliserez plus tard dans votre code.

    

    

    Remarque

    Vous pouvez également appuyer sur le bouton Lire pour lire votre vidéo et la tester.

26. Vous devez maintenant charger la deuxième vidéo que vous utilisez dans ce labo. Suivez les étapes ci-dessus, en répétant le même processus pour la deuxième vidéo. Veillez également à copier le deuxième point de terminaison . Utilisez le lien suivant pour télécharger une deuxième vidéo.

27. Une fois les deux vidéos publiées, vous êtes prêt à passer au chapitre suivant.

Chapitre 3 : Configuration du projet Unity

Il s’agit d’une configuration classique pour le développement avec le Mixed Reality, et en tant que tel, est un bon modèle pour d’autres projets.

1. Ouvrez Unity , puis cliquez sur Nouveau.

   

2. Vous devez maintenant fournir un nom de projet Unity, insérer MR_360VideoStreaming.. Vérifiez que le type de projet est défini sur 3D. Définissez l’Emplacement sur un emplacement qui vous convient (n’oubliez pas qu’il est préférable de se rapprocher des répertoires racines). Ensuite, cliquez sur Créer un projet.

   

3. Avec Unity ouvert, il est utile de vérifier que le script par défaut Rédacteur est défini sur Visual Studio. Accédez à Modifier lespréférences, puis, dans la nouvelle fenêtre, accédez à Outils externes. Remplacez Rédacteur script externe par Visual Studio 2017. Fermez la fenêtre Préférences .

   

4. Ensuite, accédez àParamètres de génération de fichiers et basculez la plateforme sur plateforme Windows universelle, en cliquant sur le bouton Changer de plateforme.

5. Assurez-vous également que :

   1. L’appareil cible est défini sur N’importe quel appareil.

   2. Le type de build est défini sur D3D.

   3. Sdk est défini sur Dernier installé.

   4. La version de Visual Studio est définie sur Dernière installation.

   5. Générer et exécuter est défini sur Ordinateur local.

   6. Ne vous inquiétez pas de la configuration de Scenes pour l’instant, car vous configurez Scenes ultérieurement.

   7. Les autres paramètres doivent être conservés par défaut pour l’instant.

      

6. Dans la fenêtre Paramètres de build, cliquez sur le bouton Paramètres du lecteur, qui ouvre le panneau associé dans l’espace où se trouve l’inspecteur.

7. Dans ce panneau, quelques paramètres doivent être vérifiés :

   1. Sous l’onglet Autres paramètres :

      1. La version du runtimede script doit être stable (équivalent.NET 3.5).

      2. Le serveur principal de script doit être .NET.

      3. Le niveau de compatibilité de l’API doit être .NET 4.6.

         

   2. Plus bas dans le panneau, dans Paramètres XR (situés sous Paramètres de publication), cochez Réalité virtuelle prise en charge, vérifiez que le KIT de développement logiciel (SDK) Windows Mixed Reality est ajouté.

      

   3. Sous l’onglet Paramètres de publication, sous Fonctionnalités, case activée :

      • InternetClient

        

8. Une fois ces modifications effectuées, fermez la fenêtre Paramètres de build .

9. Enregistrez votre projet d’enregistrement de fichierprojet.

Chapitre 4 : Importation du package InsideOutSphere Unity

Pour ce cours, vous devez télécharger un package de ressources Unity appelé InsideOutSphere.unitypackage.

Procédure pour importer le unitypackage :

1. Avec le tableau de bord Unity devant vous, cliquez sur Ressources dans le menu en haut de l’écran, puis cliquez sur Importer le package > personnalisé.

   

2. Utilisez le sélecteur de fichiers pour sélectionner le package InsideOutSphere.unitypackage , puis cliquez sur Ouvrir. Une liste des composants de cette ressource s’affiche. Confirmez l’importation en cliquant sur Importer.

   

3. Une fois l’importation en cours, trois nouveaux dossiers, Materials, Models et Prefabs, sont ajoutés à votre dossier Assets . Ce type de structure de dossiers est typique d’un projet Unity.

   

   1. Ouvrez le dossier Models et consultez le modèle InsideOutSphere importé.

   2. Dans le dossier Materials , recherchez le matériau InsideOutSphereslambert1, ainsi qu’un matériau appelé ButtonMaterial, qui est utilisé par gazeButton.

   3. Le dossier Prefabs contient le préfabriqué InsideOutSphere, qui contient à la fois le modèleInsideOutSphere et le GazeButton.

   4. Aucun code n’est inclus, vous écrivez le code en suivant ce cours.

4. Dans la hiérarchie, sélectionnez l’objet Caméra principale et mettez à jour les composants suivants :

   1. Transform

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

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

      3. Échelle X : 1, Y : 1, Z : 1.

   2. Appareil photo

      1. Effacer les indicateurs : couleur unie.

      2. Plans de découpage : Proche : 0,1, Loin : 6.

         

5. Accédez au dossier Prefab , puis faites glisser le préfabriqué InsideOutSphere dans le panneau Hierarchy .

   

6. Développez l’objet InsideOutSphere dans la hiérarchie en cliquant sur la petite flèche en regard de celui-ci. Vous voyez un objet enfant sous celui-ci appelé GazeButton qui est utilisé pour modifier des scènes et donc des vidéos.

   

7. Dans la fenêtre Inspector, cliquez sur le composant InsideOutSphere’s Transform, vérifiez que les propriétés suivantes sont définies :

Transformer - Position

Transformation - Rotation

Transformer - Mettre à l’échelle

8. Cliquez sur l’objet enfant GazeButton et définissez sa transformation comme suit :

Transformer - Position

Transformation - Rotation

Transformer - Mettre à l’échelle

Chapitre 5 : Créer la classe VideoController

La classe VideoController héberge les deux points de terminaison vidéo utilisés pour diffuser le contenu à partir d’Azure Media Service.

Pour créer cette classe :

1. Cliquez avec le bouton droit dans le dossier De ressources, situé dans le panneau Projet , puis cliquez sur Créer un > dossier. Nommez le dossier Scripts.

   

   

2. Double-cliquez sur le dossier Scripts pour l’ouvrir.

3. Cliquez avec le bouton droit dans le dossier, puis cliquez sur Créer un > script C#. Nommez le script VideoController.

   

4. Double-cliquez sur le nouveau script VideoController pour l’ouvrir avec Visual Studio 2017.

   

5. Mettez à jour les espaces de noms en haut du fichier de code comme suit :

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

6. Entrez les variables suivantes dans la classe VideoController , ainsi que la méthode 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. Il est maintenant temps d’entrer les points de terminaison de vos vidéos Azure Media Service :

   1. Premier dans la variable video1endpoint .

   2. Deuxième dans la variable video2endpoint .

   Avertissement

   Il existe un problème connu avec l’utilisation de https dans Unity, avec la version 2017.4.1f1. Si les vidéos fournissent une erreur lors de la lecture, essayez d’utiliser « http » à la place.

8. Ensuite, la méthode Start() doit être modifiée. Cette méthode est déclenchée chaque fois que l’utilisateur change de scène (ce qui change la vidéo) en regardant le bouton De regard.

       // Use this for initialization
       void Start()
       {
           Application.runInBackground = true;
           StartCoroutine(PlayVideo());
       }
   

9. Après la méthode Start(), insérez la méthode PlayVideo()IEnumerator , qui est utilisée pour démarrer les vidéos en toute transparence (de sorte qu’aucun bégaiement n’est visible).

       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. La dernière méthode dont vous avez besoin pour cette classe est la méthode ChangeScene(), qui est utilisée pour permuter entre les scènes.

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

    Conseil

    La méthode ChangeScene() utilise une fonctionnalité C# pratique appelée Opérateur conditionnel. Cette fonctionnalité permet de vérifier les conditions, puis de retourner les valeurs en fonction du résultat de la case activée, le tout dans une seule instruction. Suivez ce lien pour en savoir plus sur l’opérateur conditionnel.

11. Enregistrez vos modifications dans Visual Studio avant de revenir à Unity.

12. De retour dans le Rédacteur Unity, cliquez et faites glisser le dossier Scripts de la classe VideoController [à partir de]{.souligné} vers l’objet Caméra principale dans le panneau hierarchy.

13. Cliquez sur la caméra principale et examinez le panneau Inspecteur. Notez que dans le composant Script qui vient d’être ajouté, il y a un champ avec une valeur vide. Ce champ de référence cible les variables publiques dans votre code.

14. Faites glisser l’objet InsideOutSphere du panneau Hierarchy vers l’emplacement Sphere , comme illustré dans l’image.

    

Chapitre 6 : Créer la classe Gaze

Cette classe est chargée de créer un Raycast projeté vers l’avant à partir de la caméra principale, afin de détecter l’objet que l’utilisateur examine. Dans ce cas, Raycast doit identifier si l’utilisateur examine l’objet GazeButton dans la scène et déclencher un comportement.

Pour créer cette classe :

1. Accédez au dossier Scripts que vous avez créé précédemment.

2. Dans le volet Projet , cliquez avec le bouton droit sur Créer unscript C#. Nommez le script Gaze.

3. Double-cliquez sur le nouveau script Gaze pour l’ouvrir avec Visual Studio 2017.

4. Vérifiez que l’espace de noms suivant se trouve en haut du script et supprimez les autres :

   using UnityEngine;
   

5. Ajoutez ensuite les variables suivantes à l’intérieur de la 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. Le code des méthodes Awake() et Start() doit maintenant être ajouté.

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

7. Ajoutez le code suivant dans la méthode Update() pour projeter un Raycast et détecter l’accès cible :

       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. Enregistrez vos modifications dans Visual Studio avant de revenir à Unity.

9. Cliquez et faites glisser la classe Gaze du dossier Scripts vers l’objet Main Camera dans le panneau hiérarchie .

Chapitre 7 : Configurer les deux scènes Unity

L’objectif de ce chapitre est de configurer les deux scènes, chacune hébergeant une vidéo à diffuser. Dupliquez la scène que vous avez créée pour réduire le temps d’installation. Ensuite, modifiez la nouvelle scène afin que l’objet GazeButton se trouve dans un autre emplacement et ait une apparence différente pour montrer comment changer entre les scènes.

1. Accédez à Fichier > Enregistrer la scène sous.... Une fenêtre d’enregistrement s’affiche. Cliquez sur le bouton Nouveau dossier .

   

2. Nommez le dossier Scenes.

3. La fenêtre Enregistrer la scène est ouverte. Ouvrez le dossier Scenes que vous venez de créer.

4. Dans le champ de texte Nom de fichier : , tapez VideoScene1, puis appuyez sur Enregistrer.

5. De retour dans Unity, ouvrez votre dossier Scenes , puis cliquez avec le bouton gauche sur votre fichier VideoScene1 . Utilisez votre clavier et appuyez sur Ctrl + D pour dupliquer cette scène

   Conseil

   La commande Dupliquer peut également être exécutée en accédant à Modifier le > doublon.

6. Unity incrémente automatiquement le numéro des noms de scène, mais case activée-le quand même, pour s’assurer qu’il correspond au code précédemment inséré.

   Vous devez avoir VideoScene1 et VideoScene2.

7. Avec vos deux scènes, accédez à Paramètres de génération de fichiers>. Une fois la fenêtre Paramètres de build ouverte, faites glisser vos scènes vers la section Scènes dans Build .

   

   Conseil

   Vous pouvez sélectionner vos deux scènes à partir de votre dossier Scènes en maintenant le bouton Ctrl enfoncé, puis en cliquant avec le bouton gauche sur chaque scène, puis en faisant glisser les deux vers l’autre.

8. Fermez la fenêtre Paramètres de build, puis double-cliquez sur VideoScene2.

9. Avec la deuxième scène ouverte, cliquez sur l’objet enfant GazeButton de InsideOutSphere et définissez sa transformation comme suit :

Transformer - Position

Transformation - Rotation

Transformer - Mettre à l’échelle

10. Une fois l’enfant GazeButton sélectionné, examinez l’inspecteur et le filtre de maillage. Cliquez sur la petite cible en regard du champ de référence Maillage :

    

11. Une fenêtre contextuelle Sélectionner un maillage s’affiche. Double-cliquez sur le maillage de cube dans la liste des ressources.

    

12. Le filtre de maillage est mis à jour et est maintenant un cube. À présent, cliquez sur l’icône Engrenage en regard de Sphere Collider , puis cliquez sur Supprimer le composant pour supprimer le collisionneur de cet objet.

    

13. Avec l’élément GazeButton sélectionné, cliquez sur le bouton Ajouter un composant en bas de l’inspecteur. Dans le champ de recherche, tapez zone et Box Collider est une option. Cliquez dessus pour ajouter un collisionneur box à votre objet GazeButton .

    

14. Le GazeButton est maintenant partiellement mis à jour, pour être différent, mais créez maintenant un matériau, afin qu’il soit différent et qu’il soit plus facile à reconnaître comme un autre objet, que l’objet dans la première scène.

15. Accédez à votre dossier Matériaux , dans le panneau Projet. Dupliquez le BoutonMatériel ( appuyez sur Ctrl + D sur le clavier ou cliquez avec le bouton gauche sur matériau, puis, dans l’option de menu Modifier le fichier, sélectionnez Dupliquer).

    

16. Sélectionnez le nouveau Matériau ButtonMaterial (ici nommé ButtonMaterial 1), puis dans l’inspecteur, cliquez sur la fenêtre couleur Albedo. Une fenêtre contextuelle s’affiche, dans laquelle vous pouvez sélectionner une autre couleur (choisir la couleur de votre choix), puis fermer la fenêtre contextuelle. Le matériau est son propre instance, et différent de l’original.

    

17. Faites glisser le nouveau matériau sur l’enfant GazeButton pour mettre à jour son apparence afin qu’elle puisse être facilement distinguée du bouton des premières scènes.

    

18. À ce stade, vous pouvez tester le projet dans le Rédacteur avant de générer le projet UWP.

    • Appuyez sur le bouton Lire dans le Rédacteur et portez votre casque.

      

19. Examinez les deux objets GazeButton pour basculer entre la première et la deuxième vidéo.

Chapitre 8 : Générer la solution UWP

Une fois que vous vous êtes assuré que l’éditeur ne contient aucune erreur, vous êtes prêt à générer.

Pour générer :

1. Enregistrez la scène actuelle en cliquant sur Fichier > Enregistrer.

2. Cochez la case Unity C# Projects (cette option vous permet de modifier les classes une fois la build terminée).

3. Accédez à Paramètres de génération de fichiers>, puis cliquez sur Générer.

4. Vous êtes invité à sélectionner le dossier dans lequel vous souhaitez générer la solution.

5. Créez un dossier BUILDS et, dans ce dossier, créez un autre dossier avec le nom approprié de votre choix.

6. Cliquez sur votre nouveau dossier, puis sur Sélectionner un dossier. Pour choisir ce dossier, commencez la génération à cet emplacement.

   

7. Une fois qu’Unity est en cours de génération (cela peut prendre un certain temps), il ouvre une fenêtre Explorateur de fichiers à l’emplacement de votre build.

Chapitre 9 : Déployer sur un ordinateur local

Une fois la build terminée, une fenêtre Explorateur de fichiers s’affiche à l’emplacement de votre build. Pour ouvrir votre solution avec Visual Studio 2017, ouvrez le dossier que vous avez nommé et généré, puis double-cliquez sur le fichier de solution (.sln) dans ce dossier.

Il ne reste plus qu’à déployer votre application sur votre ordinateur (ou ordinateur local).

Pour déployer sur l’ordinateur local :

1. Dans Visual Studio 2017, ouvrez le fichier solution.

2. Dans Plateforme de solution, sélectionnez x86, Ordinateur local.

3. Dans Configuration de la solution , sélectionnez Déboguer.

   

4. Vous devez maintenant restaurer tous les packages dans votre solution. Cliquez avec le bouton droit sur votre solution, puis cliquez sur Restaurer les packages NuGet pour la solution...

   Remarque

   Les packages créés par Unity doivent être ciblés pour fonctionner avec vos références de machines locales.

5. Accédez au menu Générer et cliquez sur Déployer la solution pour charger une version test de l’application sur votre ordinateur. Visual Studio génère d’abord, puis déploie votre application.

6. Votre application doit maintenant apparaître dans la liste des applications installées, prêtes à être lancées.

   

Lorsque vous exécutez l’application Mixed Reality, vous êtes dans le modèle InsideOutSphere que vous avez utilisé dans votre application. Cette sphère est l’endroit où la vidéo est diffusée et fournit une vue à 360 degrés de la vidéo entrante filmée pour ce type de perspective. Le chargement de la vidéo peut prendre quelques secondes, car votre application est soumise à la vitesse Internet disponible, tandis que la vidéo est récupérée, téléchargée, puis diffusée dans votre application. Lorsque vous êtes prêt, changez de scène et ouvrez votre deuxième vidéo, en regardant la sphère rouge ! Alors n’hésitez pas à revenir en arrière, en utilisant le cube bleu dans la deuxième scène !

Votre application Azure Media Service terminée

Félicitations, vous avez créé une application de réalité mixte qui applique Azure Media Service pour diffuser en continu 360 vidéos.

Exercices bonus

Exercice 1

Il est tout à fait possible d’utiliser une seule scène pour modifier les vidéos dans ce tutoriel. Testez votre application et faites-la en une seule scène ! Même ajouter une autre vidéo à la combinaison.

Exercice 2

Expérimentez avec Azure et Unity et essayez d’implémenter la possibilité pour l’application de sélectionner automatiquement une vidéo avec une taille de fichier différente, en fonction de la puissance d’une connexion Internet.