HoloLens (1ª geração) e Azure 306: Streaming de vídeo


Observação

Os tutoriais do Mixed Reality Academy foram projetados com o HoloLens (1ª geração) e os headsets imersivos de realidade misturada em mente. Dessa forma, achamos que é importante continuar disponibilizando esses tutoriais para os desenvolvedores que ainda buscam obter diretrizes para o desenvolvimento visando esses dispositivos. Esses tutoriais não serão atualizados com os conjuntos de ferramentas mais recentes nem com as interações usadas para o HoloLens 2. Eles serão mantidos para continuar funcionando nos dispositivos compatíveis. Haverá uma nova série de tutoriais que serão postados no futuro que demonstrarão como desenvolver para HoloLens 2. Este aviso será atualizado com um link para esses tutoriais quando eles forem postados.


Captura de tela de um exemplo de Windows Mixed Reality V R.Captura de tela de uma experiência de Windows Mixed Reality V R.

Neste curso, você aprenderá a conectar seus Serviços de Mídia do Azure a uma experiência Windows Mixed Reality VR para permitir a reprodução de vídeo de 360 graus em headsets imersivos.

Os Serviços de Mídia do Azure são uma coleção de serviços que oferece serviços de streaming de vídeo de qualidade de transmissão para alcançar públicos maiores nos dispositivos móveis mais populares de hoje. Para obter mais informações, visite a página Serviços de Mídia do Azure.

Depois de concluir este curso, você terá um aplicativo de headset imersivo de realidade misturada, que poderá fazer o seguinte:

  1. Recupere um vídeo de 360 graus de um Armazenamento do Azure por meio do Serviço de Mídia do Azure.

  2. Exiba o vídeo de 360 graus recuperado em uma cena do Unity.

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

Em seu aplicativo, cabe a você saber como você integrará os resultados ao seu design. Este curso foi projetado para ensinar como integrar um Serviço do Azure ao seu Projeto do Unity. É seu trabalho usar o conhecimento obtido com este curso para aprimorar seu aplicativo de realidade misturada.

Suporte a dispositivos

Curso HoloLens Headsets imersivos
MR e Azure 306: streaming de vídeo ✔️

Pré-requisitos

Observação

Este tutorial foi projetado para desenvolvedores que têm experiência básica com Unity e C#. Lembre-se também de que os pré-requisitos e as instruções escritas neste documento representam o que foi testado e verificado no momento da gravação (maio de 2018). Você é livre para usar o software mais recente, conforme listado no artigo instalar as ferramentas, embora não se presuma que as informações neste curso corresponderão perfeitamente ao que você encontrará no software mais recente do que o listado abaixo.

Recomendamos o seguinte hardware e software para este curso:

Antes de começar

  1. Para evitar problemas ao criar esse projeto, é altamente sugerido que você crie o projeto mencionado neste tutorial em uma pasta raiz ou quase raiz (caminhos de pasta longa podem causar problemas no tempo de build).

  2. Configure e teste seu Realidade Misturada Headset Imersivo.

    Observação

    Você não exigirá controladores de movimento para este curso. Se você precisar de suporte para configurar o Headset Imersivo, clique no link sobre como configurar Windows Mixed Reality.

Capítulo 1 – Portal do Azure: criando a conta de armazenamento do Azure

Para usar o Serviço de Armazenamento do Azure, você precisará criar e configurar uma Conta de Armazenamento no portal do Azure.

  1. Faça logon no Portal do Azure.

    Observação

    Se você ainda não tiver uma conta do Azure, precisará criar uma. Se você estiver seguindo este tutorial em uma situação de sala de aula ou laboratório, peça ajuda ao instrutor ou a um dos supervisores para configurar sua nova conta.

  2. Depois de fazer logon, clique em Contas de armazenamento no menu à esquerda.

    Captura de tela do menu portal do Azure. As contas de armazenamento estão realçadas.

  3. Na guia Contas de Armazenamento , clique em Adicionar.

    Captura de tela da caixa de diálogo da conta de armazenamento. Adicionar está realçado.

  4. Na guia Criar conta de armazenamento :

    1. Insira um Nome para sua conta, lembre-se de que esse campo aceita apenas números e letras minúsculas.

    2. Para Modelo de implantação, selecione Gerenciador de recursos.

    3. Em Tipo de conta, selecione Armazenamento (uso geral v1).

    4. Para Desempenho, selecione Padrão.*

    5. Para Replicação , selecione Armazenamento com redundância local (LRS).

    6. Deixe a transferência segura necessária como Desabilitada.

    7. Selecione uma Assinatura.

    8. Escolha um grupo de recursos ou crie um novo. Um grupo de recursos fornece uma maneira de monitorar, controlar o acesso, provisionar e gerenciar a cobrança de uma coleção de ativos do Azure.

    9. Determine o Local do grupo de recursos (se você estiver criando um novo Grupo de Recursos). O local seria idealmente na região em que o aplicativo seria executado. Alguns ativos do Azure só estão disponíveis em determinadas regiões.

  5. Você precisará confirmar que entendeu os Termos e Condições aplicados a esse Serviço.

    Captura de tela da página criar conta de armazenamento.

  6. Depois de clicar em Criar, você precisará aguardar a criação do serviço, isso pode levar um minuto.

  7. Uma notificação será exibida no portal depois que a instância de Serviço for criada.

    Captura de tela da notificação de implantação bem-sucedida.

  8. Neste ponto, você não precisa seguir o recurso, basta passar para o próximo Capítulo.

Capítulo 2 – Portal do Azure: criando o Serviço de Mídia

Para usar o Serviço de Mídia do Azure, você precisará configurar uma instância do serviço a ser disponibilizada para seu aplicativo (em que o titular da conta precisa ser um Administração).

  1. No Portal do Azure, clique em Criar um recurso no canto superior esquerdo e pesquise Por Serviço de Mídia, pressione Enter. O recurso desejado atualmente tem um ícone rosa; clique nisso para mostrar uma nova página.

    Captura de tela do Portal do Azure. A opção Serviços de Mídia está realçada.

  2. A nova página fornecerá uma descrição do Serviço de Mídia. Na parte inferior esquerda deste prompt, clique no botão Criar para criar uma associação com esse serviço.

    Captura de tela do Portal do Azure. O botão Criar está realçado.

  3. Depois de clicar em Criar um painel, você precisará fornecer alguns detalhes sobre seu novo Serviço de Mídia:

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

    2. Selecione uma Assinatura.

    3. Escolha um Grupo de Recursos ou crie um novo. Um grupo de recursos fornece uma maneira de monitorar, controlar o acesso, provisionar e gerenciar a cobrança de uma coleção de ativos do Azure. É recomendável manter todos os serviços do Azure associados a um único projeto (por exemplo, como esses laboratórios) em um grupo de recursos comum).

    Se você quiser ler mais sobre os Grupos de Recursos do Azure, siga este link sobre como gerenciar grupos de recursos do Azure.

    1. Determine o Local do grupo de recursos (se você estiver criando um novo Grupo de Recursos). O local seria idealmente na região em que o aplicativo seria executado. Alguns ativos do Azure só estão disponíveis em determinadas regiões.

    2. Para a seção Conta de Armazenamento , clique na seção Selecione... e clique na Conta de Armazenamento que você criou no último Capítulo.

    3. Você também precisará confirmar que entendeu os Termos e Condições aplicados a esse Serviço.

    4. Clique em Criar.

      Captura de tela da página Criar Conta de Serviço de Mídia.

  4. Depois de clicar em Criar, você precisará aguardar a criação do serviço, isso pode levar um minuto.

  5. Uma notificação será exibida no portal depois que a instância de Serviço for criada.

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

  6. Clique na notificação para explorar sua nova instância de Serviço.

    Captura de tela da notificação para implantação bem-sucedida.

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

  8. Na nova página Serviço de Mídia, no painel à esquerda, clique no link Ativos , que fica a meio caminho.

  9. Na próxima página, no canto superior esquerdo da página, clique em Carregar.

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

  10. Clique no ícone Pasta para procurar seus arquivos e selecione o primeiro Vídeo 360 que você gostaria de transmitir.

    Você pode seguir este link para baixar um vídeo de exemplo.

    Captura de tela da página carregar um ativo de vídeo.

Aviso

Nomes de arquivo longos podem causar um problema com o codificador: portanto, para garantir que os vídeos não tenham problemas, considere reduzir o comprimento dos nomes dos arquivos de vídeo.

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

    Captura de tela da barra de progresso de carregar um ativo de vídeo.

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

  3. Você observará que o vídeo foi carregado com êxito. Clique nele.

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

  4. A página para a qual você é redirecionado mostrará informações detalhadas sobre o vídeo. Para poder usar o vídeo, você precisa codificá-lo, clicando no botão Codificar no canto superior esquerdo da página.

    Captura de tela da página de ativos. O botão de codificação está realçado.

  5. Um novo painel será exibido à direita, no qual você poderá definir opções de codificação para o arquivo. Defina as seguintes propriedades (algumas já serão definidas por padrão):

    1. Nome do codificador de mídia Media Encoder Standard

    2. Encoding preset Content Adaptive Multiple Bitrate MP4

    3. Nome do trabalho Media Encoder Standard processamento de Video1.mp4

    4. Nome do ativo de mídia de saídaVideo1.mp4 -- Media Encoder Standard codificado

      Captura de tela da página codificar um ativo.

  6. Selecione o botão Criar.

  7. Você observará uma barra com o trabalho de Codificação adicionado, clicará nessa barra e um painel aparecerá com o progresso da codificação exibido nela.

    Captura de tela do trabalho de codificação rotulado da barra de avisos adicionado.

    Captura de tela da página de processamento do codificador.

  8. Aguarde até que o Trabalho seja concluído. Depois de terminar, fique à vontade para fechar o painel com o 'X' no canto superior direito desse painel.

    Captura de tela da barra de progresso com o status concluído.

    Captura de tela do menu superior da página de processamento do codificador de mídia.

    Importante

    O tempo que isso leva depende do tamanho do arquivo do vídeo. Esse processo pode levar algum tempo.

  9. Agora que a versão codificada do vídeo foi criada, você pode publicá-la para torná-la acessível. Para fazer isso, clique no link azul Ativos para voltar à página de ativos.

    Captura de tela do Portal do Azure. O link de ativos está realçado.

  10. Você verá seu vídeo junto com outro, que é do tipo de ativo MP4 de várias taxas de bits.

    Captura de tela do menu ativos do Microsoft Azure.

    Observação

    Você pode observar que o novo ativo, juntamente com seu vídeo inicial, é Desconhecido e tem '0' bytes para seu tamanho, basta atualizar sua janela para que ele seja atualizado.

  11. Clique neste novo ativo.

    Captura de tela dos ativos de listagem de diretórios.

  12. Você verá um painel semelhante ao usado antes, apenas esse é um ativo diferente. Clique no botão Publicar localizado no centro superior da página.

    Captura de tela da barra de menus superior. O botão Publicar está realçado.

  13. Você será solicitado a definir um Localizador, que é o ponto de entrada, como arquivo/s em seus Ativos. Para seu cenário, defina as seguintes propriedades:

    1. Tipo de localizador>Progressivo.

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

    Observação

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

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

    Captura de tela mostrando as listagens de diretório com o ativo para publicar a caixa de diálogo.

  15. Seu vídeo agora é publicado e pode ser transmitido usando seu ponto de extremidade. Mais abaixo, a página é uma seção Arquivos . É aí que estarão as diferentes versões codificadas do vídeo. Selecione a resolução mais alta possível (na imagem abaixo está o arquivo 1920x960) e, em seguida, um painel à direita será exibido. Lá, você encontrará uma URL de Download. Copie esse ponto de extremidade , pois você o usará posteriormente em seu código.

    Captura de tela da seção microsoft Arquivos do Azure.

    Captura de tela da página de informações do ativo.

    Observação

    Você também pode pressionar o botão Reproduzir para reproduzir o vídeo e testá-lo.

  16. Agora você precisa carregar o segundo vídeo que usará neste Laboratório. Siga as etapas acima, repetindo o mesmo processo para o segundo vídeo. Certifique-se de copiar o segundo ponto de extremidade também. Use o link a seguir para baixar um segundo vídeo.

  17. Depois que ambos os vídeos forem publicados, você estará pronto para passar para o próximo Capítulo.

Capítulo 3 – Configurando o projeto do Unity

Veja a seguir uma configuração típica para desenvolvimento com o Realidade Misturada e, como tal, é um bom modelo para outros projetos.

  1. Abra o Unity e clique em Novo.

    Captura de tela da guia Projetos do Unity. O botão Novo está realçado.

  2. Agora você precisará fornecer um nome de Projeto do Unity, inserir MR_360VideoStreaming.. Verifique se o tipo de projeto está definido como 3D. Defina o Local como um lugar apropriado para você (lembre-se, mais próximo dos diretórios raiz é melhor). Em seguida, clique em Criar projeto.

    Captura de tela da página novos projetos do Unity.

  3. Com o Unity aberto, vale a pena verificar se o Editor de Scripts padrão está definido como Visual Studio. Vá para EditarPreferências e, em seguida, na nova janela, navegue até Ferramentas Externas. Altere o Editor de Script Externo para o Visual Studio 2017. Feche a janela Preferências.

    Captura de tela do menu do editor de script externo. O Visual Studio 2017 está selecionado.

  4. Em seguida, vá para Configurações de Build de Arquivo e alterne a plataforma para Plataforma Universal do Windows clicando no botão Alternar Plataforma.

  5. Certifique-se também de que:

    1. O Dispositivo de Destino é definido como Qualquer Dispositivo.

    2. O Tipo de Build é definido como D3D.

    3. O SDK é definido como Mais recente instalado.

    4. A versão do Visual Studio está definida como Mais recente instalada.

    5. Compilar e Executar é definido como Computador Local.

    6. Não se preocupe com a configuração de Cenas agora, pois você as configurará mais tarde.

    7. As configurações restantes devem ser deixadas como padrão por enquanto.

      Captura de tela da tela de configurações de build do Unity.

  6. Na janela Configurações de Build, clique no botão Configurações do Player , isso abrirá o painel relacionado no espaço em que o Inspetor está localizado.

  7. Neste painel, algumas configurações precisam ser verificadas:

    1. Na guia Outras Configurações :

      1. A versão doruntime de script deve ser estável (equivalente ao .NET 3.5).

      2. O back-end de script deve ser .NET.

      3. O nível de compatibilidade da API deve ser .NET 4.6.

        Captura de tela mostrando a página Configurações para Plataforma Universal do Windows.

    2. Mais abaixo no painel, em Configurações de XR (encontradas abaixo de Configurações de Publicação), marque Realidade Virtual Com suporte, verifique se o SDK do Windows Mixed Reality foi adicionado.

      Captura de tela da tela de configurações do Unity X R.

    3. Na guia Configurações de Publicação, em Recursos, marcar:

      • InternetClient

        Captura de tela da tela Funcionalidades. O Cliente de Internet está marcado.

  8. Depois de fazer essas alterações, feche a janela Configurações de Build .

  9. Salve seu Projeto de Salvamentode Arquivo de Projeto.

Capítulo 4 – Importando o pacote InsideOutSphere Unity

Importante

Se você quiser ignorar o componente De configuração do Unity deste curso e continuar diretamente no código, fique à vontade para baixar esse .unitypackage, importá-lo para seu projeto como um Pacote Personalizado e, em seguida, continuar a partir do Capítulo 5. Você ainda precisará criar um Projeto do Unity.

Para este curso, você precisará baixar um Pacote de Ativos do Unity chamado InsideOutSphere.unitypackage.

Como importar o unitypackage:

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

    Captura de tela do menu de ativos. O menu importar pacote está aberto. O Pacote Personalizado está selecionado.

  2. Use o seletor de arquivos para selecionar o pacote InsideOutSphere.unitypackage e clique em Abrir. Uma lista de componentes desse ativo será exibida para você. Confirme a importação clicando em Importar.

    Captura de tela da tela Importar Pacote do Unity.

  3. Depois de concluir a importação, você observará que três novas pastas, Materiais, Modelos e Pré-fabricados, foram adicionadas à pasta Ativos . Esse tipo de estrutura de pastas é típico para um projeto do Unity.

    Captura de tela da pasta ativos.

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

    2. Na pasta Materiais, você encontrará o material lambert1 do InsideOutSpheres, juntamente com um material chamado ButtonMaterial, que é usado pelo GazeButton, que você verá em breve.

    3. A pasta Prefabs contém o pré-fabricado InsideOutSphere que contém o modeloInsideOutSphere e o GazeButton.

    4. Nenhum código está incluído, você escreverá o código seguindo este curso.

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

    1. Transformar

      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âmera

      1. Limpar Sinalizadores: Cor Sólida.

      2. Planos de recorte: Perto: 0.1, Longe: 6.

        Captura de tela da tela Inspetor.

  5. Navegue até a pasta Prefab e arraste o pré-fabricado InsideOutSphere para o Painel de Hierarquia .

    Captura de tela do menu Pasta pré-fabricado e do ambiente do desenvolvedor.

  6. Expanda o objeto InsideOutSphere dentro da Hierarquia clicando na pequena seta ao lado dele. Você verá um objeto filho abaixo dele chamado GazeButton. Isso será usado para alterar cenas e, portanto, vídeos.

    Captura de tela da guia hierarquia.

  7. Na Janela inspetor, clique no componente Transformação do InsideOutSphere, verifique se as seguintes propriedades estão definidas:

Transformação – Posição

X S Z
0 0 0

Transformação – Rotação

X S Z
0 -50 0

Transformação – Dimensionar

X S Z
0 0 0

Captura de tela da tela Inspetor aberta para o Inside Out Sphere.

  1. Clique no objeto filho GazeButton e defina sua Transformação da seguinte maneira:

Transformação – Posição

X S Z
3,6 1.3 0

Transformação – Rotação

X S Z
0 0 0

Transformação – Dimensionar

X S Z
1 1 1

Captura de tela da guia cena aberta.

Capítulo 5 – Criar a classe VideoController

A classe VideoController hospeda os dois pontos de extremidade de vídeo que serão usados para transmitir o conteúdo do Serviço de Mídia do Azure.

Para criar essa classe:

  1. Clique com o botão direito do mouse na Pasta de Ativos, localizada no Painel do Projeto , e clique em Criar > Pasta. Nomeie a pasta Scripts.

    Captura de tela do menu da pasta de ativos. O menu criar está aberto e a pasta está selecionada.

    Captura de tela da guia projeto. A pasta Ativos está selecionada.

  2. Clique duas vezes na pasta Scripts para abri-la.

  3. Clique com o botão direito do mouse dentro da pasta e clique em Criar > Script C#. Nomeie o script VideoController.

    Captura de tela do arquivo chamado Controlador de Vídeo.

  4. Clique duas vezes no novo script VideoController para abri-lo com o Visual Studio 2017.

    Captura de tela do código do arquivo do Controlador de Vídeo.

  5. Atualize os namespaces na parte superior do arquivo de código da seguinte maneira:

    using System.Collections;
    using UnityEngine;
    using UnityEngine.SceneManagement;
    using UnityEngine.Video;
    
  6. Insira 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. Agora é a hora de inserir os pontos de extremidade dos vídeos do Serviço de Mídia do Azure:

    1. O primeiro na variável video1endpoint .

    2. O segundo na variável video2endpoint .

    Aviso

    Há um problema conhecido com o uso de https no Unity, com a versão 2017.4.1f1. Se os vídeos fornecerem um erro na reprodução, tente usar 'http'.

  8. Em seguida, o método Start() precisa ser editado. Esse método será disparado sempre que o usuário alternar de cena (consequentemente alternando o vídeo) examinando o Botão de Foco.

        // 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á usado para iniciar vídeos perfeitamente (portanto, nenhuma gagueira é vista).

        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 essa classe é o método ChangeScene(), que será usado para alternar entre cenas.

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

    Dica

    O método ChangeScene() usa um recurso C# útil chamado Operador Condicional. Isso permite que as condições sejam verificadas e, em seguida, valores retornados com base no resultado da marcar, tudo dentro de uma única instrução. Siga este link para saber mais sobre o Operador Condicional.

  11. Salve suas alterações no Visual Studio antes de retornar ao Unity.

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

  13. Clique na Câmera Principal e examine o Painel do Inspetor. Você observará que, dentro do componente Script recém-adicionado, há um campo com um valor vazio. Esse é um campo de referência, que tem como destino as variáveis públicas em seu código.

  14. Arraste o objeto InsideOutSphere do Painel de Hierarquia para o slot Sphere , conforme mostrado na imagem abaixo.

    Captura de tela do menu hierarquia. A Câmera Principal está selecionada.Captura de tela do slot do Sphere.

Capítulo 6 – Criar a classe Gaze

Essa classe é responsável por criar um Raycast que será projetado para frente a partir da Câmera Principal, para detectar qual objeto o usuário está examinando. Nesse caso, o Raycast precisará identificar se o usuário está examinando o objeto GazeButton na cena e disparar um comportamento.

Para criar esta Classe:

  1. Vá para a pasta Scripts que você criou anteriormente.

  2. Clique com o botão direito do mouse no Painel de Projeto , CriarScript C#. Nomeie o script como Foco.

  3. Clique duas vezes no novo script De foco para abri-lo com o Visual Studio 2017.

  4. Verifique se o namespace a seguir está na parte superior do script e remova qualquer outro:

    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() agora precisa 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 detectar a ocorrência de destino:

        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. Salve suas alterações no Visual Studio antes de retornar ao Unity.

  9. Clique e arraste a classe Gaze da pasta Scripts para o objeto Câmera Principal no Painel hierarquia .

Capítulo 7 – Configurar as duas Cenas do Unity

A finalidade deste Capítulo é configurar as duas cenas, cada uma hospedando um vídeo para transmitir. Você duplicará a cena que já criou, para que não precise configurá-la novamente, embora edite a nova cena, para que o objeto GazeButton esteja em um local diferente e tenha uma aparência diferente. Isso é para mostrar como alterar entre cenas.

  1. Faça isso acessando Arquivo > Salvar Cena como.... Uma janela salvar será exibida. Clique no botão Nova pasta .

    Capítulo 7 – Configurar as duas Cenas do Unity

  2. Nomeie a pasta Cenas.

  3. A janela Salvar Cena ainda estará aberta. Abra a pasta Cenas recém-criada.

  4. No campo De texto Nome do arquivo: , digite VideoScene1 e pressione Salvar.

  5. De volta ao Unity, abra a pasta Cenas e clique com o botão esquerdo do mouse no arquivo VideoScene1 . Use o teclado e pressione Ctrl + D . Você duplicará essa cena

    Dica

    O comando Duplicar também pode ser executado navegando até Editar > Duplicado.

  6. O Unity incrementará automaticamente o número de nomes de cena, mas marcar-lo de qualquer maneira, para garantir que ele corresponda ao código inserido anteriormente.

    Você deve ter VideoScene1 e VideoScene2.

  7. Com suas duas cenas, vá para Configurações de Build de Arquivo>. Com a janela Configurações de Build aberta, arraste suas cenas para a seção Cenas no Build .

    Captura de tela da janela Configurações de Build.

    Dica

    Você pode selecionar as duas cenas da pasta Cenas mantendo o botão Ctrl pressionado e clicando com o botão esquerdo em cada cena e, por fim, arrastar ambas.

  8. Feche a janela Configurações de Build e clique duas vezes em VideoScene2.

  9. Com a segunda cena aberta, clique no objeto filho GazeButton do InsideOutSphere e defina sua Transformação da seguinte maneira:

Transformação – Posição

X S Z
0 1.3 3,6

Transformação – Rotação

X S Z
0 0 0

Transformação – Dimensionar

X S Z
1 1 1
  1. Com o filho GazeButton ainda selecionado, examine o Inspetor e o Filtro de Malha. Clique no pequeno destino ao lado do campo de referência Malha :

    Captura de tela da tela do inspetor do Botão de Foco.

  2. Uma janela pop-up Selecionar Malha será exibida. Clique duas vezes na malha cubo na lista de Ativos.

    Captura de tela da janela pop-up Selecionar Malha.

  3. O Filtro de Malha será atualizado e agora será um Cubo. Agora, clique no ícone Engrenagem ao lado de Colisor de Esferas e clique em Remover Componente para excluir o colisor desse objeto.

    Captura de tela do menu Colisor do Sphere. A opção Remover componente está selecionada.

  4. Com o GazeButton ainda selecionado, clique no botão Adicionar Componente na parte inferior do Inspetor. No campo de pesquisa, digite box e Box Collider será uma opção – clique nisso, para adicionar um Colisor de Caixa ao objeto GazeButton .

    Captura de tela da caixa de pesquisa Adicionar Componente.

  5. O GazeButton agora é parcialmente atualizado, para parecer diferente, no entanto, agora você criará um novo Material, para que ele pareça completamente diferente e seja mais fácil de reconhecer como um objeto diferente do objeto na primeira cena.

  6. Navegue até sua pasta Materiais , no Painel de Projeto. Duplicar o Material ButtonMaterial (pressione Ctrl + D no teclado ou clique com o botão esquerdo do mouse no Material e, na opção Editar menu de arquivo, selecione Duplicar).

    Captura de tela da pasta Materiais na guia projeto.Captura de tela do menu editar com duplicata selecionada.

  7. Selecione o novo Material ButtonMaterial (aqui chamado ButtonMaterial 1) e, dentro do Inspetor, clique na janela de cores albedo . Um pop-up será exibido, em que você pode selecionar outra cor (escolha o que quiser) e feche o pop-up. O Material será sua própria instância e diferente do original.

    Captura de tela do pop-up de seleção de cores.

  8. Arraste o novo Material para o filho GazeButton , para agora atualizar completamente sua aparência, para que ele seja facilmente distinguido do botão de primeiras cenas.

    Captura de tela da guia de cena do editor de projeto.

  9. Neste ponto, você pode testar o projeto no Editor antes de criar o projeto UWP.

    • Pressione o botão Reproduzir no Editor e use o fone de ouvido.

      Captura de tela mostrando os botões reproduzir, pausar e ignorar. O botão Reproduzir está realçado.

  10. Examine 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 tenha erros, você estará pronto para Compilar.

Para compilar:

  1. Salve a cena atual clicando em Salvar Arquivo>.

  2. Marque a caixa chamada Projetos C# do Unity (isso é importante porque permitirá que você edite as classes após a conclusão do build).

  3. Vá para Configurações de Build de Arquivo >e clique em Compilar.

  4. Você será solicitado a selecionar a pasta na qual deseja criar a Solução.

  5. Crie uma pasta BUILDS e dentro dessa pasta crie outra pasta com um nome apropriado de sua escolha.

  6. Clique em sua nova pasta e, em seguida, clique em Selecionar Pasta, para escolher essa pasta, para iniciar o build nesse local.

    Captura de tela da pasta BUILDS realçada.Captura de tela da pasta Build de Streaming de Vídeo realçada.

  7. Depois que o Unity terminar de compilar (pode levar algum tempo), ele abrirá uma janela Explorador de Arquivos no local do build.

Capítulo 9 – Implantar no computador local

Depois que o build for concluído, uma janela Explorador de Arquivos será exibida no local do build. Abra a Pasta que você nomeou e criou e clique duas vezes no arquivo de solução (.sln) dentro dessa pasta para abrir sua solução com o Visual Studio 2017.

A única coisa a fazer é implantar seu aplicativo em seu computador (ou Computador Local).

Para implantar no Computador Local:

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

  2. Na Plataforma de Solução, selecione x86, Computador Local.

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

    Captura de tela do menu Configuração da Solução.

  4. Agora você precisará restaurar todos os pacotes para sua solução. Clique com o botão direito do mouse em sua solução e clique em Restaurar Pacotes NuGet para solução...

    Observação

    Isso é feito porque os pacotes criados pelo Unity precisam ser direcionados para trabalhar com as referências de computadores locais.

  5. Vá para o menu Compilar e clique em Implantar Solução para fazer sideload do aplicativo no computador. O Visual Studio primeiro criará e implantará seu aplicativo.

  6. Seu aplicativo agora deve aparecer na lista de aplicativos instalados, prontos para serem iniciados.

    Captura de tela da lista de aplicativos instalados.

Ao executar o aplicativo Realidade Misturada, você estará dentro do modelo InsideOutSphere usado em seu aplicativo. Essa esfera será para onde o vídeo será transmitido, fornecendo uma exibição de 360 graus, do vídeo de entrada (que foi filmado para esse tipo de perspectiva). Não se surpreenda se o vídeo levar alguns segundos para ser carregado, seu aplicativo está sujeito à velocidade de Internet disponível, pois o vídeo precisa ser buscado e baixado, portanto, para transmitir para seu aplicativo. Quando estiver pronto, altere as cenas e abra o segundo vídeo, olhando para a esfera vermelha! Em seguida, fique à vontade para voltar, usando o cubo azul na segunda cena!

Seu aplicativo do Serviço de Mídia do Azure concluído

Parabéns, você criou um aplicativo de realidade misturada que aproveita o Serviço de Mídia do Azure para transmitir 360 vídeos.

Captura de tela de um aplicativo de realidade misturada de exemplo.

Captura de tela de um exemplo de aplicativo de realidade misturada.

Exercícios de Bônus

Exercício 1

É totalmente possível usar apenas uma única cena para alterar vídeos neste tutorial. Experimente seu aplicativo e transforme-o em uma única cena! Talvez até adicione outro vídeo à mistura.

Exercício 2

Experimente o Azure e o Unity e tente implementar a capacidade do aplicativo de selecionar automaticamente um vídeo com um tamanho de arquivo diferente, dependendo da força de uma conexão com a Internet.