Introdução ao WebView2 no HoloLens 2 aplicativos Unity (Visualização)

Este tutorial é para desenvolvedores que usam o WebView2 em aplicativos imersivos do HoloLens 2 Unity.

Este artigo é para aprender a escrever seu próprio código WebView2. Se você quiser executar um exemplo primeiro, consulte o aplicativo de exemplo Win32 ou outro artigo de aplicativo de exemplo.

Importante

O WebView2 no Hololens 2 continua disponível. No entanto, o suporte para WebView2 no Hololens 2 foi descontinuado; Não há correções de bugs ou atualizações de conteúdo planejadas, e o suporte técnico terminou. Não há garantia de que os aplicativos que usam o WebView2 no Hololens 2 continuarão funcionando.

O WebView2 no HoloLens 2 e o plug-in WebView para Unity estão em versão prévia e sujeitos a alterações antes da disponibilidade geral.

O WebView2 só funciona em dispositivos HoloLens 2 que executam a atualização do Windows 11. Para obter mais informações, consulte Atualizar o HoloLens 2.

Para aplicativos 2D habilitados para WebView2 no HoloLens 2, consulte Introdução ao WebView2 em aplicativos WinUI 2 (UWP).

Neste tutorial, você:

Configure suas ferramentas de desenvolvimento para criar aplicativos do HoloLens 2 Unity que usam o WebView2 para exibir conteúdo da Web.
Instale o Kit de Ferramentas de Realidade Misturada, usando a Ferramenta do Recurso de Realidade Misturada.
Crie um projeto inicial do Unity para o desenvolvimento do HoloLens 2.
Adicione o plug-in Microsoft Realidade Misturada WebView para Unity usando a Ferramenta de Recursos Realidade Misturada.
Configure um pré-fabricado WebView que exiba o conteúdo da página da Web no aplicativo HoloLens 2.
Saiba mais sobre os conceitos e as interações do WebView2 no Unity.

Projeto concluído

Uma versão completa deste projeto de Introdução está disponível no repositório WebView2Samples. Você pode usar o projeto concluído (do repositório ou seguindo as etapas abaixo) como uma linha de base para adicionar mais funcionalidades do WebView2 e outros recursos ao seu aplicativo Unity do HoloLens 2.

Uma versão completa deste projeto de tutorial está disponível no repositório WebView2Samples :

Nome da amostra: HoloLens2_GettingStarted
Diretório de repositório: HoloLens2_GettingStarted
Pasta do projeto do Unity: HoloLens2GetStartedApp

Siga as principais seções da Etapa na sequência, abaixo.

Sobre o HoloLens 2, o Unity, a Ferramenta de Recurso de Realidade Misturada, o Kit de Ferramentas de Realidade Misturada e o plug-in WebView

Combinando o HoloLens 2, o Unity, o Kit de Ferramentas de Realidade Misturada e o plug-in WebView para Unity, você pode criar experiências imersivas de realidade mista que integram perfeitamente o conteúdo da Web.

HoloLens 2

O HoloLens 2 é um dispositivo holográfico inovador e sem fio, que oferece uma experiência de realidade mista imersiva e com as mãos livres. O HoloLens 2 sobrepõe perfeitamente informações digitais ao mundo real, renderizando hologramas de alta definição que permanecem no lugar e respondem naturalmente à interação.

Você pode usar o mecanismo de jogo do Unity e o Visual Studio para criar seu projeto do HoloLens 2.

Unidade

O Unity, um mecanismo de jogo versátil, é uma escolha popular para a criação de aplicativos 3D, incluindo experiências de realidade mista para dispositivos HoloLens 2, devido aos seus recursos abrangentes e robustos para realidade aumentada (AR), realidade virtual (VR) e realidade mista (MR).

Ferramenta de Recursos de Realidade Misturada (MRFT)

A MRFT (Ferramenta de Recursos de Realidade Misturada) é uma nova maneira para os desenvolvedores descobrirem, atualizarem e adicionarem pacotes de recursos de realidade mista em projetos do Unity. Você pode pesquisar pacotes por nome ou categoria, ver suas dependências e até mesmo visualizar as alterações propostas no arquivo de manifesto de seus projetos antes de importar. Um arquivo de manifesto é um arquivo JSON que define todos os pacotes do seu projeto. Depois de validar os pacotes a serem incluídos, a ferramenta Recurso de Realidade Misturada os baixará automaticamente no projeto Unity selecionado. Este guia usará o MRFT para instalar o Kit de Ferramentas de Realidade Misturada e o plug-in do Microsoft Realidade Misturada WebView para Unity.

Kit de Ferramentas de Realidade Misturada (MRTK)

O Kit de Ferramentas de Realidade Misturada (MRTK) é um projeto de código aberto orientado pela Microsoft que acelera o desenvolvimento de aplicativos de realidade mista no Unity, fornecendo componentes e recursos essenciais para o desenvolvimento de experiências de realidade misturada. O MRTK fornece uma coleção de scripts, componentes e pré-fabricados projetados especificamente para ajudá-lo a criar experiências de realidade mista intuitivas e de alto desempenho em dispositivos HoloLens 2.

O plug-in do Microsoft Realidade Misturada WebView para Unity

O plug-in do Microsoft Realidade Misturada WebView para Unity permite a integração da funcionalidade do WebView2 no aplicativo HoloLens 2. Este plug-in WebView para Unity simplifica a integração da funcionalidade WebView2 em seu aplicativo HoloLens 2 encapsulando o controle WebView2, manipulando automaticamente a renderização e direcionando automaticamente a entrada para o controle WebView2.

Esse plug-in também gerencia a interoperabilidade entre o Unity e o WebView2, permitindo a comunicação entre o JavaScript e o Unity por meio de mensagens e eventos.

No Unity, o plug-in do Microsoft Realidade Misturada WebView para Unity pode ser instalado usando a Ferramenta do Recurso de Realidade Misturada.

Etapa 1 – Instalar o Visual Studio

Este tutorial pressupõe que você tenha o Unity 2021.3 LTS ou posterior e o Visual Studio 2019 versão 16.9 ou posterior instalados. Não há suporte para o Visual Studio 2017. Nesta etapa, começaremos configurando seu ambiente do Visual Studio para o desenvolvimento do HoloLens 2, seguindo o guia de instalação das ferramentas de Realidade Misturada. Esse artigo orienta você na instalação e configuração das ferramentas necessárias, incluindo o Visual Studio e a carga de trabalho de desenvolvimento da Plataforma Universal do Windows.

Configure também seu ambiente de desenvolvimento para WebView2, seguindo as etapas em Configurar seu ambiente de Desenvolvimento para WebView2.

Depois de concluir a configuração, retorne a esta página e continue com as próximas etapas para instalar o Unity.

Etapa 2 - Instalar o Unity para desenvolvimento do HoloLens 2

Antes de começar a desenvolver um aplicativo do HoloLens 2 com o WebView2, você precisará instalar o Unity. Siga as etapas em Escolher uma versão do Unity e um plug-in de XR para concluir a instalação do conjunto de ferramentas necessário para criar aplicativos de realidade mista.

Etapa 3 - Configurar o projeto do Unity para desenvolvimento de Realidade Misturada

Depois de instalar suas ferramentas, você estará pronto para criar e configurar seu projeto. A maneira mais fácil de começar a desenvolver o HoloLens 2 é usar o Kit de Ferramentas de Realidade Misturada em seu projeto.

A Ferramenta de Recursos de Realidade Misturada simplifica o processo de descoberta, instalação e gerenciamento de recursos de realidade misturada, incluindo o Kit de Ferramentas de Realidade Misturada e pacotes para seu projeto Unity. Para obter mais orientações sobre como instalar a Ferramenta do Recurso de Realidade Misturada, consulte Bem-vindo à Ferramenta do Recurso de Realidade Misturada.

Primeiro, baixe a Ferramenta do Recurso de Realidade Misturada no Centro de Download da Microsoft.
Execute o executável baixado da Ferramenta de Recursos de Realidade Misturada e siga as instruções para instalar o Kit de Ferramentas de Realidade Misturada e quaisquer pacotes adicionais necessários para o desenvolvimento do HoloLens 2.

A Ferramenta do Recurso de Realidade Misturada permite que você selecione e instale as versões apropriadas do Kit de Ferramentas de Realidade Misturada, juntamente com outros recursos de realidade misturada, diretamente em seu projeto do Unity.

Depois de usar a Ferramenta de Recurso de Realidade Misturada para instalar o Kit de Ferramentas de Realidade Misturada, os ativos e pré-fabricados do kit de ferramentas aparecerão em seu projeto do Unity. O Kit de Ferramentas de Realidade Misturada orientará você na configuração do plug-in Open XR para seu projeto.

Para obter um passo a passo detalhado sobre como configurar o projeto do Unity, consulte Configurar um novo projeto OpenXR com MRTK.

Etapa 4 – Instalar o plug-in do WebView para Unity usando a Ferramenta do Recurso de Realidade Misturada

Nesta etapa, como acima, você usará a Ferramenta do Recurso de Realidade Misturada para instalar o plug-in do Microsoft Realidade Misturada WebView para Unity. Isso instalará a versão específica do pacote NuGet WebView2 que é compatível com o HoloLens 2.

Inicie a Ferramenta do Recurso de Realidade Misturada (que você instalou acima). A página inicial da Ferramenta do Recurso de Realidade Misturada para Unity é aberta, contendo opções para definir as configurações e exibir a documentação:
Clique no botão de engrenagem. O painel Configurações é aberto.
Clique na guia Recurso e verifique se a caixa de seleção Mostrar versões prévias está marcada:
Clique no botão Ok para retornar à página inicial.
Clique no botão Iniciar para começar a descobrir pacotes de recursos.
Aponte a Ferramenta do Recurso de Realidade Misturada para seu projeto do Unity. Para fazer isso, clique no botão Procurar a pasta do projeto (...) à direita do campo Caminho do Projeto :
Na caixa de diálogo de seleção de arquivo, selecione a pasta do projeto do Unity e clique no botão Abrir .
Na caixa de diálogo Selecionar projeto , clique no botão Descobrir recursos .
Na página Descobrir Recursos, expanda a seção Outros recursos e marque a caixa de seleção Microsoft Realidade Misturada WebView:

Isso marca o plug-in WebView para Unity para instalação. Na lista suspensa Versão , por padrão, a versão mais recente do plug-in é selecionada.
Clique no botão Obter Recursos . Isso baixa os pacotes necessários.
Depois de baixar os pacotes, clique no botão Importar :
Na página Revisar e Aprovar , inspecione as modificações que serão feitas no arquivo de projeto manifest.json e inspecione a lista de arquivos (como .tgz pacotes) que serão copiados para o projeto:
Clique no botão Aprovar para finalizar as alterações.
Em seu projeto do Unity, na pasta Ativos do projeto, inspecione o pré-fabricado WebView.

O plug-in do Microsoft Realidade Misturada WebView para Unity agora está instalado e importado. Continue com a próxima etapa abaixo.

Para obter mais informações, consulte Bem-vindo à Ferramenta do Recurso de Realidade Misturada.

Etapa 5 - Configurar o pré-fabricado WebView na cena do Unity

Agora que o plug-in do WebView para Unity foi instalado e importado, configure o pré-fabricado do WebView na cena do Unity, da seguinte maneira:

No Editor do Unity, navegue até a janela Projeto e localize o pré-fabricado WebView acessando Pacotes> MicrosoftRealidade Misturada WebView (Versão prévia)>Runtime>Prefab.
Arraste o pré-fabricado WebView para a cena.
Com o pré-fabricado WebView selecionado na janela Hierarquia , mova-o para um local inicial adequado dentro da cena (como sob o MixedRealitySceneContent nó), verificando se ele está à vista da câmera padrão.
Na janela Inspetor , você pode alterar a URL inicial carregada pelo pré-fabricado WebView. Para fazer isso, localize a caixa de texto URL atual e insira a URL desejada. Por padrão, o pré-fabricado carrega https://www.microsoft.com:

Etapa 6 - Testar o projeto

Agora que você adicionou o plug-in WebView à cena, é um bom momento para testar seu projeto.

Para testar o projeto diretamente no editor do Unity, clique no botão Reproduzir :
Para testar o projeto no dispositivo real, siga as etapas em Compilar e implantar no HoloLens.

Em seguida, continue com as próximas etapas abaixo.

Etapa 7 - Estendendo a funcionalidade do WebView2

Embora o pré-fabricado exponha apenas uma única propriedade, há funcionalidades adicionais expostas no WebView script. Vamos dar uma olhada na exposição de algumas dessas funcionalidades em nosso projeto. Primeiro, inspecione o WebView script para ter uma ideia do que está disponível.

Dica

Para exibir o conteúdo de um script no editor de código padrão, clique duas vezes no nome do script na janela Inspetor .

Agora que você examinou o WebView código, vamos estender a funcionalidade do exemplo. No restante desta etapa, adicionaremos algumas funcionalidades básicas para que o usuário tenha um botão Voltar , um botão Ir e um campo de texto para navegar até uma URL personalizada.

Adicionar o campo de entrada e os botões

Modifique a hierarquia da cena da seguinte maneira:
1. Em MixedRealitySceneContent, adicione um novo componente de entrada (clique com o botão direito do mouse > no Campo de Entrada da Interface do Usuário>– TextMeshPro). Isso adiciona automaticamente um pai Canvas para o componente.
2. No novo Canvas, adicione dois novos Button componentes (clique com o botão direito do mouse >no botão da interface do usuário>- TextMeshPro).
3. Reordene o WebView componente para torná-lo um filho do Canvas componente:
Atualize as propriedades do Canvas selecionando o Canvas no painel Hierarquia e fazendo as seguintes alterações no painel Inspetor :
1. Altere a largura e a altura para 600, 400, respectivamente.
2. Altere a escala para X, Y e Z para 0,001, 0,001, 0,001:
Atualize as propriedades do campo de entrada selecionando-o no painel Hierarquia e, em seguida, fazendo as seguintes alterações no painel Inspetor:
1. Altere o nome para "AddressField (TMP)"
2. Altere Pos X, Pos Y, Pos Z para -2, 178, -5, respectivamente.
3. Altere a Largura e a Altura para 390, 30 respectivamente:
Atualize as propriedades do primeiro botão selecionando-o no painel Hierarquia e fazendo as seguintes alterações no painel Inspetor:
1. Altere o nome para "Botão voltar"
2. Altere Pos X, Pos Y, Pos Z para -248, 178, -5, respectivamente.
3. Altere a Largura e a Altura para 75, 30 respectivamente:
Atualize as propriedades do segundo botão selecionando-o no painel Hierarquia e fazendo as seguintes alterações no painel Inspetor:
1. Altere o nome para "Botão Ir"
2. Altere Pos X, Pos Y, Pos Z para 242, 178, -5, respectivamente.
3. Altere a Largura e a Altura para 75, 30 respectivamente:
Atualize as propriedades do WebView selecionando-o no painel Hierarquia e, em seguida, fazendo as seguintes alterações no painel Inspetor:
1. Altere a posição>X, Y, Z para 0, -16, -5, respectivamente.
2. Altere a escala>X, Y, Z para 570, 340, 1, respectivamente:
Adicione uma imagem de plano de fundo à tela:
1. Selecione a Tela no painel Hierarquia .
2. Clique no botão Adicionar Componente na parte inferior do painel Inspetor .
3. Digite Image e selecione o resultado superior na lista.
4. Clique no seletor de cores da imagem e escolha uma cor de tela de fundo. Em nosso exemplo, escolhemos uma cor cinza. (Isso é simplesmente para mostrar algum contraste entre os diferentes controles na tela.)
No painel Hierarquia, no botão Voltar, selecione Texto (TMP). Em seguida, no painel Inspetor , altere a Entrada de Texto para Voltar:
Repita o processo acima para o botão ir, substituindo Ir como texto.

Agora você deve ter uma cena semelhante à seguinte:

Adicionar código para conectar os botões

Agora que projetamos nossa interface do usuário, criaremos o código para conectar os botões. Para fazer isso, criaremos um novo script que deriva de Microsoft.MixedReality.WebView.

Na janela Inspetor para WebView, clique em Adicionar componente, selecione Novo script, digite WebViewBrowser e clique em Criar e adicionar. O novo componente é adicionado à janela Inspetor .
Na janela Inspetor , clique duas vezes no WebViewBrowser script para editá-lo.

Substitua o conteúdo desse arquivo pelo seguinte código:

using Microsoft.MixedReality.WebView;
using UnityEngine.UI;
using UnityEngine;
using TMPro;
using System;

public class WebViewBrowser : MonoBehaviour
{
   // Declare UI elements: Back button, Go button, and URL input field
   public Button BackButton;
   public Button GoButton;
   public TMP_InputField URLField;

   private void Start()
   {
      // Get the WebView component attached to the game object
      var webViewComponent = gameObject.GetComponent<WebView>();
      webViewComponent.GetWebViewWhenReady((IWebView webView) =>
      {
            // If the WebView supports browser history, enable the Back button
            if (webView is IWithBrowserHistory history)
            {
               // Add an event listener for the Back button to navigate back in history
               BackButton.onClick.AddListener(() => history.GoBack());

               // Update the Back button's enabled state based on whether there's any history to go back to
               history.CanGoBackUpdated += CanGoBack;
            }

            // Add an event listener for the Go button to load the URL that was entered in the input field
            GoButton.onClick.AddListener(() => webView.Load(new Uri(URLField.text)));

            // Subscribe to the Navigated event to update the URL input field whenever a navigation occurs
            webView.Navigated += OnNavigated;

            // Set the initial value of the URL input field to the current URL of the WebView
            if (webView.Page != null)
            {
               URLField.text = webView.Page.AbsoluteUri;
            }
      });
   }

   // Update the URL input field with the new path after navigation
   private void OnNavigated(string path)
   {
      URLField.text = path;
   }

   // Enable or disable the Back button based on whether there's any history to go back to
   private void CanGoBack(bool value)
   {
      BackButton.enabled = value;
   }
}

Conecte a interface do usuário GameObjects ao código que acabamos de WebViewBrowser escrever:
1. Selecione o WebViewBrowser.
2. Arraste o botão Voltar do painel Hierarquia para o campo variável Botão Voltar do navegador WebView no Inspetor.
3. Arraste o Botão Ir do painel Hierarquia para o campo variável Botão Ir do navegador WebView no Inspetor:
Agora você pode testar a cena no Editor do Unity. Com tudo conectado em sua cena, você poderá verificar se tudo está funcionando conforme o esperado. Tente testar a cena inserindo uma nova URL na caixa de texto (deve ser uma URL completa, AddressField incluindo o protocolo) e pressionando o botão Ir . Verifique se o botão Voltar também funciona.

Às vezes, pode ser útil depurar o aplicativo em execução no HoloLens, e as etapas para fazer isso são ligeiramente diferentes da depuração padrão no Visual Studio. Para obter mais informações sobre como configurar e se conectar ao seu aplicativo em execução no HoloLens ou dentro do editor do Unity, consulte Depuração gerenciada com o Unity.

Veja também:

Referência da API WebView2
Referência de API para plug-in WebView de Realidade Misturada - para HoloLens 2 no plug-in Unity WebView2.

Continue com as próximas etapas abaixo.

Etapa 8 - Saiba mais sobre eventos e interações do WebView2 no Unity

O plug-in do Microsoft Realidade Misturada WebView para Unity fornece eventos para trabalhar com o WebView.

Um evento importante é IWithPostMessage.MessageReceived, que é gerado quando uma mensagem é enviada do webview para o aplicativo Unity. O MessageReceived evento é definido na Microsoft.MixedReality.WebView.IWithPostMessage interface.

IWithPostMessage também define o PostMessage() método que pode ser usado para enviar uma mensagem do aplicativo Unity para o WebView.

Aqui está um exemplo de como usar esses eventos e métodos para trabalhar com o WebView:

using Microsoft.MixedReality.WebView;

public class WebViewExample : MonoBehaviour, IWithPostMessage
{
    private void Start()
    {
        var webViewComponent = gameObject.GetComponent<WebView>();

        if (Url != string.Empty)
        {
            Debug.Log("Loading URL: " + Url);
            webViewComponent.Load(new Uri(Url));
        }

        webViewComponent.GetWebViewWhenReady((IWebView webView) =>
        {
            // Add event listeners for WebView2 events
            ((IWithPostMessage)webView).MessageReceived += OnMessageReceived;
        });
    }

    // Handler for WebView2 OnPostMessage event
    void OnMessageReceived(string message)
    {
        Debug.Log("WebView2 message received: " + message);
    }
}

Confira também

Introdução ao WebView2 em aplicativos WinUI 2 (UWP)
Referência da API WebView2
Referência de API para plug-in WebView de Realidade Misturada - para HoloLens 2 no plug-in Unity WebView2.

Comentários

Esta página foi útil?

Last updated on 2026-08-24