HoloLens (1.ª geração) e Azure 306: Transmissão em fluxo de vídeo


Nota

Os tutoriais Mixed Reality Academy foram concebidos com o HoloLens (1.ª geração) e Mixed Reality Headsets Envolventes em mente. Como tal, consideramos importante deixar estes tutoriais em vigor para os programadores que ainda estão à procura de orientação no desenvolvimento desses dispositivos. Estes tutoriais não serão atualizados com os conjuntos de ferramentas ou interações mais recentes que estão a ser utilizados para HoloLens 2. Serão mantidas para continuarem a trabalhar nos dispositivos suportados. Haverá uma nova série de tutoriais que serão publicados no futuro que demonstrarão como desenvolver para HoloLens 2. Este aviso será atualizado com uma ligação para esses tutoriais quando forem publicados.


Captura de ecrã a mostrar um Windows Mixed Reality exemplo do V R.Captura de ecrã a mostrar uma experiência Windows Mixed Reality V R.

Neste curso, ficará a saber como ligar os Seus Serviços de Multimédia do Azure a uma experiência vr Windows Mixed Reality para permitir a transmissão em fluxo de reprodução de vídeo de 360 graus em headsets envolventes.

Os Serviços de Multimédia do Azure são uma coleção de serviços que lhe fornece serviços de transmissão em fluxo de vídeo de qualidade para alcançar audiências maiores nos dispositivos móveis mais populares da atualidade. Para obter mais informações, visite a página Serviços de Multimédia do Azure.

Depois de concluir este curso, terá uma aplicação de headset envolvente de realidade mista, que poderá fazer o seguinte:

  1. Obtenha um vídeo de 360 graus a partir de um Armazenamento do Azure, através do Serviço de Multimédia do Azure.

  2. Apresentar o vídeo de 360 graus obtido numa cena do Unity.

  3. Navegue entre duas cenas, com dois vídeos diferentes.

Na sua aplicação, cabe-lhe a si saber como irá integrar os resultados com a sua estrutura. Este curso foi concebido para lhe ensinar a integrar um Serviço do Azure no seu Projeto do Unity. A sua função é utilizar o conhecimento obtido neste curso para melhorar a sua aplicação de realidade mista.

Suporte de dispositivos

Curso HoloLens Headsets envolventes
MR e Azure 306: Transmissão em fluxo de vídeo ✔️

Pré-requisitos

Nota

Este tutorial foi concebido para programadores com experiência básica com o Unity e C#. Tenha também em atenção que os pré-requisitos e as instruções escritas neste documento representam o que foi testado e verificado no momento da escrita (maio de 2018). Pode utilizar o software mais recente, conforme listado no artigo Instalar as ferramentas, embora não se deva presumir que as informações neste curso corresponderão perfeitamente ao que encontrará no software mais recente do que o que está listado abaixo.

Recomendamos o seguinte hardware e software para este curso:

Antes de começar

  1. Para evitar problemas ao criar este projeto, é altamente sugerido que crie o projeto mencionado neste tutorial numa pasta raiz ou de raiz próxima (os caminhos de pasta longos podem causar problemas no tempo de compilação).

  2. Configure e teste o Mixed Reality Headset Envolvente.

    Nota

    Não irá precisar de Comandos de Movimento para este curso. Se precisar de suporte para configurar o Headset Envolvente, clique na ligação sobre como configurar Windows Mixed Reality.

Capítulo 1 – O Portal do Azure: criar a Conta de Armazenamento do Azure

Para utilizar o Serviço de Armazenamento do Azure, terá de criar e configurar uma Conta de Armazenamento no portal do Azure.

  1. Inicie sessão no Portal do Azure.

    Nota

    Se ainda não tiver uma conta do Azure, terá de criar uma. Se estiver a seguir este tutorial numa situação de sala de aula ou laboratório, peça ajuda ao seu instrutor ou a um dos tutores para configurar a sua nova conta.

  2. Depois de iniciar sessão, clique em Contas de armazenamento no menu esquerdo.

    Captura de ecrã a mostrar o menu do Portal do Azure. As contas de armazenamento estão realçadas.

  3. No separador Contas de Armazenamento , clique em Adicionar.

    Captura de ecrã a mostrar a caixa de diálogo da conta de armazenamento. A opção Adicionar está realçada.

  4. No separador Criar conta de armazenamento :

    1. Insira um Nome para a sua conta, tenha em atenção que este campo só aceita números e letras minúsculas.

    2. Em Modelo de implementação, selecione Gestor de recursos.

    3. Em Tipo de conta, selecione Armazenamento (fins gerais v1).

    4. Em Desempenho, selecione Standard.*

    5. Para Replicação , selecione Armazenamento localmente redundante (LRS).

    6. Deixe Transferência segura necessária como Desativado.

    7. Selecione uma Subscrição.

    8. Escolha um Grupo de recursos ou crie um novo. Um grupo de recursos fornece uma forma de monitorizar, controlar o acesso, aprovisionar e gerir a faturação de uma coleção de recursos do Azure.

    9. Determine a Localização do grupo de recursos (se estiver a criar um novo Grupo de Recursos). Idealmente, a localização seria na região onde a aplicação seria executada. Alguns recursos do Azure só estão disponíveis em determinadas regiões.

  5. Terá de confirmar que compreendeu os Termos e Condições aplicados a este Serviço.

    Captura de ecrã a mostrar a página criar conta de armazenamento.

  6. Depois de clicar em Criar, terá de aguardar que o serviço seja criado, o que poderá demorar um minuto.

  7. Será apresentada uma notificação no portal assim que a instância do Serviço for criada.

    Captura de ecrã a mostrar a notificação de implementação com êxito.

  8. Neste momento, não precisa de seguir o recurso, basta avançar para o capítulo seguinte.

Capítulo 2 – O Portal do Azure: criar o Serviço de Multimédia

Para utilizar o Serviço de Multimédia do Azure, terá de configurar uma instância do serviço para ser disponibilizada à sua aplicação (em que o titular da conta tem de ser um Administração).

  1. No portal do Azure, clique em Criar um recurso no canto superior esquerdo e procure Serviço de Multimédia, prima Enter. O recurso que pretende atualmente tem um ícone cor-de-rosa; clique nesta página para mostrar uma nova página.

    Captura de ecrã do portal do Azure. A opção Serviços de Multimédia está realçada.

  2. A nova página irá fornecer uma descrição do Serviço de Multimédia. Na parte inferior esquerda deste pedido, clique no botão Criar para criar uma associação com este serviço.

    Captura de ecrã do portal do Azure. O botão Criar está realçado.

  3. Depois de clicar em Criar um painel, será apresentado onde terá de fornecer alguns detalhes sobre o seu novo Serviço de Multimédia:

    1. Insira o Nome da Conta pretendido para esta instância de serviço.

    2. Selecione uma Subscrição.

    3. Escolha um Grupo de Recursos ou crie um novo. Um grupo de recursos fornece uma forma de monitorizar, controlar o acesso, aprovisionar e gerir a faturação de uma coleção de recursos do Azure. Recomenda-se manter todos os serviços do Azure associados a um único projeto (por exemplo, estes laboratórios) num grupo de recursos comum.

    Se quiser ler mais sobre os Grupos de Recursos do Azure, siga esta ligação sobre como gerir Grupos de Recursos do Azure.

    1. Determine a Localização do grupo de recursos (se estiver a criar um novo Grupo de Recursos). Idealmente, a localização seria na região onde a aplicação seria executada. Alguns recursos do Azure só estão disponíveis em determinadas regiões.

    2. Na secção Conta de Armazenamento , clique na secção Selecione... e, em seguida, clique na Conta de Armazenamento que criou no último Capítulo.

    3. Também terá de confirmar que compreendeu os Termos e Condições aplicados a este Serviço.

    4. Clique em Criar.

      Captura de ecrã a mostrar a página Criar Conta do Serviço de Multimédia.

  4. Depois de clicar em Criar, terá de aguardar que o serviço seja criado, o que poderá demorar um minuto.

  5. Será apresentada uma notificação no portal assim que a instância do Serviço for criada.

    Captura de ecrã do ícone de notificação no menu do portal.

  6. Clique na notificação para explorar a nova instância do Serviço.

    Captura de ecrã a mostrar a notificação para implementação com êxito.

  7. Clique no botão Ir para recurso na notificação para explorar a nova instância do Serviço.

  8. Na nova página Serviço de multimédia, no painel à esquerda, clique na ligação Recursos , que fica a meio caminho.

  9. Na página seguinte, no canto superior esquerdo da página, clique em Carregar.

    Captura de ecrã da página Recursos. As opções Carregar e Recursos estão realçadas.

  10. Clique no ícone Pasta para navegar nos seus ficheiros e selecione o primeiro Vídeo 360 que pretende transmitir em fluxo.

    Pode seguir esta ligação para transferir um vídeo de exemplo.

    Captura de ecrã a mostrar a página carregar um recurso de vídeo.

Aviso

Os nomes de ficheiro longos podem causar um problema com o codificador: para garantir que os vídeos não têm problemas, considere reduzir o comprimento dos nomes dos seus ficheiros de vídeo.

  1. A barra de progresso ficará verde quando o vídeo terminar de carregar.

    Captura de ecrã a mostrar a barra de progresso carregar um recurso de vídeo.

  2. Clique no texto acima (yourservicename - Assets) para regressar à página Recursos .

  3. Irá reparar que o seu vídeo foi carregado com êxito. Clique no mesmo.

    Captura de ecrã da página Recursos. O vídeo 1 ponto M P 4 está realçado.

  4. A página para a qual foi redirecionado irá mostrar-lhe informações detalhadas sobre o seu vídeo. Para poder utilizar o seu vídeo, tem de o codificar ao clicar no botão Codificar no canto superior esquerdo da página.

    Captura de ecrã a mostrar a página do recurso. O botão codificar está realçado.

  5. Será apresentado um novo painel à direita, onde poderá definir opções de codificação para o seu ficheiro. Defina as seguintes propriedades (algumas já estarão definidas por predefinição):

    1. Nome do codificador de multimédia Media Encoder Standard

    2. Codificação predefinida Content Adaptive Multiple Bitrate MP4

    3. Nome da tarefa Media Encoder Standard processamento de Video1.mp4

    4. Video1.mp4 de nome do recurso de multimédia de saída - Media Encoder Standard codificado

      Captura de ecrã a mostrar a página codificar um recurso.

  6. Clique no botão Criar.

  7. Irá reparar numa barra com a tarefa Codificação adicionada, clicar nessa barra e será apresentado um painel com o progresso da Codificação apresentado na mesma.

    Captura de ecrã a mostrar a tarefa de codificação com a etiqueta da barra de aviso adicionada.

    Captura de ecrã da página de processamento do codificador.

  8. Aguarde até que a Tarefa seja concluída. Assim que terminar, não hesite em fechar o painel com o "X" no canto superior direito desse painel.

    Captura de ecrã da barra de progresso com o estado concluído.

    Captura de ecrã a mostrar o menu superior da página de processamento do codificador de multimédia.

    Importante

    O tempo que isto demora, depende do tamanho do ficheiro do seu vídeo. Este processo pode demorar bastante tempo.

  9. Agora que a versão codificada do vídeo foi criada, pode publicá-la para torná-la acessível. Para tal, clique na ligação azul Recursos para voltar à página de recursos.

    Captura de ecrã do Portal do Azure. A ligação de recursos está realçada.

  10. Verá o seu vídeo juntamente com outro, que é de Multi-Bitrate MP4 do Tipo de Recurso.

    Captura de ecrã a mostrar o menu recursos do Microsoft Azure.

    Nota

    Poderá reparar que o novo recurso, juntamente com o vídeo inicial, é Desconhecido e tem bytes "0" para o tamanho, basta atualizar a janela para que seja atualizado.

  11. Clique neste novo recurso.

    Captura de ecrã a mostrar os recursos de listagem de diretórios.

  12. Verá um painel semelhante ao que utilizou anteriormente, apenas este é um elemento diferente. Clique no botão Publicar localizado no centro superior da página.

    Captura de ecrã a mostrar a barra de menus superior. O botão Publicar está realçado.

  13. Ser-lhe-á pedido que defina um Localizador, que é o ponto de entrada, para o ficheiro/s nos seus Recursos. Para o seu cenário, defina as seguintes propriedades:

    1. Tipo de localizador>Progressista.

    2. A data e hora serão definidas para si, desde a data atual até uma hora no futuro (cem anos neste caso). Deixe como está ou altere-o para se adequar.

    Nota

    Para obter mais informações sobre Localizadores e o que pode escolher, visite a Documentação dos Serviços de Multimédia do Azure.

  14. Na parte inferior desse painel, clique no botão Adicionar .

    Captura de ecrã a mostrar as listagens de diretórios com o recurso a publicar.

  15. O seu vídeo está agora publicado e pode ser transmitido em fluxo com o respetivo ponto final. Mais abaixo na página encontra-se uma secção Ficheiros . É aqui que estarão as diferentes versões codificadas do seu vídeo. Selecione a resolução mais alta possível (na imagem abaixo é o ficheiro 1920x960) e, em seguida, será apresentado um painel à direita. Aí encontrará um URL de Transferência. Copie este Ponto Final , pois irá utilizá-lo mais tarde no seu código.

    Captura de ecrã da secção microsoft Ficheiros do Azure.

    Captura de ecrã a mostrar a página de informações do recurso.

    Nota

    Também pode premir o botão Reproduzir para reproduzir o vídeo e testá-lo.

  16. Agora tem de carregar o segundo vídeo que irá utilizar neste Laboratório. Siga os passos acima, repetindo o mesmo processo para o segundo vídeo. Certifique-se de que também copia o segundo Ponto Final . Utilize a seguinte ligação para transferir um segundo vídeo.

  17. Assim que ambos os vídeos tiverem sido publicados, está pronto para avançar para o próximo Capítulo.

Capítulo 3 – Configurar o Projeto unity

Segue-se uma configuração típica para o desenvolvimento com o Mixed Reality e, como tal, é um bom modelo para outros projetos.

  1. Abra o Unity e clique em Novo.

    Captura de ecrã do separador Projetos do Unity. O botão Novo está realçado.

  2. Agora, terá de fornecer um nome de Projeto do Unity, inserir MR_360VideoStreaming.. Certifique-se de que o tipo de projeto está definido como 3D. Defina a Localização para um local adequado para si (lembre-se de que é melhor estar mais perto dos diretórios de raiz). Em seguida, clique em Criar projeto.

    Captura de ecrã a mostrar a página Novos projetos do Unity.

  3. Com o Unity aberto, vale a pena verificar se o Editor de Scripts predefinido está definido como Visual Studio. Aceda a EditarPreferências e, em seguida, a partir da nova janela, navegue para Ferramentas Externas. Altere o Editor de Scripts Externos para o Visual Studio 2017. Feche a janela Preferências .

    Captura de ecrã a mostrar o menu do editor de scripts externo. O Visual Studio 2017 está selecionado.

  4. Em seguida, aceda a Definições de Compilação de Ficheiros e mude a plataforma para Plataforma Universal do Windows, clicando no botão Mudar de Plataforma.

  5. Certifique-se também de que:

    1. O Dispositivo de Destino está definido como Qualquer Dispositivo.

    2. O Tipo de Compilação está definido como D3D.

    3. O SDK está definido como Mais Recente instalado.

    4. A Versão do Visual Studio está definida como Mais Recente instalada.

    5. A compilação e a execução estão definidas como Máquina Local.

    6. Não se preocupe com a configuração de Cenas neste momento, pois irá configurá-los mais tarde.

    7. As restantes definições devem ser deixadas como predefinição por enquanto.

      Captura de ecrã do ecrã definições de compilação do Unity.

  6. Na janela Definições de Compilação , clique no botão Definições do Leitor . Esta ação abrirá o painel relacionado no espaço onde o Inspetor está localizado.

  7. Neste painel, é necessário verificar algumas definições:

    1. No separador Outras Definições :

      1. A Versão do Runtime de Scripting deve ser Estável (.NET 3.5 Equivalente).

      2. O Back-end de Script deve ser .NET.

      3. O Nível de Compatibilidade de API deve ser .NET 4.6.

        Captura de ecrã a mostrar a página Definições para Plataforma Universal do Windows.

    2. Mais abaixo no painel, em Definições XR (encontradas abaixo de Definições de Publicação), marque a Realidade Virtual Suportada, certifique-se de que o SDK Windows Mixed Reality é adicionado.

      Captura de ecrã a mostrar o ecrã de definições do Unity X R.

    3. No separador Definições de Publicação , em Capacidades, verifique:

      • InternetClient

        Captura de ecrã a mostrar o ecrã Capacidades. O Cliente de Internet está selecionado.

  8. Depois de efetuar essas alterações, feche a janela Definições de Compilação .

  9. Guarde o Projeto de Gravação de Ficheiros do Project.

Capítulo 4 – Importar o pacote do Unity do InsideOutSphere

Importante

Se quiser ignorar o componente Configuração do Unity deste curso e continuar diretamente para o código, não hesite em transferir este .unitypackage, importá-lo para o seu projeto como um Pacote Personalizado e, em seguida, continuar a partir do Capítulo 5. Ainda terá de criar um Projeto do Unity.

Para este curso, terá de transferir um Pacote de Recursos do Unity denominado InsideOutSphere.unitypackage.

Como importar o unitypackage:

  1. Com o dashboard do Unity à sua frente, clique em Ativos no menu na parte superior do ecrã e, em seguida, clique em Importar Pacote > Personalizado.

    Captura de ecrã a mostrar o menu recursos. O menu importar pacote está aberto. O Pacote Personalizado está selecionado.

  2. Utilize o seletor de ficheiros para selecionar o pacote InsideOutSphere.unitypackage e clique em Abrir. Será apresentada uma lista de componentes para este recurso. Confirme a importação ao clicar em Importar.

    Captura de ecrã do ecrã Importar Pacote do Unity.

  3. Depois de concluir a importação, irá reparar que foram adicionadas três pastas novas, Materiais, Modelos e Pré-fabricados à pasta Recursos . Este tipo de estrutura de pastas é típica para um projeto do Unity.

    Captura de ecrã a mostrar a pasta recursos.

    1. Abra a pasta Modelos e verá que o modelo InsideOutSphere foi importado.

    2. Na pasta Materiais , encontrará o material do InsideOutSphereslambert1, juntamente com um material chamado ButtonMaterial, que é utilizado pelo GazeButton, que verá em breve.

    3. A pasta Prefabs contém a prefab InsideOutSphere que contém o modeloInsideOutSphere e o GazeButton.

    4. Não está incluído nenhum código. Irá escrever o código ao seguir este curso.

  4. Na Hierarquia, selecione o objeto Câmara Principal e atualize os seguintes componentes:

    1. Transformação

      1. Posição = X: 0, Y: 0, Z: 0.

      2. Rotação = X: 0, Y: 0, Z: 0.

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

    2. Câmara

      1. Limpar Sinalizadores: Cor Sólida.

      2. Recorte de Aviões: Perto: 0.1, Longe: 6.

        Captura de ecrã do ecrã Inspetor.

  5. Navegue para a pasta Prefab e, em seguida, arraste a prefab InsideOutSphere para o Painel de Hierarquia .

    Captura de ecrã a mostrar o menu de pastas Prefab e o ambiente do programador.

  6. Expanda o objeto InsideOutSphere na Hierarquia ao clicar na pequena seta junto ao mesmo. Verá um objeto subordinado abaixo do mesmo chamado GazeButton. Isto será utilizado para alterar cenas e, portanto, vídeos.

    Captura de ecrã do separador hierarquia.

  7. Na Janela inspetor, clique no componente Transformar do InsideOutSphere, certifique-se de que as seguintes propriedades estão definidas:

Transformar - Posição

X Y Z
0 0 0

Transformar - Rotação

X Y Z
0 -50 0

Transformar - Dimensionar

X Y Z
0 0 0

Captura de ecrã a mostrar o ecrã Inspetor aberto para Dentro para Fora do Sphere.

  1. Clique no objeto subordinado GazeButton e defina a transformação da seguinte forma:

Transformar - Posição

X Y Z
3.6 1.3 0

Transformar - Rotação

X Y Z
0 0 0

Transformar - Dimensionar

X Y Z
1 1 1

Captura de ecrã a mostrar o separador cena aberto.

Capítulo 5 - Criar a classe VideoController

A classe VideoController aloja os dois pontos finais de vídeo que serão utilizados para transmitir o conteúdo a partir do Serviço de Multimédia do Azure.

Para criar esta classe:

  1. Clique com o botão direito do rato na Pasta de Recursos, localizada no Painel de Projeto , e clique em Criar > Pasta. Atribua um nome aos Scripts da pasta.

    Captura de ecrã a mostrar o menu da pasta asset. O menu criar está aberto e a pasta está selecionada.

    Captura de ecrã do separador projeto. A pasta Recursos está selecionada.

  2. Faça duplo clique na pasta Scripts para abri-la.

  3. Clique com o botão direito do rato dentro da pasta e, em seguida, clique em Criar > Script C#. Dê o nome VideoController ao script.

    Captura de ecrã do ficheiro denominado Controlador de Vídeo.

  4. Faça duplo clique no novo script do VideoController para o abrir com o Visual Studio 2017.

    Captura de ecrã a mostrar o código do ficheiro do Controlador de Vídeo.

  5. Atualize os espaços de nomes na parte superior do ficheiro de código da seguinte forma:

    using System.Collections;
    using UnityEngine;
    using UnityEngine.SceneManagement;
    using UnityEngine.Video;
    
  6. Introduza as seguintes variáveis na classe VideoController , juntamente com o método 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. Chegou a altura de introduzir os pontos finais dos vídeos do Serviço de Multimédia do Azure:

    1. O primeiro na variável video1endpoint .

    2. O segundo na variável video2endpoint .

    Aviso

    Existe um problema conhecido com a utilização de https no Unity, com a versão 2017.4.1f1. Se os vídeos indicarem um erro ao reproduzir, experimente utilizar "http".

  8. Em seguida, o método Start() tem de ser editado. Este método será acionado sempre que o utilizador mudar de cena (alterando consequentemente o vídeo) ao observar o Botão Olhar.

        // Use this for initialization
        void Start()
        {
            Application.runInBackground = true;
            StartCoroutine(PlayVideo());
        }
    
  9. Seguindo o método Start( ), insira o método PlayVideo()IEnumerator , que será utilizado para iniciar vídeos de forma totalmente integrada (para que não se veja gaguez).

        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. O último método necessário para esta classe é o método ChangeScene(), que será utilizado para trocar entre cenas.

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

    Dica

    O método ChangeScene() utiliza uma funcionalidade de C# útil denominada Operador Condicional. Isto permite que as condições sejam verificadas e, em seguida, os valores devolvidos com base no resultado da verificação, tudo numa única instrução. Siga esta ligação para saber mais sobre o Operador Condicional.

  11. Guarde as alterações no Visual Studio antes de regressar ao Unity.

  12. No Editor do Unity, clique e arraste a classe VideoController [de]{.underline} da pasta Scripts para o objeto Câmara Principal no Painel de Hierarquia .

  13. Clique na Câmara Principal e observe o Painel de Inspetores. Irá reparar que, no componente script recentemente adicionado, existe um campo com um valor vazio. Este é um campo de referência, que visa as variáveis públicas no seu código.

  14. Arraste o objeto InsideOutSphere do Painel hierarquia para o bloco Sphere , conforme mostrado na imagem abaixo.

    Captura de ecrã do menu hierarquia. A Câmara Principal está selecionada.Captura de ecrã do bloco do Sphere.

Capítulo 6 - Criar a classe Gaze

Esta classe é responsável por criar um Raycast que será projetado para a frente a partir da Câmara Principal, para detetar o objeto que o utilizador está a ver. Neste caso, o Raycast terá de identificar se o utilizador está a olhar para o objeto GazeButton na cena e acionar um comportamento.

Para criar esta Classe:

  1. Aceda à pasta Scripts que criou anteriormente.

  2. Clique com o botão direito do rato no Painel de Projeto , CriarScript C#. Dê o nome Gaze ao script.

  3. Faça duplo clique no novo script Gaze para o abrir com o Visual Studio 2017.

  4. Certifique-se de que o seguinte espaço de nomes está na parte superior do script e remova outros:

    using UnityEngine;
    
  5. Em seguida, adicione as seguintes variáveis dentro da 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. O código para os métodos Awake() e Start() tem agora de ser adicionado.

        private void Awake()
        {
            // Set this class to behave similar to singleton 
            instance = this;
        }
    
        void Start()
        {
            FocusedGameObject = null;
        }
    
  7. Adicione o seguinte código no método Update() para projetar um Raycast e detetar o destino atingido:

        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. Guarde as alterações no Visual Studio antes de regressar ao Unity.

  9. Clique e arraste a classe Gaze da pasta Scripts para o objeto Câmara Principal no Painel de Hierarquia .

Capítulo 7 - Configurar as duas Cenas do Unity

O objetivo deste Capítulo é configurar as duas cenas, cada uma a alojar um vídeo para transmitir. Irá duplicar a cena que já criou, para que não seja necessário configurá-la novamente, embora, em seguida, edite a nova cena, para que o objeto GazeButton esteja numa localização diferente e tenha um aspeto diferente. Isto serve para mostrar como alterar entre cenas.

  1. Para tal, aceda a Cena de Gravação de Ficheiros > como.... Será apresentada uma janela guardar. Clique no botão Nova pasta .

    Capítulo 7 - Configurar as duas Cenas do Unity

  2. Atribua um nome às Cenas da pasta.

  3. A janela Guardar Cena continuará aberta. Abra a pasta Cenas recém-criada.

  4. No campo Nome do ficheiro: texto, escreva VideoScene1 e, em seguida, prima Guardar.

  5. De volta ao Unity, abra a pasta Cenas e clique com o botão esquerdo do rato no ficheiro VideoScene1 . Utilize o teclado e prima Ctrl + D para duplicar essa cena

    Dica

    O comando Duplicar também pode ser executado ao navegar para Editar > Duplicado.

  6. O Unity incrementará automaticamente o número dos nomes das cenas, mas verifica-o mesmo assim, para garantir que corresponde ao código inserido anteriormente.

    Deverá ter VideoScene1 e VideoScene2.

  7. Com as suas duas cenas, aceda a Definições de Compilação de Ficheiros>. Com a janela Definições de Compilação aberta, arraste os seus cenários para a secção Cenas na compilação.

    Captura de ecrã a mostrar a janela Definições de Compilação.

    Dica

    Pode selecionar ambas as cenas a partir da pasta Cenas ao premir o botão Ctrl e, em seguida, clicar com o botão esquerdo em cada cena e, por fim, arrastar ambos.

  8. Feche a janela Definições de Compilação e faça duplo clique em VideoScene2.

  9. Com a segunda cena aberta, clique no objeto subordinado GazeButton do InsideOutSphere e defina a respetiva Transformação da seguinte forma:

Transformar - Posição

X Y Z
0 1.3 3.6

Transformar - Rotação

X Y Z
0 0 0

Transformar - Dimensionar

X Y Z
1 1 1
  1. Com a criança GazeButton ainda selecionada, observe o Inspetor e o Filtro de Malha. Clique no pequeno destino junto ao campo De referência do Mesh:

    Captura de ecrã a mostrar o ecrã do inspetor para o Botão Olhar.

  2. Será apresentada uma janela de pop-up Selecionar Malha . Faça duplo clique na Malha de Cubos na lista de Recursos.

    Captura de ecrã a mostrar a janela de pop-up Selecionar Malha.

  3. O Filtro de Malha será atualizado e agora será um Cubo. Agora, clique no ícone de Engrenagem junto a Colisor do Sphere e clique em Remover Componente para eliminar o colisor deste objeto.

    Captura de ecrã a mostrar o menu Colisor do Sphere. Remover componente está selecionado.

  4. Com o GazeButton ainda selecionado, clique no botão Adicionar Componente na parte inferior do Inspetor. No campo de pesquisa, a caixa de tipo e o Colisor de Caixas serão uma opção: clique nessa opção para adicionar um Colisor de Caixas ao objeto GazeButton .

    Captura de ecrã a mostrar a caixa de pesquisa Adicionar Componente.

  5. O GazeButton está agora parcialmente atualizado, para ter um aspeto diferente, no entanto, irá agora criar um novo Material, para que pareça completamente diferente e seja mais fácil de reconhecer como um objeto diferente do objeto na primeira cena.

  6. Navegue para a pasta Materiais , no Painel de Projetos. Duplicar o Material ButtonMaterial (prima Ctrl + D no teclado ou clique com o botão esquerdo do rato no Material e, em seguida, na opção editar ficheiro, selecione Duplicar).

    Captura de ecrã a mostrar a pasta Materiais no separador projeto.Captura de ecrã do menu editar com duplicado selecionado.

  7. Selecione o novo Material ButtonMaterial (aqui denominado ButtonMaterial 1) e, na janela Inspetor, clique na janela de cores Albedo . Será apresentado um pop-up, onde pode selecionar outra cor (escolha o que quiser) e, em seguida, feche o pop-up. O Material será a sua própria instância e diferente do original.

    Captura de ecrã a mostrar o pop-up de seleção de cores.

  8. Arraste o novo Material para a criança GazeButton , para agora atualizar completamente o respetivo aspeto, para que seja facilmente distinguível a partir do botão de primeiras cenas.

    Captura de ecrã do separador cena do editor de projetos.

  9. Neste momento, pode testar o projeto no Editor antes de criar o projeto UWP.

    • Prima o botão Reproduzir no Editor e utilize os auscultadores.

      Captura de ecrã a mostrar os botões reproduzir, colocar em pausa e ignorar. O botão reproduzir está realçado.

  10. Observe os dois objetos GazeButton para alternar entre o primeiro e o segundo vídeo.

Capítulo 8 – Criar a Solução UWP

Depois de garantir que o editor não tem erros, está pronto para Compilar.

Para Compilar:

  1. Guarde a cena atual clicando em Guardar Ficheiros>.

  2. Selecione a caixa denominada Projetos C# do Unity (isto é importante porque lhe permitirá editar as classes após a conclusão da compilação).

  3. Aceda a Definições de Compilação de Ficheiros>, clique em Compilar.

  4. Ser-lhe-á pedido que selecione a pasta onde pretende criar a Solução.

  5. Crie uma pasta BUILDS e, nessa pasta, crie outra pasta com um nome adequado à sua escolha.

  6. Clique na sua nova pasta e, em seguida, clique em Selecionar Pasta, para escolher essa pasta, para iniciar a compilação nessa localização.

    Captura de ecrã a mostrar a pasta BUILDS realçada.Captura de ecrã da pasta Compilação de Transmissão em Fluxo de Vídeo realçada.

  7. Assim que o Unity terminar a construção (poderá demorar algum tempo), abrirá uma janela Explorador de Ficheiros na localização da sua compilação.

Capítulo 9 - Implementar no Computador Local

Assim que a compilação estiver concluída, será apresentada uma janela de Explorador de Ficheiros na localização da compilação. Abra a Pasta à qual nomeou e criou e, em seguida, faça duplo clique no ficheiro de solução (.sln) nessa pasta, para abrir a sua solução com o Visual Studio 2017.

A única coisa a fazer é implementar a sua aplicação no seu computador (ou Máquina Local).

Para implementar no Computador Local:

  1. No Visual Studio 2017, abra o ficheiro de solução que acabou de ser criado.

  2. Na Plataforma de Soluções, selecione x86, Máquina Local.

  3. Na Configuração da Solução , selecione Depurar.

    Captura de ecrã a mostrar o menu Configuração da Solução.

  4. Agora, terá de restaurar quaisquer pacotes para a sua solução. Clique com o botão direito do rato na solução e clique em Restaurar Pacotes NuGet para Solução...

    Nota

    Isto é feito porque os pacotes que o Unity criou têm de ser direcionados para trabalhar com as referências das máquinas locais.

  5. Aceda ao menu Compilar e clique em Implementar Solução para colocar a aplicação sideload no seu computador. O Visual Studio irá criar primeiro e, em seguida, implementar a sua aplicação.

  6. A sua Aplicação deverá agora aparecer na lista de aplicações instaladas, prontas para serem iniciadas.

    Captura de ecrã da lista de aplicações instaladas.

Quando executar a aplicação Mixed Reality, estará dentro do modelo InsideOutSphere que utilizou na sua aplicação. Esta esfera será onde o vídeo será transmitido para, fornecendo uma vista de 360 graus, do vídeo recebido (que foi filmado para este tipo de perspectiva). Não se surpreenda se o vídeo demorar alguns segundos a carregar, a sua aplicação está sujeita à velocidade de Internet disponível, uma vez que o vídeo precisa de ser obtido e transferido, para transmitir em fluxo para a sua aplicação. Quando estiver pronto, altere cenas e abra o segundo vídeo ao observar a esfera vermelha! Em seguida, sinta-se à vontade para voltar, usando o cubo azul na segunda cena!

A sua aplicação do Serviço de Multimédia do Azure concluída

Parabéns, criou uma aplicação de realidade mista que tira partido do Serviço de Multimédia do Azure para transmitir em fluxo 360 vídeos.

Captura de ecrã de uma aplicação de realidade mista de exemplo.

Captura de ecrã a mostrar um exemplo de aplicação de realidade mista.

Exercícios de Bónus

Exercício 1

É inteiramente possível utilizar apenas uma única cena para alterar vídeos neste tutorial. Experimente a sua aplicação e transforme-a numa única cena! Talvez até adicione outro vídeo à mistura.

Exercício 2

Experimente o Azure e o Unity e tente implementar a capacidade de a aplicação selecionar automaticamente um vídeo com um tamanho de ficheiro diferente, dependendo da força de uma ligação à Internet.