Introducción a WebView2 en HoloLens 2 aplicaciones de Unity (versión preliminar)

Artículo
02/05/2025

Este tutorial está destinado a desarrolladores que usan WebView2 en aplicaciones envolventes HoloLens 2 Unity.

Este artículo consiste en aprender a escribir su propio código WebView2. Si quiere ejecutar primero un ejemplo, consulte el artículo Aplicación de ejemplo Win32 u otra aplicación de ejemplo.

Importante

WebView2 en Hololens 2 sigue estando disponible. Sin embargo, se ha interrumpido la compatibilidad con WebView2 en Hololens 2; no hay correcciones de errores planeadas ni actualizaciones de contenido, y el soporte técnico ha finalizado. No se garantiza que las aplicaciones que usan WebView2 en Hololens 2 sigan funcionando.

WebView2 en HoloLens 2 y el complemento WebView para Unity están en versión preliminar y están sujetos a cambios antes de la disponibilidad general.

WebView2 solo funciona en dispositivos HoloLens 2 que ejecutan la actualización de Windows 11. Para obtener más información, vea Actualizar HoloLens 2.

Para las aplicaciones 2D habilitadas para WebView2 en HoloLens 2, consulta Introducción a WebView2 en aplicaciones WinUI 2 (UWP).

En este tutorial:

Configure las herramientas de desarrollo para crear HoloLens 2 aplicaciones de Unity que usen WebView2 para mostrar contenido web.
Instale Mixed Reality Toolkit mediante la herramienta de características de Mixed Reality.
Cree un proyecto inicial de Unity para el desarrollo HoloLens 2.
Agregue el complemento WebView de Microsoft Mixed Reality para Unity mediante la herramienta de características de Mixed Reality.
Configure un objeto prefabricado de WebView que muestre el contenido de la página web en la aplicación de HoloLens 2.
Obtenga información sobre los conceptos e interacciones de WebView2 en Unity.

Proyecto completado

Hay disponible una versión completa de este proyecto de Introducción en el repositorio WebView2Samples. Puede usar el proyecto completado (desde el repositorio o siguiendo los pasos siguientes) como línea base para agregar más funcionalidad de WebView2 y otras características a la aplicación de HoloLens 2 Unity.

Hay disponible una versión completa de este proyecto de tutorial en el repositorio WebView2Samples :

Nombre de ejemplo: HoloLens2_GettingStarted
Directorio del repositorio: HoloLens2_GettingStarted
Carpeta del proyecto de Unity: HoloLens2GetStartedApp

Siga las secciones principales del paso en secuencia, a continuación.

Acerca de HoloLens 2, Unity, Mixed Reality Feature Tool, Mixed Reality Toolkit y el complemento WebView

Al combinar HoloLens 2, Unity, Mixed Reality Toolkit y el complemento WebView para Unity, puede crear experiencias inmersivas de realidad mixta que integren sin problemas contenido web.

HoloLens 2

HoloLens 2 es un dispositivo holográfico innovador y sin ataduras, que ofrece una experiencia de realidad mixta envolvente y manos libres. HoloLens 2 superpone sin problemas la información digital en el mundo real, representando hologramas de alta definición que permanecen en su lugar y responden de forma natural a la interacción.

Puede usar el motor de juegos de Unity y Visual Studio para crear el proyecto de HoloLens 2.

Unidad

Unity, un motor de juegos versátil, es una opción popular para crear aplicaciones 3D, incluidas experiencias de realidad mixta para dispositivos HoloLens 2, debido a sus amplias características y funcionalidades sólidas para realidad aumentada (AR), realidad virtual (VR) y realidad mixta (MR).

Herramienta de características de Mixed Reality (MRFT)

La herramienta de características de Mixed Reality (MRFT) es una nueva manera de que los desarrolladores detecten, actualicen y agreguen paquetes de características de realidad mixta a proyectos de Unity. Puede buscar paquetes por nombre o categoría, ver sus dependencias e incluso ver los cambios propuestos en el archivo de manifiesto de los proyectos antes de la importación. Un archivo de manifiesto es un archivo JSON que define todos los paquetes del proyecto. Una vez que haya validado los paquetes que se incluirán, la herramienta de características de Mixed Reality los descargará automáticamente en el proyecto de Unity seleccionado. En esta guía se usará MRFT para instalar el kit de herramientas de Mixed Reality y el complemento WebView de Microsoft Mixed Reality para Unity.

kit de herramientas de Mixed Reality (MRTK)

El kit de herramientas de Mixed Reality (MRTK) es un proyecto de código abierto basado en Microsoft que acelera el desarrollo de aplicaciones de realidad mixta en Unity proporcionando componentes y características esenciales para desarrollar experiencias de realidad mixta. MRTK proporciona una colección de scripts, componentes y prefabs diseñados específicamente para ayudarle a crear experiencias de realidad mixta intuitivas y eficaces en dispositivos HoloLens 2.

Complemento WebView de Microsoft Mixed Reality para Unity

El complemento Microsoft Mixed Reality WebView para Unity permite la integración de la funcionalidad WebView2 en la aplicación de HoloLens 2. Este complemento WebView para Unity simplifica la integración de la funcionalidad WebView2 en la aplicación de HoloLens 2 ajustando el control WebView2, controlando automáticamente la representación y dirigiendo automáticamente la entrada al control WebView2.

Este complemento también administra la interoperabilidad entre Unity y WebView2, lo que permite la comunicación entre JavaScript y Unity a través de mensajes y eventos.

En Unity, el complemento WebView de Microsoft Mixed Reality para Unity se puede instalar mediante la herramienta de características de Mixed Reality.

Paso 1: Instalación de Visual Studio

En este tutorial se supone que tiene Unity 2021.3 LTS o posterior y Visual Studio 2019, versión 16.9 o posterior instalada. No se admite Visual Studio 2017. En este paso comenzaremos configurando el entorno de Visual Studio para el desarrollo de HoloLens 2, siga la guía de instalación de herramientas de Mixed Reality. En este artículo se le guía por la instalación y configuración de las herramientas necesarias, como Visual Studio y la carga de trabajo de desarrollo de Plataforma universal de Windows.

Configure también el entorno de desarrollo para WebView2 siguiendo los pasos descritos en Configuración del entorno de desarrollo para WebView2.

Una vez que haya completado la instalación, vuelva a esta página y continúe con los pasos siguientes para instalar Unity.

Paso 2: Instalación de Unity para el desarrollo de HoloLens 2

Antes de empezar a desarrollar una aplicación de HoloLens 2 con WebView2, deberá instalar Unity. Siga los pasos descritos en Elección de una versión de Unity y un complemento XR para completar la instalación del conjunto de herramientas necesario para compilar aplicaciones de realidad mixta.

Paso 3: Configuración del proyecto de Unity para el desarrollo de Mixed Reality

Una vez instaladas las herramientas, estará listo para crear y configurar el proyecto. La manera más fácil de empezar a trabajar con el desarrollo de HoloLens 2 es usar Mixed Reality Toolkit en el proyecto.

La Mixed Reality Feature Tool simplifica el proceso de detección, instalación y administración de características de realidad mixta, incluidos el kit de herramientas de Mixed Reality y los paquetes para el proyecto de Unity. Para obtener más instrucciones sobre cómo instalar la herramienta de características de Mixed Reality, consulte Bienvenido a la herramienta de características de Mixed Reality.

En primer lugar, descargue la herramienta de características Mixed Reality del Centro de descarga de Microsoft.
Ejecute el ejecutable descargado Mixed Reality Feature Tool y siga las indicaciones para instalar el kit de herramientas de Mixed Reality y los paquetes adicionales necesarios para el desarrollo de HoloLens 2.

La herramienta de características Mixed Reality permite seleccionar e instalar las versiones adecuadas del kit de herramientas de Mixed Reality, junto con otras características de realidad mixta, directamente en el proyecto de Unity.

Una vez que haya usado la herramienta de características de Mixed Reality para instalar el kit de herramientas de Mixed Reality, los recursos y los objetos prefabricados del kit de herramientas aparecerán en el proyecto de Unity. El kit de herramientas de Mixed Reality le guiará a través de la configuración del complemento Open XR para el proyecto.

Para ver un tutorial detallado paso a paso sobre cómo configurar el proyecto de Unity, consulte Configuración de un nuevo proyecto de OpenXR con MRTK.

Paso 4: Instalación del complemento WebView para Unity mediante la herramienta de características de Mixed Reality

En este paso, como se ha indicado anteriormente, usará la herramienta de características de Mixed Reality para instalar el complemento Microsoft Mixed Reality WebView para Unity. Esto instalará la versión específica del paquete NuGet WebView2 compatible con HoloLens 2.

Inicie la herramienta de características Mixed Reality (que instaló anteriormente). Se abre la página Inicio de la herramienta de características de Mixed Reality para Unity, que contiene opciones para configurar la configuración y ver la documentación:
Haga clic en el botón de engranaje. Se abre el panel Configuración .
Haga clic en la pestaña Característica y, a continuación, asegúrese de que la casilla Mostrar versiones preliminares esté seleccionada:
Haga clic en el botón Aceptar para volver a la página de inicio.
Haga clic en el botón Inicio para empezar a detectar paquetes de características.
Apunte la herramienta de características de Mixed Reality al proyecto de Unity. Para ello, haga clic en el botón Examinar para la carpeta del proyecto (...) situado a la derecha del campo Ruta de acceso del proyecto:
En el cuadro de diálogo de selección de archivos, seleccione la carpeta del proyecto de Unity y haga clic en el botón Abrir .
En el cuadro de diálogo Seleccionar proyecto , haga clic en el botón Detectar características .
En la página Detectar características, expanda la sección Otras características y, a continuación, active la casilla Microsoft Mixed Reality WebView:

Esto marca el complemento WebView para Unity para la instalación. En la lista desplegable Versión , de forma predeterminada, se selecciona la versión más reciente del complemento.
Haga clic en el botón Obtener características . De este modo, se descargan los paquetes necesarios.
Una vez descargados los paquetes, haga clic en el botón Importar :
En la página Revisar y aprobar , inspeccione las modificaciones que se realizarán en el archivo del proyecto manifest.json e inspeccione la lista de archivos (como .tgz paquetes) que se copiarán en el proyecto:
Haga clic en el botón Aprobar para finalizar los cambios.
En el proyecto de Unity, en la carpeta Activos del proyecto, inspeccione el objeto prefabricado WebView.

El complemento WebView de Microsoft Mixed Reality para Unity ya está instalado e importado. Continúe con el siguiente paso a continuación.

Para obtener más información, vea Bienvenido a la herramienta de características de Mixed Reality.

Paso 5: Configuración del objeto prefabricado de WebView en la escena de Unity

Ahora que el complemento WebView para Unity está instalado e importado, configure el objeto prefabricado de WebView en la escena de Unity, como se indica a continuación:

En la Editor de Unity, vaya a la ventana Proyecto y, a continuación, busque el objeto prefabricado WebView. Para ello, vaya a Paquetes>microsoft Mixed Reality WebView (versión preliminar)>Prefaben tiempo de ejecución>.
Arrastre el objeto prefabricado WebView a la escena.
Con el objeto prefabricado WebView seleccionado en la ventana Jerarquía , muévalo a una ubicación inicial adecuada dentro de la escena (por ejemplo, en el MixedRealitySceneContent nodo), asegurándose de que está en la vista de la cámara predeterminada.
En la ventana Inspector , puede cambiar la dirección URL inicial que carga el objeto prefabricado de WebView. Para ello, busque el cuadro de texto Dirección URL actual y escriba la dirección URL deseada. De forma predeterminada, el objeto prefab carga https://www.microsoft.com:

Paso 6: Prueba del proyecto

Ahora que ha agregado el complemento WebView a la escena, es un buen momento para probar el proyecto.

Para probar el proyecto directamente en el editor de Unity, haga clic en el botón Reproducir :
Para probar el proyecto en el dispositivo real, siga los pasos descritos en Compilación e implementación en HoloLens.

A continuación, continúe con los pasos siguientes.

Paso 7: Ampliación de la funcionalidad WebView2

Aunque el objeto prefab expone solo una sola propiedad, hay funcionalidad adicional expuesta en el WebView script. Echemos un vistazo a la exposición de algunas de estas funciones en nuestro proyecto. En primer lugar, inspeccione el WebView script para obtener una idea de lo que está disponible.

Sugerencia

Para ver el contenido de un script en el editor de código predeterminado, haga doble clic en el nombre del script en la ventana Inspector .

Ahora que ha revisado el WebView código, ampliaremos la funcionalidad del ejemplo. En el resto de este paso, agregaremos algunas funciones básicas para que el usuario tenga un botón Atrás , un botón Ir y un campo de texto para navegar a una dirección URL personalizada.

Agregar el campo de entrada y los botones

Modifique la jerarquía de la escena de la siguiente manera:
1. En MixedRealitySceneContent, agregue un nuevo componente de entrada (haga clic con el botón derecho en > Campo de entrada de la interfaz> de usuario- TextMeshPro). Esto agrega automáticamente un elemento primario Canvas para el componente.
2. En el nuevo Canvas, agregue dos nuevos Button componentes (haga clic con el botón derecho en > Botón de interfaz> de usuario- TextMeshPro).
3. Reordene el WebView componente para convertirlo en un elemento secundario del Canvas componente:
Actualice las propiedades de Canvas seleccionando canvas en el panel Jerarquía y, a continuación, realizando los siguientes cambios en el panel Inspector :
1. Cambie Width y Height a 600, 400 respectivamente.
2. Cambie Escala de X, Y y Z a 0,001, 0,001, 0,001:
Actualice las propiedades del campo de entrada seleccionándolo en el panel Jerarquía y, a continuación, realizando los siguientes cambios en el panel Inspector :
1. Cambie el nombre a "AddressField (TMP)"
2. Cambie Pos X, Pos Y, Pos Z a -2, 178, -5, respectivamente.
3. Cambie Width (Ancho ) y Height (Alto ) a 390 y 30 respectivamente:
Para actualizar las propiedades del primer botón, selecciónelo en el panel Jerarquía y, a continuación, realice los siguientes cambios en el panel Inspector :
1. Cambie el nombre a "Botón Atrás"
2. Cambie Pos X, Pos Y, Pos Z a -248, 178, -5, respectivamente.
3. Cambie Ancho y Alto a 75, 30 respectivamente:
Actualice las propiedades del segundo botón seleccionándolo en el panel Jerarquía y, a continuación, realizando los siguientes cambios en el panel Inspector :
1. Cambie el nombre a "Go Button" (Botón Go)
2. Cambie Pos X, Pos Y, Pos Z a 242, 178, -5, respectivamente.
3. Cambie Ancho y Alto a 75, 30 respectivamente:
Para actualizar las propiedades de WebView, selecciónelas en el panel Jerarquía y, a continuación, realice los siguientes cambios en el panel Inspector :
1. Cambie la posición>X, Y, Z a 0, -16 y -5, respectivamente.
2. Cambie Escala>X, Y, Z a 570, 340 y 1 respectivamente:
Agregue una imagen de fondo al lienzo:
1. Seleccione el lienzo en el panel Jerarquía .
2. Haga clic en el botón Agregar componente en la parte inferior del panel Inspector .
3. Escriba Imagen y, a continuación, seleccione el resultado superior en la lista.
4. Haga clic en el cuadro Color de la imagen y, a continuación, elija un color de fondo. En nuestro ejemplo, elegimos un color gris. (Esto es simplemente para mostrar cierto contraste entre los distintos controles del lienzo).
En el panel Jerarquía , en Botón Atrás, seleccione Texto (TMP).. A continuación, en el panel Inspector , cambie la entrada de texto a Atrás:
Repita el proceso anterior para el botón Go y sustituya Go como texto.

Ahora debería tener una escena similar a la siguiente:

Agregar código para enlazar los botones

Ahora que tenemos nuestra interfaz de usuario diseñada, ahora crearemos el código para enlazar los botones. Para ello, crearemos un nuevo script que derive de Microsoft.MixedReality.WebView.

En la ventana Inspector de WebView, haga clic en Agregar componente, seleccione Nuevo script, escriba WebViewBrowsery, a continuación, haga clic en Crear y agregar. El nuevo componente se agrega a la ventana Inspector .
En la ventana Inspector , haga doble clic en el WebViewBrowser script para editarlo.

Reemplace el contenido de ese archivo por el código siguiente:

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 la interfaz de usuario GameObjects al WebViewBrowser código que acabamos de escribir:
1. Seleccione WebViewBrowser.
2. Arrastre el botón Atrás desde el panel Jerarquía hasta el campo Variable Botón atrás del explorador WebView en el inspector.
3. Arrastre Go Button (Botón Go ) desde el panel Hierarchy (Jerarquía) hasta el campo Go Button variable (Go Button variable) del explorador WebView en el inspector:
Ahora puede probar la escena en el Editor de Unity. Con todo conectado en la escena, debe ser capaz de comprobar que todo funciona según lo esperado. Pruebe a probar la escena escribiendo una nueva dirección URL en el AddressField cuadro de texto (debe ser una dirección URL completa, incluido el protocolo) y, a continuación, presione el botón Ir . Asegúrese de que el botón Atrás también funciona.

A veces puede resultar útil depurar la aplicación que se ejecuta en HoloLens y los pasos para hacerlo son ligeramente diferentes de la depuración estándar en Visual Studio. Para obtener más información sobre cómo configurar y conectarse a la aplicación que se ejecuta en HoloLens o dentro del editor de Unity, consulte Depuración administrada con Unity.

Vea también:

Referencia de api de WebView2
Referencia de API para Mixed Reality complemento WebView: para HoloLens 2 en el complemento WebView2 Unity.

Continúe con los pasos siguientes.

Paso 8: Información sobre eventos e interacciones de WebView2 en Unity

El complemento WebView de Microsoft Mixed Reality para Unity proporciona eventos para trabajar con la vista web.

Un evento importante es IWithPostMessage.MessageReceived, que se genera cuando se envía un mensaje desde la vista web a la aplicación de Unity. El MessageReceived evento se define en la Microsoft.MixedReality.WebView.IWithPostMessage interfaz.

IWithPostMessage también define el PostMessage() método , que se puede usar para enviar un mensaje desde la aplicación de Unity a la vista web.

Este es un ejemplo de cómo usar estos eventos y métodos para trabajar con la vista web:

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);
    }
}

Vea también

Introducción a WebView2 en aplicaciones winUI 2 (UWP)
Referencia de api de WebView2
Referencia de API para Mixed Reality complemento WebView: para HoloLens 2 en el complemento WebView2 Unity.

Compartir vía