Erste Schritte mit WebView2 in HoloLens 2 Unity-Apps (Vorschau)

Artikel
08/10/2023

Dieses Tutorial richtet sich an Entwickler, die WebView2 in immersiven HoloLens 2 Unity-Anwendungen verwenden.

WebView2 auf HoloLens 2 und das WebView-Plug-In für Unity befinden sich beide in der Vorschau und können vor der allgemeinen Verfügbarkeit geändert werden.

WebView2 wird nur auf HoloLens 2 Geräten unterstützt, auf denen das Windows 11 Update ausgeführt wird. Weitere Informationen finden Sie unter Update HoloLens 2.

Informationen zu WebView2-fähigen 2D-Anwendungen auf HoloLens 2 finden Sie unter Erste Schritte mit WebView2 in WinUI 2 (UWP)-Apps.

In diesem Tutorial führen Sie Folgendes aus:

Richten Sie Ihre Entwicklungstools zum Erstellen HoloLens 2 Unity-Apps ein, die WebView2 zum Anzeigen von Webinhalten verwenden.
Installieren Sie das Mixed Reality Toolkit mithilfe des Mixed Reality Feature-Tools.
Erstellen Sie ein erstes Unity-Projekt für HoloLens 2 Entwicklung.
Fügen Sie das Microsoft Mixed Reality WebView-Plug-In für Unity hinzu, indem Sie das Mixed Reality Feature Tool verwenden.
Konfigurieren Sie ein WebView-Prefab, das Webseiteninhalte in Ihrer HoloLens 2-App anzeigt.
Erfahren Sie mehr über WebView2-Konzepte und -Interaktionen in Unity.

Abgeschlossenes Projekt

Eine vollständige Version dieses Erste Schritte Projekts ist im WebView2Samples-Repository verfügbar. Sie können das abgeschlossene Projekt (aus dem Repository oder aus den folgenden Schritten) als Baseline verwenden, um Ihrer HoloLens 2 Unity-App weitere WebView2-Funktionen und andere Features hinzuzufügen.

Eine vollständige Version dieses Tutorialprojekts ist im WebView2Samples-Repository verfügbar:

Beispielname: HoloLens2_GettingStarted
Repositoryverzeichnis: HoloLens2_GettingStarted
Unity-Projektordner: HoloLens2GetStartedApp

Folgen Sie den hauptschrittenen Abschnitten nacheinander weiter unten.

Informationen zu HoloLens 2, Unity, Mixed Reality Feature Tool, Mixed Reality Toolkit und dem WebView-Plug-In

Durch die Kombination von HoloLens 2, Unity, dem Mixed Reality Toolkit und dem WebView-Plug-In für Unity können Sie immersive Mixed Reality-Umgebungen erstellen, die Webinhalte nahtlos integrieren.

HoloLens 2

HoloLens 2 ist ein bahnbrechendes, nicht angebundenes holografisches Gerät, das eine freihändige und immersive Mixed Reality-Erfahrung bietet. HoloLens 2 überlagert digitale Informationen nahtlos in der realen Welt und rendert Hochauflösende Hologramme, die an Ort und Stelle bleiben und auf natürliche Interaktion reagieren.

Sie können die Unity-Spiele-Engine und Visual Studio verwenden, um Ihr HoloLens 2-Projekt zu erstellen.

Einheit

Unity, eine vielseitige Spiele-Engine, ist eine beliebte Wahl zum Erstellen von 3D-Anwendungen, einschließlich Mixed Reality-Umgebungen für HoloLens 2-Geräte, aufgrund seiner umfangreichen Features und robusten Funktionen für Augmented Reality (AR), Virtual Reality (VR) und Mixed Reality (MR).

Mixed Reality Feature Tool (MRFT)

Das Mixed Reality Feature Tool (MRFT) ist eine neue Möglichkeit für Entwickler, Mixed Reality-Featurepakete zu ermitteln, zu aktualisieren und in Unity-Projekten hinzuzufügen. Sie können Pakete nach Namen oder Kategorie durchsuchen, ihre Abhängigkeiten anzeigen und sogar vorgeschlagene Änderungen an Ihrer Projektmanifestdatei vor dem Importieren anzeigen. Eine Manifestdatei ist eine JSON-Datei, die alle Pakete Ihres Projekts definiert. Nachdem Sie die Enthaltenen Pakete überprüft haben, lädt das Mixed Reality Featuretool sie automatisch in Ihr ausgewähltes Unity-Projekt herunter. In diesem Leitfaden wird mrft verwendet, um das Mixed Reality Toolkit und das Microsoft Mixed Reality WebView-Plug-In für Unity zu installieren.

Mixed Reality Toolkit (MRTK)

Das Mixed Reality Toolkit (MRTK) ist ein von Microsoft gesteuertes Open-Source-Projekt, das die Entwicklung von Mixed Reality-Anwendungen in Unity beschleunigt, indem wesentliche Komponenten und Features für die Entwicklung von Mixed Reality-Umgebungen bereitgestellt werden. Das MRTK bietet eine Sammlung von Skripts, Komponenten und Prefabs, die Speziell entwickelt wurden, um Ihnen bei der Erstellung leistungsstarker und intuitiver Mixed Reality-Umgebungen auf HoloLens 2 Geräten zu helfen.

Das Microsoft Mixed Reality WebView-Plug-In für Unity

Das Microsoft Mixed Reality WebView-Plug-In für Unity ermöglicht die Integration von WebView2-Funktionen in Ihre HoloLens 2-App. Dieses WebView-Plug-In für Unity vereinfacht die Integration von WebView2-Funktionen in Ihre HoloLens 2-App, indem das WebView2-Steuerelement umschlossen, das Rendering automatisch verarbeitet und Eingaben automatisch an das WebView2-Steuerelement geleitet werden.

Dieses Plug-In verwaltet auch die Interop zwischen Unity und WebView2 und ermöglicht die Kommunikation zwischen JavaScript und Unity über Nachrichten und Ereignisse.

In Unity kann das Microsoft Mixed Reality WebView-Plug-In für Unity mithilfe des Mixed Reality Feature-Tools installiert werden.

Schritt 1: Installieren von Visual Studio

In diesem Tutorial wird davon ausgegangen, dass Unity 2021.3 LTS oder höher und Visual Studio 2019 Version 16.9 oder höher installiert sind. Visual Studio 2017 wird nicht unterstützt. In diesem Schritt richten wir Zunächst Ihre Visual Studio-Umgebung für HoloLens 2 Entwicklung ein. Befolgen Sie dazu die Anleitung zur Installation von Mixed Reality Tools. Dieser Artikel führt Sie durch die Installation und Konfiguration der erforderlichen Tools, einschließlich Visual Studio und der Workload Universelle Windows-Plattform Entwicklung.

Richten Sie außerdem Ihre Entwicklungsumgebung für WebView2 ein, indem Sie die Schritte unter Einrichten Ihrer Entwicklungsumgebung für WebView2 ausführen.

Kehren Sie nach Abschluss des Setups zu dieser Seite zurück, und fahren Sie mit den nächsten Schritten fort, um Unity zu installieren.

Schritt 2: Installieren von Unity für HoloLens 2 Entwicklung

Bevor Sie mit der Entwicklung einer HoloLens 2-App mit WebView2 beginnen können, müssen Sie Unity installieren. Führen Sie die Schritte unter Auswählen einer Unity-Version und eines XR-Plug-Ins aus, um die Installation des Toolsets abzuschließen, das zum Erstellen von Mixed Reality-Anwendungen erforderlich ist.

Schritt 3: Konfigurieren des Unity-Projekts für Mixed Reality Entwicklung

Sobald Sie Ihre Tools installiert haben, können Sie Ihr Projekt erstellen und konfigurieren. Die einfachste Möglichkeit, mit HoloLens 2 Entwicklung zu beginnen, ist die Verwendung des Mixed Reality Toolkits in Ihrem Projekt.

Das Mixed Reality-Featuretool vereinfacht das Ermitteln, Installieren und Verwalten von Mixed Reality-Features, einschließlich des Mixed Reality Toolkits und der Pakete für Ihr Unity-Projekt. Weitere Anleitungen zum Installieren des Mixed Reality-Featuretools finden Sie unter Willkommen beim Mixed Reality FeatureTool.

Laden Sie zunächst das Mixed Reality Featuretool aus dem Microsoft Download Center herunter.
Führen Sie die heruntergeladene ausführbare Mixed Reality FeatureTool-Datei aus, und folgen Sie den Anweisungen, um das Mixed Reality Toolkit und alle zusätzlichen erforderlichen Pakete für HoloLens 2 Entwicklung zu installieren.

Mit dem Mixed Reality Featuretool können Sie die entsprechenden Versionen des Mixed Reality Toolkits zusammen mit anderen Mixed Reality-Features direkt in Ihrem Unity-Projekt auswählen und installieren.

Nachdem Sie das Mixed Reality FeatureTool zum Installieren des Mixed Reality Toolkits verwendet haben, werden die Ressourcen und Prefabs des Toolkits in Ihrem Unity-Projekt angezeigt. Das Mixed Reality Toolkit führt Sie durch die Konfiguration des Open XR-Plug-Ins für Ihr Projekt.

Eine ausführliche schritt-für-Schritt-Vorgehensweise zum Konfigurieren des Unity-Projekts finden Sie unter Einrichten eines neuen OpenXR-Projekts mit MRTK.

Schritt 4: Installieren des WebView-Plug-Ins für Unity mithilfe des Mixed Reality Feature-Tools

In diesem Schritt verwenden Sie wie oben das Mixed Reality Featuretool, um das Microsoft Mixed Reality WebView-Plug-In für Unity zu installieren. Dadurch wird die spezifische Version des WebView2 NuGet-Pakets installiert, die mit HoloLens 2 kompatibel ist.

Starten Sie das Mixed Reality FeatureTool (das Sie oben installiert haben). Die Startseite des Mixed Reality-Featuretools für Unity wird geöffnet und enthält Optionen zum Konfigurieren von Einstellungen und zum Anzeigen der Dokumentation:
Klicken Sie auf die Zahnradtaste. Der Bereich Einstellungen wird geöffnet.
Klicken Sie auf die Registerkarte Feature , und stellen Sie sicher, dass das Kontrollkästchen Vorschauversionen anzeigen aktiviert ist:
Klicken Sie auf die Schaltfläche OK , um zur Startseite zurückzukehren.
Klicken Sie auf die Schaltfläche Start , um mit der Ermittlung von Featurepaketen zu beginnen.
Verweisen Sie das Mixed Reality Featuretool auf Ihr Unity-Projekt. Klicken Sie dazu rechts neben dem Feld Projektpfad auf die Schaltfläche Nach Projektordner (...) suchen:
Wählen Sie im Dialogfeld für die Dateiauswahl Ihren Unity-Projektordner aus, und klicken Sie dann auf die Schaltfläche Öffnen .
Klicken Sie im Dialogfeld Projekt auswählen auf die Schaltfläche Features entdecken .
Erweitern Sie auf der Seite Features entdecken den Abschnitt Andere Features, und aktivieren Sie dann das Kontrollkästchen Microsoft Mixed Reality WebView:

Dadurch wird das WebView-Plug-In für Unity für die Installation markiert. In der Dropdownliste Version ist standardmäßig die neueste Version des Plug-Ins ausgewählt.
Klicken Sie auf die Schaltfläche Features abrufen . Dadurch werden die erforderlichen Pakete heruntergeladen.
Klicken Sie nach dem Herunterladen der Pakete auf die Schaltfläche Importieren :
Überprüfen Sie auf der Seite Überprüfen und genehmigen die Änderungen, die an Ihrer Projektdatei manifest.json vorgenommen werden, und überprüfen Sie die Liste der Dateien (z .tgz . B. Pakete), die in Ihr Projekt kopiert werden:
Klicken Sie auf die Schaltfläche Genehmigen , um die Änderungen abzuschließen.
Überprüfen Sie in Ihrem Unity-Projekt im Ordner Assets Ihres Projekts das WebView-Prefab.

Das Microsoft Mixed Reality WebView-Plug-In für Unity ist jetzt installiert und importiert. Fahren Sie mit dem nächsten Schritt unten fort.

Weitere Informationen finden Sie unter Willkommen beim Mixed Reality-Featuretool.

Schritt 5: Einrichten des WebView-Prefabs in Unity-Szene

Nachdem das WebView-Plug-In für Unity installiert und importiert wurde, richten Sie das WebView-Prefab in Ihrer Unity-Szene wie folgt ein:

Navigieren Sie im Unity-Editor zum Fenster Projekt, und suchen Sie dann das WebView-Prefab, indem Sie zu Pakete>Microsoft Mixed Reality WebView (Vorschau)>RuntimePrefab> wechseln.
Ziehen Sie das WebView-Prefab in Ihre Szene.
Wenn das WebView-Prefab im Hierarchiefenster ausgewählt ist, verschieben Sie es an eine geeignete Startposition innerhalb der Szene (z. B. unter dem MixedRealitySceneContent Knoten), und stellen Sie sicher, dass es sich in der Ansicht der Standardkamera befindet.
Im Inspektorfenster können Sie die anfängliche URL ändern, die vom WebView-Prefab geladen wird. Suchen Sie hierzu das Textfeld Aktuelle URL , und geben Sie dann die gewünschte URL ein. Standardmäßig lädt https://www.microsoft.comdas Prefab :

Schritt 6: Testen des Projekts

Nachdem Sie das WebView-Plug-In der Szene hinzugefügt haben, ist es ein guter Zeitpunkt, Ihr Projekt zu testen.

Um das Projekt direkt im Unity-Editor zu testen, klicken Sie auf die Schaltfläche Wiedergeben :
Führen Sie zum Testen des Projekts auf dem tatsächlichen Gerät die Schritte unter Erstellen und Bereitstellen auf der HoloLens aus.

Fahren Sie dann mit den folgenden Schritten fort.

Schritt 7: Erweitern der WebView2-Funktionalität

Obwohl das Prefab nur eine einzelne Eigenschaft verfügbar macht, gibt es zusätzliche Funktionen, die für das WebView Skript verfügbar gemacht werden. Sehen wir uns an, wie einige dieser Funktionen in unserem Projekt verfügbar sind. Überprüfen Sie zunächst das WebView Skript, um eine Vorstellung davon zu erhalten, was verfügbar ist.

Tipp

Um den Inhalt eines Skripts im Standardcode-Editor anzuzeigen, doppelklicken Sie im Inspektorfenster auf den Namen des Skripts.

Nachdem Sie den WebView Code überprüft haben, erweitern wir nun die Funktionalität des Beispiels. Im weiteren Verlauf dieses Schritts fügen wir einige grundlegende Funktionen hinzu, sodass der Benutzer über die Schaltfläche Zurück , die Schaltfläche "Gehe zu" und ein Textfeld verfügt, um zu einer benutzerdefinierten URL zu navigieren.

Hinzufügen des Eingabefelds und der Schaltflächen

Ändern Sie die Szenenhierarchie wie folgt:
1. Fügen Sie unter MixedRealitySceneContenteine neue Eingabekomponente hinzu (klicken Sie mit der rechten Maustaste auf >UI-Eingabefeld>– TextMeshPro). Dadurch wird automatisch ein übergeordnetes Canvas Element für die Komponente hinzugefügt.
2. Fügen Sie unter dem neuen Canvaszwei neue Button Komponenten hinzu (klicken Sie mit der rechten Maustaste auf >UI>Button – TextMeshPro).
3. Ordnen Sie die WebView Komponente neu an, um sie zu einem untergeordneten Element der Canvas Komponente zu machen:
Aktualisieren Sie die Canvas-Eigenschaften, indem Sie im Bereich Hierarchie die Canvas auswählen und dann die folgenden Änderungen im Bereich Inspektor vornehmen:
1. Ändern Sie Breite und Höhe in 600 bzw. 400.
2. Ändern Sie die Skalierung für X, Y und Z in 0,001, 0,001, 0,001:
Aktualisieren Sie die Eigenschaften des Eingabefelds, indem Sie es im Hierarchiebereich auswählen und dann die folgenden Änderungen im Bereich Inspektor vornehmen:
1. Ändern Sie Name in "AddressField (TMP)".
2. Ändern Sie Pos X, Pos Y, Pos Z in -2, 178, -5.
3. Ändern Sie Breite und Höhe in 390 bzw. 30:
Aktualisieren Sie die Eigenschaften der ersten Schaltfläche, indem Sie sie im Bereich Hierarchie auswählen und dann die folgenden Änderungen im Bereich Inspektor vornehmen:
1. Ändern Sie den Namen in "Schaltfläche "Zurück".
2. Ändern Sie Pos X, Pos Y, Pos Z in -248, 178, -5.
3. Ändern Sie Breite und Höhe in 75 bzw. 30:
Aktualisieren Sie die Eigenschaften der zweiten Schaltfläche, indem Sie sie im Bereich Hierarchie auswählen und dann die folgenden Änderungen im Bereich Inspektor vornehmen:
1. Ändern Sie den Namen in "Schaltfläche 'Gehe'"
2. Ändern Sie Pos X, Pos Y, Pos Z in 242, 178, -5.
3. Ändern Sie Breite und Höhe in 75 bzw. 30:
Aktualisieren Sie die Eigenschaften von WebView, indem Sie sie im Bereich Hierarchie auswählen und dann die folgenden Änderungen im Bereich Inspector vornehmen:
1. Ändern Sie die Position>X, Y, Z in 0, -16, -5.
2. Ändern Sie die Skalierung>X, Y, Z in 570, 340, 1 bzw. 1:
Fügen Sie der Canvas ein Hintergrundbild hinzu:
1. Wählen Sie im Bereich Hierarchie die Canvas aus.
2. Klicken Sie unten im Bereich Inspektor auf die Schaltfläche Komponente hinzufügen.
3. Geben Sie Image ein, und wählen Sie dann das oberste Ergebnis in der Liste aus.
4. Klicken Sie auf den Farbloch für das Bild, und wählen Sie dann eine Hintergrundfarbe aus. In unserem Beispiel haben wir eine graue Farbe ausgewählt. (Dies ist einfach, um einen gewissen Kontrast zwischen den verschiedenen Steuerelementen im Zeichenbereich zu zeigen.)
Wählen Sie im Hierarchiebereich unter Schaltfläche "Zurück"die Option Text (TMP) aus. Ändern Sie dann im Bereich Inspektor die Texteingabe in Zurück:
Wiederholen Sie den obigen Vorgang für die Schaltfläche Gehe, und ersetzen Sie Go als Text.

Sie sollten nun über eine Szene verfügen, die in etwa wie folgt aussieht:

Hinzufügen von Code zum Einbinden der Schaltflächen

Nachdem wir nun die Benutzeroberfläche entworfen haben, erstellen wir nun den Code, um die Schaltflächen zu verbinden. Dazu erstellen wir ein neues Skript, das von Microsoft.MixedReality.WebViewabgeleitet wird.

Klicken Sie im Fenster Inspector für WebView auf Komponente hinzufügen, wählen Sie Neues Skript aus, geben Sie WebViewBrowser ein, und klicken Sie dann auf Erstellen und hinzufügen. Die neue Komponente wird dem Inspektorfenster hinzugefügt.
Doppelklicken Sie im Inspektorfenster auf das WebViewBrowser Skript, um das Skript zu bearbeiten.

Ersetzen Sie den Inhalt dieser Datei durch den folgenden Code:

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

Verbinden Sie die Benutzeroberfläche GameObjects mit dem WebViewBrowser soeben geschriebenen Code:
1. Wählen Sie webViewBrowser aus.
2. Ziehen Sie die Schaltfläche Zurück aus dem Hierarchiebereich in das Variablenfeld Zurück-Schaltfläche für den WebView-Browser im Inspektor.
3. Ziehen Sie die Schaltfläche "Los" aus dem Hierarchiebereich in das Variablenfeld "Gehe schaltfläche" für den WebView-Browser im Inspektor:
Sie können die Szene jetzt im Unity-Editor testen. Da alles in Ihrer Szene verkabelt ist, sollten Sie in der Lage sein, zu überprüfen, ob alles wie erwartet funktioniert. Testen Sie die Szene, indem Sie eine neue URL in das AddressField Textfeld eingeben (muss eine vollständige URL einschließlich des Protokolls sein), und drücken Sie dann die Schaltfläche Gehe zu. Stellen Sie sicher, dass die Schaltfläche Zurück ebenfalls funktioniert.

Es kann manchmal hilfreich sein, Ihre Anwendung zu debuggen, die auf Ihrer HoloLens ausgeführt wird, und die entsprechenden Schritte unterscheiden sich geringfügig vom Standarddebuggen in Visual Studio. Weitere Informationen zum Einrichten und Herstellen einer Verbindung mit Ihrer Anwendung, die auf der HoloLens oder im Unity-Editor ausgeführt wird, finden Sie unter Verwaltetes Debuggen mit Unity.

Siehe auch:

WebView2-API-Referenz
API-Referenz für Mixed Reality WebView-Plug-In: für HoloLens 2 im WebView2 Unity-Plug-In.

Fahren Sie mit den folgenden Schritten fort.

Schritt 8: Informationen zu WebView2-Ereignissen und -Interaktionen in Unity

Das Microsoft Mixed Reality WebView-Plug-In für Unity stellt Ereignisse für die Arbeit mit der Webansicht bereit.

Ein wichtiges Ereignis ist IWithPostMessage.MessageReceived, das ausgelöst wird, wenn eine Nachricht von der Webansicht an die Unity-App gesendet wird. Das MessageReceived Ereignis wird in der Microsoft.MixedReality.WebView.IWithPostMessage -Schnittstelle definiert.

IWithPostMessage definiert auch die PostMessage() -Methode, die verwendet werden kann, um eine Nachricht von der Unity-App an die Webansicht zu senden.

Im Folgenden finden Sie ein Beispiel für die Verwendung dieser Ereignisse und Methoden für die Arbeit mit der Webansicht:

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

Weitere Überlegungen zu WebView2 auf HoloLens 2

Einschränkungen und bekannte Probleme

Beachten Sie beim Entwickeln einer HoloLens 2 Unity-App mit WebView2 einige Einschränkungen und bekannte Probleme:

Popups: Popups funktionieren nicht gut in WebView2 innerhalb von Unity-Apps auf HoloLens 2, funktionieren aber in 2D-XAML-Apps auf dem Gerät einwandfrei. Vermeiden Sie Popups, und verwenden Sie alternative Techniken oder Ui-Designs, z. B. benutzerdefinierte Popupelemente innerhalb der WebView mithilfe von HTML, CSS und JavaScript.
Neue Fenster: WebView2-Instanzen auf HoloLens 2 im Gegensatz zu Desktop standardmäßig innerhalb desselben Fensters navigieren. Befolgen Sie dieses Standardverhalten, um die Benutzererfahrung zu verbessern. Darüber hinaus kann das DevTools-Fenster nicht gestartet werden.
Unternehmensauthentifizierung: Automatische single Sign-On (SSO) mit Token auf Betriebssystemebene wird in WebView2 auf HoloLens 2 derzeit nicht unterstützt. Benutzer können sich weiterhin mit Anmeldeinformationen anmelden, außer in Fällen, in denen eine Authentifizierung auf Geräteebene erforderlich ist. Die Cookiespeicherung funktioniert wie erwartet.
Benutzerinteraktionen: Im Gegensatz zu nativen HoloLens 2 Slates wird WebView2 am besten mit Ferninteraktionshandstrahlen interagiert. Touch-to-Wisch- und Bildlaufinteraktionen werden möglicherweise nicht unterstützt.
Leistung: Komplexe Websites mit hoher JavaScript- oder erweitertem Rendering können sich auf die Systemleistung oder die Framerate der Hostanwendung auswirken. Allgemeine leistungsbezogene Einschränkungen und Empfehlungen finden Sie in der Mixed Reality-Dokumentation unter Grundlegendes zur Leistung für Mixed Reality . Siehe auch Leistungsoptimierung weiter unten.

Leistungsoptimierung

Die Optimierung der Leistung von WebView2 in Ihrer HoloLens 2 Unity-App ist für eine reibungslose Benutzererfahrung von entscheidender Bedeutung. Hier sind einige Empfehlungen:

Einschränken der Anzahl von WebView2-Instanzen: Es wird empfohlen, nur eine instance von WebView2 innerhalb einer Unity-App zu verwenden. Verwenden Sie die gleiche instance oder beenden Sie sie, und erstellen Sie nach Bedarf eine neue. Beachten Sie, dass das Entfernen des WebView-Prefabs aus der Szene die zugrunde liegende WebView2-instance möglicherweise nicht zerstört. Sie müssen die Destroy() -Methode für das Spielobjekt aufrufen, um es ordnungsgemäß zu zerstören.
Wenden Sie allgemeine Unity-Optimierungstechniken an: Um die WebView2-Leistung zu optimieren, verwenden Sie die standardmäßigen Unity-Optimierungsansätze, z. B. Verdeckungskultierung oder Begrenzen der Updaterate. Weitere Informationen finden Sie unter Leistungsempfehlungen für Unity in der Mixed Reality-Dokumentation.
Profilerstellung und Überwachung der WebView2-Leistung: Es gibt mehrere Möglichkeiten, ein Profil für die Leistung einer HoloLens 2 Unity-Anwendung zu erstellen:
- Unity Profiler: Ein integriertes Tool in Unity, mit dem Sie die Leistung Ihrer Anwendung auf verschiedenen Plattformen messen und optimieren können, einschließlich HoloLens 2.
- Visual Profiler: Ein Feature des Mixed Reality Toolkits, das eine anwendungsinterne Ansicht der Leistung Ihrer Anwendung bereitstellt.
- PIX: Ein Leistungsoptimierungs- und Debugtool für Windows, das auch zum Profilieren von Unity-Anwendungen auf HoloLens 2 verwendet werden kann.

In Schritt 7 – Erweitern der WebView2-Funktionalität haben wir einige Navigationsmethoden angesprochen. In diesem Abschnitt wird das Gelernte erläutert.

Siehe auch:

WebView2-API-Referenz
API-Referenz für Mixed Reality WebView-Plug-In: für HoloLens 2 im WebView2 Unity-Plug-In.

IWebView-Schnittstelle

Die IWebView -Schnittstelle macht einige Methoden, Ereignisse und Eigenschaften im Zusammenhang mit der Seitennavigation verfügbar. Die hier verfügbar gemachte Standard Funktionalität ist die Möglichkeit, mit Load(Uri url)zu einer bestimmten URL zu navigieren:

public interface IWebView
{
    // Non-navigation methods are removed for clarity.

    event WebView_OnNavigated Navigated;

    Uri Page { get; }

    void Load(Uri url);

    void Reload(bool ignoreCache);
}

IWithBrowserHistory-Schnittstelle

Die IWithBrowserHistory -Schnittstelle macht einige Methoden und Ereignisse im Zusammenhang mit der Seitennavigation verfügbar. Dadurch können Entwickler hauptsächlich vorwärts und rückwärts navigieren, wie Sie es bei einem typischen Webbrowsen erwarten würden:

public interface IWithBrowserHistory : IWebView
{
    // Non-navigation methods are removed for clarity.

    event WebView_OnCanGoForwardUpdated CanGoForwardUpdated;

    event WebView_OnCanGoBackUpdated CanGoBackUpdated;

    void GoBack();

    void GoForward();
}

SetVirtualHostNameToFolderMapping und SetVirtualHostMapping

Die CoreWebView2.SetVirtualHostNameToFolderMapping-Methode ermöglicht die Zuordnung zwischen einem virtuellen Hostnamen und einem Ordnerpfad, sodass er für Websites mit diesem Hostnamen zugänglich ist. Diese Methode ordnet einem lokalen Ordner einen lokalen Domänennamen zu, sodass das WebView2-Steuerelement Inhalte aus dem angegebenen lokalen Ordner lädt, wenn versucht wird, auf eine Ressource für diese Domäne zuzugreifen.

Das WebView-Plug-In für Unity macht diese Funktionalität über die IWithVirtualHost -Schnittstelle verfügbar, die über eine einzige Methode verfügt: SetVirtualHostMapping(string hostName, string folderPath)

public interface IWithVirtualHost : IWebView
{
    void SetVirtualHostMapping(string hostName, string folderPath);
}

Um die SetVirtualHostMapping -Methode zu verwenden, legen Sie hostName auf eine gültige URL-konforme Zeichenfolge fest, z webview2.sample. B. . folderPath kann ein absoluter Pfad oder ein Pfad relativ zum Arbeitsverzeichnis der Anwendung sein, z Assets\Html. B. .

Angenommen, wir haben eine HTML-Datei namens demo.html unter Assets\Html, der folgende Codeausschnitt veranschaulicht das Laden demo.html mithilfe des WebView-Plug-Ins für Unity:

using Microsoft.MixedReality.WebView;

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

        webViewComponent.GetWebViewWhenReady((IWebView webView) =>
        {
            ((IWithVirtualHost)webView).SetVirtualHostMapping("webview2.sample", "Assets\\Html");

            // Navigate to our local content.
            webViewComponent.Load(new Uri("http://webview2.sample/demo.html"));
        });
    }
}

Input

Es gibt verschiedene Möglichkeiten, Eingaben in Unity für Mixed Reality-Anwendungen zu verarbeiten.

Eingabeübersicht – MRTK2 – empfohlen für Mixed Reality Toolkit 2.8-Anwendungen.
Eingabe – MRTK3 – empfohlen für Mixed Reality Toolkit 3-Anwendungen.
Unity-Eingabesystem

Unabhängig vom Eingabesystem, das in Ihrer Unity-Anwendung verwendet wird, ist Interopcode zwischen den verschiedenen Anwendungseingabeereignissen und dem WebView-Plug-In für Unity erforderlich. Dies bedeutet, diese Ereignisse (z. B. Zeigerereignisse) in ein WebViewMouseEventData -Objekt zu übersetzen und diese Ereignisse dann über die -Schnittstelle an das IWithMouseEvent Plug-In weiterzuleiten:

public interface IWithMouseEvents : IWithInputEvents
{
    void MouseEvent(WebViewMouseEventData mouseEvent);
}

WebView2 kennt das Eingabesystem von Unity nicht und verfügt wahrscheinlich über ein anderes Koordinatensystem als Ihre Unity-Szene. Wenn also ein Zeiger-Down-Ereignis vorliegt, müssen dessen Koordinaten in das Koordinatensystem des WebView2-Steuerelements übersetzt werden. Darüber hinaus muss das Zeiger-Down-Ereignis in einen geeigneten WebViewMouseEventData Ereignistyp konvertiert werden.

Einfaches Beispiel:

using Microsoft.MixedReality.WebView;

public class WebViewExample : MonoBehaviour, IPointerDownHandler
{
    // WebView setup steps skipped for brevity

    public void OnPointerDown(PointerEventData eventData)
    {
        IWithMouseEvents mouseEventsWebView = webView as IWithMouseEvents;

        // Call hypothetical function which converts the event's x, y into the WebView2's coordinate space.
        var hitCoord = ConvertToWebViewSpace(eventData.position.x, eventData.position.y);

        WebViewMouseEventData mouseEvent = new WebViewMouseEventData
        {
            X = hitCoord.x,
            Y = hitCoord.y,
            Type = WebViewMouseEventData.EventType.MouseDown,
            Button = WebViewMouseEventData.MouseButton.ButtonLeft,
            TertiaryAxisDeviceType = WebViewMouseEventData.TertiaryAxisDevice.PointingDevice
        };

        // Propagate the event to the WebView plugin.
        mouseEventsWebView.MouseEvent(mouseEvent);
    }
}

Im obigen Beispiel werden Zeiger-Down-Ereignisse in WebViewMouseEventData -Objekte konvertiert und an das WebView-Plug-In für Unity weitergeleitet. Es wird im Wesentlichen in ein Mouse-Down-Ereignis konvertiert. Um Mausklickereignisse zu erstellen, müssten Zeigerereignisse auf ähnliche Weise behandelt werden.

Im obigen ConvertToWebViewSpace Beispiel ist absichtlich nicht implementiert.

Siehe auch

Erste Schritte mit WebView2 in WinUI 2-Apps (UWP)
WebView2-API-Referenz
API-Referenz für Mixed Reality WebView-Plug-In: für HoloLens 2 im WebView2 Unity-Plug-In.