Introdução ao WebView2 nas aplicações do Unity HoloLens 2 (Pré-visualização)

Este tutorial destina-se a programadores que utilizam o WebView2 em aplicações avançadas HoloLens 2 Unity.

Este artigo é para aprender a escrever o seu próprio código WebView2. Se quiser executar primeiro um exemplo, veja o artigo Win32 sample app or another sample app (Aplicação de exemplo Win32 ou outra aplicação de exemplo).

Importante

O WebView2 no Hololens 2 continua disponível. No entanto, o suporte para o WebView2 no Hololens 2 foi descontinuado; não existem correções de erros planeadas ou atualizações de conteúdo e o suporte técnico terminou. As aplicações que utilizam o WebView2 no Hololens 2 não têm a garantia de continuar a funcionar.

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

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

Para aplicações 2D ativadas para WebView2 no HoloLens 2, consulte Introdução ao WebView2 em aplicações WinUI 2 (UWP).

Neste tutorial, irá:

Configure as suas ferramentas de desenvolvimento para criar HoloLens 2 aplicações do Unity que utilizam o WebView2 para apresentar conteúdo Web.
Instale o Realidade Misturada Toolkit com a Ferramenta de Funcionalidades do Realidade Misturada.
Crie um projeto inicial do Unity para HoloLens 2 desenvolvimento.
Adicione o plug-in WebView do Microsoft Realidade Misturada para o Unity com a Ferramenta de Funcionalidades do Realidade Misturada.
Configure uma pré-visualização do WebView que apresenta conteúdo de página Web na sua aplicação HoloLens 2.
Saiba mais sobre os conceitos e interações do WebView2 no Unity.

Projeto concluído

Uma versão concluída deste projeto Introdução está disponível no repositório WebView2Samples. Pode utilizar o projeto concluído (a partir do repositório ou a partir dos passos abaixo) como uma linha de base para adicionar mais funcionalidades webView2 e outras funcionalidades à sua aplicação do HoloLens 2 Unity.

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

Nome do exemplo: HoloLens2_GettingStarted
Diretório de repositório: HoloLens2_GettingStarted
Pasta do projeto unity: HoloLens2GetStartedApp

Siga as secções passo principais em sequência, abaixo.

Acerca do HoloLens 2, Unity, Ferramenta de Funcionalidades Realidade Misturada, Realidade Misturada Toolkit e do plug-in WebView

Ao combinar HoloLens 2, o Unity, o Realidade Misturada Toolkit e o plug-in WebView para o Unity, pode criar experiências envolventes de realidade mista que integram conteúdos Web de forma totalmente integrada.

HoloLens 2

HoloLens 2 é um dispositivo holográfico inovador e sem limites, oferecendo uma experiência de realidade mista mãos livres e envolvente. HoloLens 2 sobrepõe facilmente informações digitais ao mundo real, compor hologramas de alta definição que se mantêm no local e respondem naturalmente à interação.

Pode utilizar o motor de jogo do Unity e o Visual Studio para criar o seu projeto de HoloLens 2.

Unity

O Unity, um motor de jogo versátil, é uma escolha popular para criar aplicações 3D, incluindo experiências de realidade mista para dispositivos HoloLens 2, devido às suas funcionalidades extensas e capacidades robustas para a realidade aumentada (AR), realidade virtual (VR) e realidade mista (MR).

Ferramenta de Funcionalidades do Realidade Misturada (MRFT)

A Ferramenta de Funcionalidades Realidade Misturada (MRFT) é uma nova forma de os programadores descobrirem, atualizarem e adicionarem pacotes de funcionalidades de realidade mista a projetos do Unity. Pode procurar pacotes por nome ou categoria, ver as respetivas dependências e até ver as alterações propostas ao ficheiro de manifesto de projetos antes de importar. Um ficheiro de manifesto é um ficheiro JSON que define todos os pacotes do projeto. Depois de validar os pacotes a serem incluídos, a ferramenta funcionalidade Realidade Misturada irá transferi-los automaticamente para o projeto do Unity selecionado. Este guia irá utilizar o MRFT para instalar o Realidade Misturada Toolkit e o plug-in Microsoft Realidade Misturada WebView para o Unity.

Realidade Misturada Toolkit (MRTK)

O Realidade Misturada Toolkit (MRTK) é um projeto open source orientado pela Microsoft que acelera o desenvolvimento de aplicações de realidade mista no Unity ao fornecer componentes e funcionalidades essenciais para desenvolver experiências de realidade mista. O MRTK fornece uma coleção de scripts, componentes e pré-fabricados especificamente concebidos para o ajudar a criar experiências de realidade mista intuitivas e eficazes em dispositivos HoloLens 2.

O plug-in Do Microsoft Realidade Misturada WebView para o Unity

O plug-in do Microsoft Realidade Misturada WebView para o Unity permite a integração da funcionalidade WebView2 na sua aplicação HoloLens 2. Este plug-in WebView para o Unity simplifica a integração da funcionalidade WebView2 na sua aplicação HoloLens 2 ao encapsular o controlo WebView2, processar automaticamente a composição e direcionar automaticamente a entrada para o controlo WebView2.

Este plug-in também gere o interop entre o Unity e o WebView2, permitindo a comunicação entre o JavaScript e o Unity através de mensagens e eventos.

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

Passo 1 – Instalar o Visual Studio

Este tutorial pressupõe que tem o Unity 2021.3 LTS ou posterior e o Visual Studio 2019 versão 16.9 ou posterior instalado. O Visual Studio 2017 não é suportado. Neste passo, vamos começar por configurar o ambiente do Visual Studio para desenvolvimento HoloLens 2, siga o guia de instalação Realidade Misturada ferramentas. Este artigo orienta-o ao longo da instalação e configuração das ferramentas necessárias, incluindo o Visual Studio e a carga de trabalho de desenvolvimento Plataforma Universal do Windows.

Configure também o ambiente de desenvolvimento para o WebView2 ao seguir os passos em Configurar o ambiente Dev para WebView2.

Depois de concluir a configuração, regresse a esta página e continue com os passos seguintes para instalar o Unity.

Passo 2 – Instalar o Unity para desenvolvimento HoloLens 2

Antes de poder começar a desenvolver uma aplicação HoloLens 2 com o WebView2, terá de instalar o Unity. Siga os passos em Escolher uma versão do Unity e o plug-in XR para concluir a instalação do conjunto de ferramentas necessário para criar aplicações de realidade mista.

Passo 3 – Configurar o projeto do Unity para Realidade Misturada desenvolvimento

Assim que tiver as suas ferramentas instaladas, estará pronto para criar e configurar o seu projeto. A forma mais fácil de começar a utilizar HoloLens 2 desenvolvimento é utilizar o Realidade Misturada Toolkit no seu projeto.

A Ferramenta de Funcionalidades Realidade Misturada simplifica o processo de deteção, instalação e gestão de funcionalidades de realidade mista, incluindo o Realidade Misturada Toolkit e pacotes para o seu projeto do Unity. Para obter mais orientações sobre como instalar a Ferramenta de Funcionalidades do Realidade Misturada, consulte Bem-vindo à Ferramenta de Funcionalidades do Realidade Misturada.

Primeiro, transfira a Ferramenta de Funcionalidades do Realidade Misturada a partir do Centro de Transferências da Microsoft.
Execute o executável Realidade Misturada Ferramenta de Funcionalidades transferido e siga as instruções para instalar o Realidade Misturada Toolkit e quaisquer pacotes necessários adicionais para HoloLens 2 desenvolvimento.

A Ferramenta de Funcionalidades Realidade Misturada permite-lhe selecionar e instalar as versões adequadas do Realidade Misturada Toolkit, juntamente com outras funcionalidades de realidade mista, diretamente no seu projeto do Unity.

Depois de utilizar a Ferramenta de Funcionalidades do Realidade Misturada para instalar o Realidade Misturada Toolkit, os recursos e pré-fabricados do toolkit serão apresentados no seu projeto do Unity. O Realidade Misturada Toolkit irá orientá-lo ao longo da configuração do plug-in Open XR para o seu projeto.

Para obter instruções passo a passo detalhadas sobre como configurar o projeto do Unity, veja Configurar um novo projeto OpenXR com o MRTK.

Passo 4 – Instalar o plug-in webView para o Unity com a Ferramenta de Funcionalidades do Realidade Misturada

Neste passo, tal como acima, irá utilizar a Ferramenta de Funcionalidades do Realidade Misturada para instalar o plug-in Microsoft Realidade Misturada WebView para o Unity. Esta ação irá instalar a versão específica do pacote NuGet WebView2 compatível com HoloLens 2.

Inicie a Ferramenta de Funcionalidades do Realidade Misturada (que instalou acima). É aberta a página Início da Ferramenta de Funcionalidades do Realidade Misturada para o Unity, que contém opções para configurar as definições e para ver a documentação:
Clique no botão de engrenagem. O painel Definições é aberto.
Clique no separador Funcionalidade e, em seguida, certifique-se de que a caixa de verificação Mostrar versões de pré-visualização está selecionada:
Clique no botão Ok para regressar à página inicial.
Clique no botão Iniciar para começar a detetar pacotes de funcionalidades.
Aponte a Ferramenta de Funcionalidades do Realidade Misturada para o seu projeto do Unity. Para tal, clique no botão Procurar a pasta do projeto (...) à direita do campo Caminho do Projeto :
Na caixa de diálogo de seleção de ficheiros, selecione a pasta do projeto do Unity e, em seguida, clique no botão Abrir .
Na caixa de diálogo Selecionar projeto , clique no botão Descobrir Funcionalidades .
Na página Descobrir Funcionalidades, expanda a secção Outras funcionalidades e, em seguida, selecione a caixa de verificação Microsoft Realidade Misturada WebView:

Esta ação marca o plug-in WebView para o Unity para instalação. Na lista pendente Versão , por predefinição, está selecionada a versão mais recente do plug-in.
Clique no botão Obter Funcionalidades . Esta ação transfere os pacotes necessários.
Assim que os pacotes forem transferidos, clique no botão Importar :
Na página Rever e Aprovar , inspecione as modificações que serão efetuadas ao ficheiro de projeto manifest.json e inspecione a lista de ficheiros (como .tgz pacotes) que serão copiados para o projeto:
Clique no botão Aprovar para finalizar as alterações.
No seu projeto do Unity, na pasta Ativos do seu projeto, inspecione a pré-visualização do WebView.

O plug-in do Microsoft Realidade Misturada WebView para o Unity está agora instalado e importado. Continue com o passo seguinte abaixo.

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

Passo 5 – Configurar a pré-visualização do WebView na cena do Unity

Agora que o plug-in webView para o Unity está instalado e importado, configure a pré-visualização do WebView na cena do Unity, da seguinte forma:

No Editor do Unity, navegue para a janela Projeto e, em seguida, localize a pré-visualização do WebView ao aceder a Pacotes>Microsoft Realidade Misturada WebView (Pré-visualização)Pré-visualização> do Runtime>.
Arraste a pré-visualização do WebView para a sua cena.
Com a pré-visualização do WebView selecionada na janela Hierarquia , mova-a para uma localização inicial adequada dentro da cena (por exemplo, sob o MixedRealitySceneContent nó), certificando-se de que está na vista da câmara predefinida.
Na janela Inspetor , pode alterar o URL inicial carregado pela pré-visualização do WebView. Para tal, localize a caixa de texto URL atual e, em seguida, introduza o URL pretendido. Por predefinição, a pré-criação carrega https://www.microsoft.com:

Passo 6 – Testar o projeto

Agora que adicionou o plug-in webView à cena, é uma boa altura para testar o seu projeto.

Para testar o projeto diretamente no editor do Unity, clique no botão Reproduzir :
Para testar o projeto no dispositivo real, siga os passos em Compilar e implementar no HoloLens.

Em seguida, continue com os passos seguintes abaixo.

Passo 7 – Expandir a funcionalidade WebView2

Embora a pré-base exponha apenas uma única propriedade, existe uma funcionalidade adicional exposta no WebView script. Vamos analisar a exposição de algumas destas funcionalidades no nosso projeto. Primeiro, inspecione o WebView script para ter uma ideia do que está disponível.

Dica

Para ver o conteúdo de um script no editor de código predefinido, faça duplo clique no nome do script na janela Inspetor .

Agora que reviu o WebView código, vamos expandir a funcionalidade do exemplo. No resto deste passo, vamos adicionar algumas funcionalidades básicas para que o utilizador tenha um botão Anterior , um botão Ir e um campo de texto para navegar para um URL personalizado.

Adicionar o campo de entrada e os botões

Modifique a hierarquia de cenários da seguinte forma:
1. Em MixedRealitySceneContent, adicione um novo componente de entrada (clique com o botão direito do rato em > Campo de Entrada da IU>– TextMeshPro). Esta ação adiciona automaticamente um elemento principal Canvas para o componente.
2. No novo Canvas, adicione dois novos Button componentes (clique com o botão direito do rato em > Botão da IU>– TextMeshPro).
3. Reordene o WebView componente para torná-lo subordinado do Canvas componente:
Atualize as propriedades da Tela ao selecionar a Tela no painel Hierarquia e, em seguida, efetue as seguintes alterações no painel Inspetor :
1. Altere Largura e Altura para 600, 400, respetivamente.
2. Altere Dimensionamento para X, Y e Z para 0,001, 0,001, 0,001:
Atualize as propriedades do campo de entrada ao selecioná-lo no painel Hierarquia e, em seguida, efetue as seguintes alterações no painel Inspetor :
1. Alterar Nome para "AddressField (TMP)"
2. Altere Pos X, Pos Y, Pos Z para -2, 178, -5, respetivamente.
3. Altere Largura e Altura para 390, 30, respetivamente:
Atualize as propriedades do primeiro botão ao selecioná-lo no painel Hierarquia e, em seguida, efetue as seguintes alterações no painel Inspetor :
1. Alterar o Nome para "Botão Anterior"
2. Altere Pos X, Pos Y, Pos Z para -248, 178, -5, respetivamente.
3. Altere Largura e Altura para 75, 30, respetivamente:
Atualize as propriedades do segundo botão ao selecioná-lo no painel Hierarquia e, em seguida, efetue as seguintes alterações no painel Inspetor :
1. Alterar o Nome para "Botão Ir"
2. Altere Pos X, Pos Y, Pos Z para 242, 178, -5, respetivamente.
3. Altere Largura e Altura para 75, 30, respetivamente:
Atualize as propriedades do WebView ao selecioná-las no painel Hierarquia e, em seguida, efetue as seguintes alterações no painel Inspetor :
1. Altere a Posição>X, Y, Z para 0, -16, -5, respetivamente.
2. Altere a Escala>X, Y, Z para 570, 340, 1, respetivamente:
Adicione uma imagem de fundo à Tela:
1. Selecione a Tela no painel Hierarquia .
2. Clique no botão Adicionar Componente na parte inferior do painel Inspetor .
3. Escreva Imagem e, em seguida, selecione o resultado superior na lista.
4. Clique no painel Cor da imagem e, em seguida, selecione uma cor de fundo. No nosso exemplo, escolhemos uma cor cinzenta. (Isto é simplesmente para mostrar algum contraste entre os diferentes controlos na tela.)
No painel Hierarquia , em Botão Anterior, selecione Texto (TMP). Em seguida, no painel Inspetor , altere a Entrada de Texto para Anterior:
Repita o processo acima para o Botão Ir, substituindo Go como o texto.

Deverá agora ter uma cena semelhante à seguinte:

Adicionar código para ligar os botões

Agora que criámos a nossa IU, vamos agora criar o código para ligar os botões. Para tal, vamos criar um novo script que deriva de Microsoft.MixedReality.WebView.

Na janela Inspetor para WebView, clique em Adicionar Componente, selecione Novo script, escreva WebViewBrowser e, em seguida, clique em Criar e adicionar. O novo componente é adicionado à janela Inspetor .
Na janela Inspetor , faça duplo clique no WebViewBrowser script para editar o script.

Substitua o conteúdo desse ficheiro 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;
   }
}

Ligue a IU GameObjects ao WebViewBrowser código que acabámos de escrever:
1. Selecione o WebViewBrowser.
2. Arraste o Botão Anterior do painel Hierarquia para o campo de variável Botão Anterior do Browser WebView no Inspetor.
3. Arraste o Botão Ir do painel Hierarquia para o campo de variável Botão Ir para o Browser WebView no Inspetor:
Agora, pode testar a cena no Editor do Unity. Com tudo ligado à sua cena, deverá conseguir verificar se está tudo a funcionar conforme esperado. Experimente testar a cena ao introduzir um novo URL na AddressField caixa de texto (tem de ser um URL completo, incluindo o protocolo) e, em seguida, premir o botão Ir . Certifique-se de que o botão Anterior também funciona.

Por vezes, pode ser útil depurar a aplicação em execução no HoloLens e os passos para tal são ligeiramente diferentes da depuração padrão no Visual Studio. Para obter mais informações sobre como configurar e ligar à sua aplicação em execução no HoloLens ou no editor do Unity, veja Depuração gerida com o Unity.

Veja também:

Referência da API webView2
Referência da API para Realidade Misturada plug-in WebView – para HoloLens 2 no plug-in Do Unity webView2.

Continue com os passos seguintes abaixo.

Passo 8 – Saiba mais sobre eventos e interações webView2 no Unity

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

Um evento importante é IWithPostMessage.MessageReceived, que é gerado quando uma mensagem é enviada da webview para a aplicação Unity. O MessageReceived evento é definido na Microsoft.MixedReality.WebView.IWithPostMessage interface.

IWithPostMessage também define o PostMessage() método , que pode ser utilizado para enviar uma mensagem da aplicação Unity para a webview.

Eis um exemplo de como utilizar estes eventos e métodos para trabalhar com a 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 aplicações WinUI 2 (UWP)
Referência da API webView2
Referência da API para Realidade Misturada plug-in WebView – para HoloLens 2 no plug-in Do Unity webView2.

Feedback

Esta página foi útil?

Last updated on 2025-02-05