Formación
Módulo
Este curso proporciona al usuario nociones básicas de todos los elementos fundamentales de MRTK.
Este explorador xa non é compatible.
Actualice a Microsoft Edge para dispoñer das funcionalidades máis recentes, as actualizacións de seguranza e a asistencia técnica.
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:
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 :
Siga las secciones principales del paso en secuencia, a continuación.
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 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.
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).
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.
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.
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.
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.
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.
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.
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.
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
:
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.
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.
Suxestión
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.
Modifique la jerarquía de la escena de la siguiente manera:
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.Canvas
, agregue dos nuevos Button
componentes (haga clic con el botón derecho en > Botón de interfaz> de usuario- TextMeshPro).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 :
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 :
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 :
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 :
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 :
Agregue una imagen de fondo al 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:
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:
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:
Continúe con los pasos siguientes.
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);
}
}
Formación
Módulo
Este curso proporciona al usuario nociones básicas de todos los elementos fundamentales de MRTK.