Augmented Reality Webbrowser - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:19

Heute werden wir einen Augmented Reality Webbrowser für Android erstellen.

Diese Idee entstand, als ExpressVPN mich bat, ein gesponsertes YouTube-Video zu machen. Da dies mein erster ist, wollte ich etwas tun, das für ihr Produkt relevant ist. Fast sofort dachte ich, ohh, ich werde einfach einen Augmented-Reality-Webbrowser erstellen, damit wir in AR auf einem VPN im Web surfen können. So schwer kann es doch nicht sein, oder? Falsch. Ich habe mir für dieses Projekt einige Grenzen gesetzt, weil ich es nutzen wollte, um neue Dinge zu lernen.

Erstens wollte ich, dass es für Android ist, weil ich immer Sachen mit IOS mache.

Zweitens wollte ich keine kostenpflichtigen APIs verwenden, ich wollte, dass jeder dieses Projekt einfach herunterladen und ausführen kann, ohne online für irgendetwas bezahlen zu müssen. Also kein IBM Watson, keine Google API und nichts aus dem Unity Asset Store.

LASS UNS ANFANGEN!

Schritt 1: Das Wichtigste zuerst

Das erste, was ich an die Arbeit machen wollte, war eine gute Lösung für Sprache-zu-Text, damit wir die Online-Suche mit unserer Stimme durchführen können. Ich denke auch, dass Sprache eine großartige Interaktionsmethode in AR ist, zumindest bis wir eine gute Hand-Tracking-Lösung haben. Ich weiß, dass Android einige native Sprach-zu-Text-Funktionen hat, daher hilft uns eine schnelle Google-Suche, einige Plugins für Unity zu finden.

Ich bin zum ersten Mal auf dieses Plugin für Unity gestoßen:

www.google.com/search?rlz=1C5CHFA_deUS816U…

Ich habe das ausprobiert und es hat super funktioniert. Das einzige Problem war, dass wenn Sie es mit ARCore verwenden, es eine native Popup-Box generiert und Unity im Hintergrund zu scheinen scheint und Sie am Ende die Verfolgung verlieren.

Das war alles andere als ideal.

Schritt 2: Sprachausgabe für Android zum Laufen bringen

Also fing ich an, nach einigen Plugins zu suchen, die die native Popup-Box nicht anzeigten und nicht viel finden konnten, aber am Ende fand ich diese Android-Bibliothek:

github.com/maxwellobi/Android-Spracherkennung…

Jetzt weiß ich buchstäblich nichts über die native Android-Entwicklung, aber ich wollte mich selbst herausfordern, also dachte ich, ich würde einfach versuchen, Brückencode für diese Bibliothek zu schreiben und sie in ein Android-Plugin für die Verwendung in Unity umzuwandeln zu stundenlangen Frustrationen.

Dann hat es endlich geklappt…

Schritt 3: Gelernte Lektionen

Es gibt also zwei Dinge, die ich in diesem Prozess gelernt habe, die nicht sofort ersichtlich sind, wenn man nur googelt, wie man ein Android-Plugin für Unity erstellt.

Nummer eins ist, dass Sie wahrscheinlich einen Verweis auf den Kontext der Android-App benötigen, wenn Ihr Plugin etwas Interessantes tun wird. Sie können dies tun, indem Sie die Datei classes.jar aus Ihrer Unity-Installation als Bibliothek zu Ihrem Android-Projekt hinzufügen. Gehen Sie also zur Dateiprojektstruktur und wählen Sie dann die Registerkarte Abhängigkeiten für das App-Modul. Hier können Sie auf die Plus-Schaltfläche klicken, um die JAR-Datei hinzuzufügen. Gehen Sie zu Ihrem Unity-Build, Playback-Engines, Androidplayer, Variationen, Mono, Entwicklung, Klassen und schließlich Klassen.jar. Ändern Sie den Bereich, um nur zu kompilieren. Jetzt können Sie in einer neuen Java-Datei Folgendes tun:

UnityPlayer.currentActivity.getApplicationContext();

und verwenden Sie diese Referenz, wo immer Sie sie benötigen.

Das nächste seltsame Problem ist, dass diese Sprachfunktion nur im Hauptthread ausgeführt werden kann, da sonst Fehler auftreten. Um dies in Unity zu tun, müssen Sie den Funktionen und dem Plugin mitteilen, dass sie auf dem UI-Thread als AndroidJavaRunnable wie im obigen Bild ausgeführt werden sollen.

Schritt 4: Kämpfe

An diesem Punkt denke ich, ich bin ein Android-Experte, Ich bewerbe mich online für Android-Entwicklerjobs und bestelle Android-Aufkleber und -T-Shirts. Das leben ist gut. Jetzt bin ich bereit, herauszufinden, wie man eine Webseite in Unity rendert. Nach ein wenig Recherche sehe ich, dass die akzeptierte Lösung darin besteht, ein Android WebView zu verwenden. Dies ist nur eine Android-Klasse, mit der Sie Websites rendern können, die in einer Android-App interagierbar sind, ohne alles in den Browser zu laden. Im Grunde ist es so, dass Sie Benutzer in Ihrer App halten können. Die erste Aufgabe besteht darin, zu sehen, ob jemand dafür ein Unity-Plugin entwickelt hat, das Open Source ist. Ich probiere zuerst dieses Plugin aus:

github.com/gree/unity-webview

aber es rendert nur eine WebView auf der Unity-GUI-Ebene, damit das nicht funktioniert. Dann finde ich dieses Plugin für VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

Auf diese Weise können Sie ein WebView in eine Textur rendern und es sogar interagieren, was großartig ist. Ich dachte, dies wäre die Antwort, bis ich es ausprobierte und herausfand, dass es alle meine Klicks von der Einheit blockiert.

Schritt 5: Zurück zum Zeichenbrett

Ich werde nur versuchen, mein On-Plugin dafür zu erstellen, denn alles, was ich wirklich brauche, ist, ein Bild der Website an Unity zu senden. Bei einigen Recherchen finde ich heraus, dass ich eine Android-Leinwand in einer Bitmap speichern und sie dann in ein-p.webp

Es hat endlich funktioniert.

Jetzt bekomme ich also einen Screenshot von einer Website, also mal sehen, wie es mit arcore funktioniert…

Es tut es nicht.

Ich meine, ich benutze ein Galaxy S7, das nicht das neueste Telefon ist, aber dieses WebView-Zeug friert immer noch die gesamte App ein und ist im Grunde unbrauchbar. Ich gehe davon aus, dass WebView und ARCore beide den Hauptthread überladen, aber ich weiß es nicht wirklich. Zurück zum Zeichenbrett. Wenn wir das zum Laufen bringen wollen, müssen wir die schwere Arbeit auf eine Art Server verlagern. Nach einigem Googeln kann man einen Screenshot einer Website mit einer Bibliothek für Node.js namens WebShot machen, die Phantom JS verwendet, einen skriptfähigen Headless-Browser.

Schritt 6: Endlich kommen wir irgendwo hin

Jetzt muss ich herausfinden, wie zum Teufel Node.js verwendet wird….

Es stellte sich heraus, dass Sie ein Node.js-Skript erstellen können, das auf einer bestimmten Portnummer lauscht und bei einem Treffer auf diesem Port einige Informationen zurückgeben kann. Wir können dies testen, indem wir ein kleines Hello-World-Skript erstellen, das auf Port 3000 lauscht. Wir können mit dem Skript in das Verzeichnis cd und es ausführen, indem wir node und dann den Skriptnamen ausführen. Wenn wir zu unserer IP-Adresse und dann zu Port 3000 in unserem Browser navigieren, können wir sehen, dass es hallo world zurückgibt. Jetzt, da ich ein wenig Ahnung von Node habe, kann ich es auf meinem Server zum Laufen bringen, auf dem ich meine Websites hoste, auf denen hawkhost.com ist. Ich verbinde mich per SSH mit meinem Server und versuche, ein paar hello world node.js-Skripte auszuführen … und nichts funktioniert. Nach weiteren Stunden des Herumspielens finde ich heraus, dass mein bestimmter Hosting-Server nur zwei offene Ports hat, nämlich 3000 und 12001.

Mit diesen Ports und meiner Hosting-Server-IP kann ich also ein Hallo-Welt-Beispiel zum Laufen bringen. Als nächstes installiere ich das WebShot-Modul und erstelle ein kleines Skript, das mir eine URL übergeben kann und mir ein Bild der Website unter dieser Webadresse zurückgibt. Jetzt kann ich dieses Knotenskript starten und eine HTTP-POST-Anfrage von Unity an die spezifische IP- und Portnummer meines Servers senden, die mir ein Byte-Array zurückgibt, das das Bild dieser Website ist. Gott sei Dank. Jetzt ist ein weiteres Problem, wenn ich mein Terminal schließe, endet der Prozess und hört auf zu hören. Ich recherchiere weiter und finde ein Modul namens forever. NPM installiere für immer und jetzt kann ich zu ewig navigieren und das Skript für immer starten und es wird weiter ausgeführt, bis ich mich einlogge und es wieder beende.

Schritt 7: Es funktioniert

Groß. Aber es ist nicht cool genug.

Wenn ich über den Wert des Surfens im Web in AR nachdenke, kommt er aus dem zusätzlichen Platz. Wir sind nicht mehr auf einen einzigen Bildschirm beschränkt, also möchte ich etwas machen, das es mir ermöglicht, meinen Suchpfad direkt vor mir zu visualisieren. Lassen Sie uns also diese erste Suchseite laden und dann diese Seite crawlen und jedes Suchergebnis als Link extrahieren, den wir dann als Bild über unserem Hauptbildschirm laden können. Wir können dies mit einem anderen Node.js-Skript tun, das die erste Seite der Google-Ergebnisse kratzt und sie für immer kontinuierlich ausführt. Dies könnte mit der Google-Such-API viel effizienter erfolgen, aber Regel Nummer zwei für dieses Projekt war keine bezahlten APIs, also machen wir es vorerst so. Jetzt, da wir die Bilder für jeden Link haben, können wir sie jedes Mal auf einen größeren Bildschirm laden, wenn wir darauf klicken und boomen, wir haben hier einen netten kleinen Browser. Es ist nicht voll funktionsfähig, aber ich nehme es. Okay, wenn Sie dieses Projekt selbst ausführen möchten, gehen Sie zu meinem Github und laden Sie das expressVPN-Projekt herunter:

github.com/MatthewHallberg/ARBrowserExpres…

Schritt 8: Alles funktioniert

Öffnen Sie es in Unity und lassen Sie uns alles lokal auf Ihrem Computer ausführen. Zuerst müssen Sie die IP-Adresse Ihres Computers finden. Wenn Sie also auf einem Mac sind, halten Sie einfach die Option und klicken Sie auf das WLAN-Symbol, um Ihre IP anzuzeigen.

Gehen Sie zurück zu Unity und öffnen Sie das Browser-Controller-Skript und geben Sie dort Ihre IP-Adresse ein und kopieren Sie sie in Ihre Zwischenablage. Suchen Sie den Ordner nodeScripts und legen Sie ihn auf Ihren Desktop, öffnen Sie den Ordner und ändern Sie beide Erweiterungen in.js. Öffnen Sie jedes Skript und ändern Sie die IP-Adresse in Ihre IP. Öffnen Sie nun das Terminal und wir müssen einige Dinge installieren. Installieren Sie HomeBrew, wenn Sie es noch nicht haben.

-brauen Sie den Installationsknoten

-npm Webshot installieren

-npm Flatiron installieren

-npm Gewerkschaft installieren

-npm installiere cheerio

Jetzt können wir beide Skripte starten, also cd in den nodescripts-Ordner und den Knoten getimage.js ausführen und dann ein neues Terminalfenster öffnen und den Knoten getlinks.js ausführen Lassen Sie beide Terminalfenster laufen und gehen Sie zurück zum Editor. Wenn wir auf Play drücken, sollte alles gut funktionieren. Wir können auch zu Datei gehen, Einstellungen erstellen und auf Build und Ausführen klicken, um es auf unser Telefon zu bekommen! Wenn Sie die Server stoppen möchten, drücken Sie einfach Control c oder Command q, um das gesamte Terminal zu schließen.

DAS IST ES!