Erste Schritte mit WebView2 in HoloLens 2 Unity-Apps (Vorschau)
Dieses Tutorial richtet sich an Entwickler, die WebView2 in immersiven HoloLens 2 Unity-Anwendungen verwenden.
In diesem Artikel erfahren Sie, wie Sie Ihren eigenen WebView2-Code schreiben. Wenn Sie zuerst ein Beispiel ausführen möchten, lesen Sie Win32-Beispiel-App oder einen anderen Beispiel-App-Artikel.
Wichtig
WebView2 auf Hololens 2 ist weiterhin verfügbar. Die Unterstützung für WebView2 auf Hololens 2 wird jedoch nicht mehr unterstützt. Es gibt keine geplanten Fehlerbehebungen oder Inhaltsupdates, und der technische Support wurde beendet. Es ist nicht garantiert, dass Anwendungen, die WebView2 auf Hololens 2 verwenden, weiterhin funktionieren.
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 funktioniert nur auf HoloLens 2 Geräten, 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)>Runtime>Prefab 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.com
das 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:
- Fügen Sie unter
MixedRealitySceneContent
eine neue Eingabekomponente hinzu (klicken Sie mit der rechten Maustaste auf >UI-Eingabefeld>– TextMeshPro). Dadurch wird automatisch ein übergeordnetesCanvas
Element für die Komponente hinzugefügt. - Fügen Sie unter dem neuen
Canvas
zwei neueButton
Komponenten hinzu (klicken Sie mit der rechten Maustaste auf >UI>Button – TextMeshPro). - Ordnen Sie die
WebView
Komponente neu an, um sie zu einem untergeordneten Element derCanvas
Komponente zu machen:
- Fügen Sie unter
Aktualisieren Sie die Canvas-Eigenschaften, indem Sie im Bereich Hierarchie die Canvas auswählen und dann die folgenden Änderungen im Bereich Inspektor vornehmen:
- Ändern Sie Breite und Höhe in 600 bzw. 400.
- Ä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:
- Ändern Sie Name in "AddressField (TMP)".
- Ändern Sie Pos X, Pos Y, Pos Z in -2, 178, -5.
- Ä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:
- Ändern Sie den Namen in "Schaltfläche "Zurück".
- Ändern Sie Pos X, Pos Y, Pos Z in -248, 178, -5.
- Ä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:
- Ändern Sie den Namen in "Schaltfläche 'Gehe'"
- Ändern Sie Pos X, Pos Y, Pos Z in 242, 178, -5.
- Ä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:
- Ändern Sie die Position>X, Y, Z in 0, -16, -5.
- Ändern Sie die Skalierung>X, Y, Z in 570, 340, 1 bzw. 1:
Fügen Sie der Canvas ein Hintergrundbild hinzu:
- Wählen Sie im Bereich Hierarchie die Canvas aus.
- Klicken Sie unten im Bereich Inspektor auf die Schaltfläche Komponente hinzufügen.
- Geben Sie Image ein, und wählen Sie dann das oberste Ergebnis in der Liste aus.
- 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.WebView
abgeleitet 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 demWebViewBrowser
soeben geschriebenen Code:- Wählen Sie webViewBrowser aus.
- Ziehen Sie die Schaltfläche Zurück aus dem Hierarchiebereich in das Variablenfeld Zurück-Schaltfläche für den WebView-Browser im Inspektor.
- 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);
}
}
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.