Augmented Reality-webbrowser: 9 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

Vandaag gaan we een Augmented Reality-webbrowser voor Android maken.

Dit idee ontstond toen ExpressVPN me vroeg om een gesponsorde YouTube-video te maken. Aangezien dit mijn eerste is, wilde ik iets doen dat relevant was voor hun product. Vrijwel meteen dacht ik, ohh ik zal gewoon een augmented reality-webbrowser maken, zodat we op het web kunnen surfen in AR op een VPN. Zo moeilijk kan het toch niet zijn? Mis. Ik stelde mezelf een aantal beperkingen voor dit project omdat ik het wilde gebruiken om nieuwe dingen te leren.

Nummer één wilde ik dat het voor Android zou zijn, want ik doe altijd dingen met IOS.

Ten tweede wilde ik geen betaalde API's gebruiken, ik wilde dat iedereen dit project gewoon kon downloaden en uitvoeren zonder online voor dingen te hoeven betalen. Dus geen IBM Watson, geen Google API en niets uit de Unity Asset store.

LATEN WE BEGINNEN!

Stap 1: Eerste dingen eerst

Het eerste waar ik mee aan de slag wilde, was een goede oplossing voor spraak naar tekst, zodat we de online zoekopdrachten met onze stem konden doen. Ik denk ook dat spraak een geweldige methode van interactie is in AR, tenminste totdat we een goede hand-tracking-oplossing hebben. Ik weet dat Android een aantal native spraak-naar-tekstfunctionaliteit heeft, dus een snelle Google-zoekopdracht zal ons helpen enkele plug-ins voor Unity te vinden.

Ik kwam deze plug-in voor eenheid voor het eerst tegen:

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

Ik heb dit uitgeprobeerd en het werkte prima. Het enige probleem was dat wanneer je het met ARCore gebruikt, het een native pop-upvenster genereert en Unity op de achtergrond lijkt te plaatsen en je uiteindelijk het volgen verliest.

Dit was minder dan ideaal.

Stap 2: Spraak naar tekst laten werken voor Android

Dus begon ik te zoeken naar enkele plug-ins die de native pop-upbox niet naar voren brachten en kon niet veel vinden, maar uiteindelijk vond ik deze Android-bibliotheek:

github.com/maxwellobi/Android-Speech-Recog…

Nu weet ik letterlijk niets over native Android-ontwikkeling, maar ik wilde mezelf uitdagen, dus ik dacht dat ik gewoon zou proberen wat bridge-code voor deze bibliotheek te schrijven en er een Android-plug-in van te maken voor gebruik in Unity. Nogmaals, dit was een fout en leidde tot urenlange frustratie.

Toen werkte het eindelijk…

Stap 3: geleerde lessen

Dus er zijn twee dingen die ik in dit proces heb geleerd die niet meteen duidelijk zijn door gewoon te googlen hoe je een Android-plug-in voor eenheid kunt maken.

Nummer één is dat je waarschijnlijk een verwijzing naar de context van de Android-app nodig hebt als je plug-in iets interessants gaat doen. U kunt dit doen door het bestand classes.jar van uw Unity-installatie als bibliotheek aan uw Android-project toe te voegen. Ga dus naar de bestandsprojectstructuur en kies vervolgens het tabblad Afhankelijkheden voor de app-module. Hier kunt u op de plusknop klikken om het jar-bestand toe te voegen. Ga naar je Unity-build, playback-engines, androidplayer, variaties, mono, development, classes en tot slot classes.jar. Wijzig het bereik om alleen te compileren. Nu kunt u in een nieuw java-bestand het volgende doen:

UnityPlayer.currentActivity.getApplicationContext();

en gebruik die referentie waar je hem nodig hebt.

Het volgende rare probleem is dat deze stemfunctionaliteit alleen op de hoofdthread kan worden uitgevoerd, anders krijg je fouten. Om dit in Unity te doen, moet je de functies en de plug-in vertellen om op de UI-thread te draaien als een AndroidJavaRunnable zoals de afbeelding hierboven.

Stap 4: strijd

Op dit moment denk ik dat ik een Android-expert ben, Ik ben online aan het solliciteren naar banen voor Android-ontwikkelaars, ik bestel Android-stickers en t-shirts. Het leven is goed. Nu ben ik klaar om verder te gaan met het uitzoeken hoe ik een webpagina in Unity kan weergeven. Na wat onderzoek te hebben gedaan, zie ik dat de geaccepteerde oplossing is om een Android WebView te gebruiken. Dit is slechts een Android-klasse waarmee u websites kunt weergeven die interactief zijn in een Android-app zonder alles in de browser te laden. Kortom, het is zodat u gebruikers in uw app kunt houden. De eerste opdracht is om te zien of iemand hiervoor een unity-plug-in heeft gemaakt die open source is. Ik probeer eerst deze plug-in:

github.com/gree/unity-webview

maar het rendert alleen een WebView naar de Unity GUI-laag, dus dat gaat niet werken. Dan vind ik deze plug-in voor VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

dit stelt je in staat om een WebView weer te geven tot een textuur en het is zelfs interactief, wat geweldig is. Ik dacht dat dit het antwoord was totdat ik het probeerde en ontdekte dat het al mijn klikken van eenheid blokkeerde.

Stap 5: Terug naar de tekentafel

Ik ga gewoon proberen mijn on-plug-in hiervoor te maken, want alles wat ik echt nodig heb, is een afbeelding van de website naar unity sturen. Als ik daar wat onderzoek naar doe, kom ik erachter dat ik een Android-canvas kan opslaan in een bitmap en het vervolgens kan coderen naar een-p.webp

Het werkte eindelijk.

Dus nu krijg ik een screenshot van een website, dus laten we eens kijken hoe het werkt met arcore…

Dat doet het niet.

Ik bedoel, ik gebruik een Galaxy S7 die niet de nieuwste telefoon is, maar deze WebView-dingen bevriezen nog steeds de hele app en zijn in principe onbruikbaar. Ik neem aan dat dit komt omdat WebView en ARCore beide de hoofdthread overbelasten, maar ik weet het niet echt. Terug naar de tekentafel. Als we dit willen laten werken, moeten we het zware werk overdragen aan een soort server. Na wat Googlen blijkt dat je een screenshot kunt maken van een website met een bibliotheek voor Node.js genaamd WebShot die gebruik maakt van Phantom JS, een scriptbare headless browser.

Stap 6: Eindelijk komen we ergens

Nu moet ik uitzoeken hoe ik in godsnaam Node.js kan gebruiken ….

Blijkt dat je een Node.js-script kunt maken dat luistert naar een bepaald poortnummer en wanneer het een hit krijgt op die poort, kan het wat informatie retourneren. We kunnen dit testen door een klein hallo wereld-script te maken dat luistert op poort 3000. We kunnen cd in de map met het script plaatsen en het uitvoeren door node en dan de scriptnaam te doen. Als we naar ons IP-adres en vervolgens poort 3000 in onze browser navigeren, kunnen we zien dat het hallo wereld terugkeert. Nu ik een kleine greep op het knooppunt heb, kan ik het laten werken op mijn server waarop ik mijn websites host, namelijk hawkhost.com. Ik SSH naar mijn server en probeer een paar hello world node.js-scripts uit te voeren … en niets werkt. Na nog een paar uur rommelen kom ik erachter dat mijn specifieke hostingserver maar twee poorten open heeft voor gebruik, namelijk 3000 en 12001.

Dus met behulp van die poorten en mijn hostingservers IP kan ik een hallo wereldvoorbeeld werkend krijgen. Vervolgens installeer ik de WebShot-module en maak ik een klein script dat ik een URL kan doorgeven en het zal me een afbeelding van de website op dat webadres teruggeven. Nu kan ik dat knooppuntscript starten en een http POST-verzoek van Unity naar het specifieke IP- en poortnummer van mijn server sturen, waardoor ik een bytearray krijg die de afbeelding van die website is. Godzijdank. Een ander probleem is dat wanneer ik mijn terminal sluit, het proces eindigt en stopt met luisteren. Ik doe wat meer onderzoek en vind een module met de naam forever. NPM voor altijd installeren en nu kan ik naar voor altijd navigeren en het script voor altijd starten en het blijft draaien totdat ik me aanmeld en het weer stop.

Stap 7: Het werkt

Super goed. Maar het is niet cool genoeg.

Als ik denk aan de waarde van surfen op internet in AR, komt dat door de toevoeging van ruimte. We zijn niet langer beperkt tot een enkel scherm, dus ik wil iets maken waarmee ik mijn zoekpad recht voor me kan visualiseren. Laten we dus die eerste zoekpagina laden en vervolgens die pagina crawlen en elk zoekresultaat extraheren als een link, die we vervolgens als een afbeelding boven ons hoofdscherm kunnen laden. We kunnen dit doen met een ander Node.js-script dat de eerste pagina van de Google-resultaten schrapt en het voor altijd uitvoert. Dit zou veel efficiënter kunnen worden gedaan met de Google-zoek-API, maar regel nummer twee voor dit project was geen betaalde API's, dus we gaan het voorlopig zo doen. Nu we de afbeeldingen voor elke link hebben, kunnen we ze op een groter scherm laden elke keer dat we erop klikken en boem, we hebben hier een leuke kleine browser. Het is niet volledig functioneel, maar ik neem het. Oké, dus als je dit project zelf wilt uitvoeren, ga dan naar mijn Github en download het expressVPN-project:

github.com/MatthewHallberg/ARBrowserExpres…

Stap 8: Alles werkend krijgen

Open het in Unity en laten we alles lokaal op uw computer laten draaien. Eerst moet je het IP-adres van je machine vinden, dus als je op Mac bent, houd je gewoon de optie ingedrukt en klik je op het wifi-symbool om je IP te onthullen.

Ga terug naar unity en open het browsercontroller-script en voer daar je IP-adres in en kopieer het naar je klembord. Zoek de map nodeScripts en zet deze op je bureaublad, open de map en verander beide extensies in.js. Open elk script en verander het IP-adres in uw IP. Open nu terminal en we moeten wat dingen installeren. Installeer HomeBrew als je het nog niet hebt.

-brew install node

-npm installeer webshot

-npm strijkijzer installeren

-npm installatie unie

-npm installeer cheerio

Nu kunnen we beide scripts starten, dus cd naar de map nodescripts en doe node getimage.js En open dan een nieuw terminalvenster en doe node getlinks.js Laat beide terminalvensters actief en ga terug naar de editor. Als we op play drukken zou alles goed moeten werken. We kunnen ook naar het bestand gaan, instellingen bouwen en op bouwen en uitvoeren drukken om het op onze telefoon te krijgen! Als je de servers wilt stoppen, druk je gewoon op control c of commando q om de hele terminal te sluiten.

DAT IS HET!