Augmented Reality -webbrowser: 9 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:28

I dag skal vi igennem en Augmented Reality -webbrowser til Android.

Denne idé startede, da ExpressVPN bad mig om at lave en sponsoreret YouTube -video. Da dette er min første, ville jeg gøre noget, der var relevant for deres produkt. Stort set umiddelbart tænkte jeg, åhh jeg vil bare lave en augmented reality -webbrowser, så vi kan surfe på internettet i AR på en VPN. Det kan ikke være så svært, ikke? Forkert. Jeg satte mig nogle begrænsninger for dette projekt, fordi jeg ville bruge det til at lære nogle nye ting.

Nummer et, jeg ville have det til Android, fordi jeg altid laver ting med IOS.

Nummer to, jeg ville ikke bruge nogen betalte API’er, jeg ville have, at alle bare kunne downloade dette projekt og køre det uden at skulle betale for ting online. Så ingen IBM Watson, ingen Google API og intet fra Unity Asset -butikken.

LAD OS KOMME IGANG!

Trin 1: Første ting først

Det første, jeg ville få til at fungere, var en god løsning til tale til tekst, så vi kunne foretage onlinesøgninger med vores stemme. Jeg synes også, at stemme er en fantastisk interaktionsmetode i AR, i hvert fald indtil vi har en god håndsporingsløsning. Jeg ved, at Android har nogle native speech til tekst -funktioner, så en hurtig Google -søgning hjælper os med at finde nogle plugins til Unity.

Jeg stødte først på dette plugin for enhed:

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

Jeg prøvede dette, og det fungerede fantastisk. Det eneste problem var, at når du bruger det med ARCore, genererer det en indbygget pop op -boks og ser ud til at baggrunds -enhed, og du ender med at miste sporing.

Dette var mindre end ideelt.

Trin 2: Få tale til tekst, der fungerer til Android

Så jeg begyndte at søge efter nogle plugins, der ikke bragte den indbyggede pop op -boks og ikke kunne finde meget, men jeg endte med at finde dette Android -bibliotek:

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

Nu ved jeg bogstaveligt talt intet om indfødt Android -udvikling, men jeg ville udfordre mig selv, så jeg regnede med, at jeg bare ville prøve at skrive en brokode til dette bibliotek og gøre det til et Android -plugin til brug i Unity. Igen, dette var en fejl og føre til timers frustration.

Så lykkedes det endelig …

Trin 3: Lærte lektioner

Så der er to ting, jeg lærte i denne proces, som ikke umiddelbart fremgår af bare at google, hvordan man laver et Android -plugin til enhed.

Nummer et er, at du sandsynligvis skal få en reference til Android -appens kontekst, hvis dit plugin kommer til at gøre noget interessant. Du kan gøre dette ved at tilføje filen classes.jar fra din Unity -installation til dit Android -projekt som et bibliotek. Så gå til filprojektstruktur og vælg derefter fanen afhængigheder for app -modulet. Her kan du klikke på plus -knappen for at tilføje jar -filen. Gå til din Unity -build, afspilningsmotorer, androidplayer, variationer, mono, udvikling, klasser og til sidst classes.jar. Skift omfanget til kun at kompilere. Nu kan du i en ny java -fil gøre:

UnityPlayer.currentActivity.getApplicationContext ();

og brug den reference, hvor du end har brug for det.

Det næste underlige problem er, at denne stemmefunktionalitet kun kan køres på hovedtråden, ellers får du fejl. For at gøre dette i Unity skal du fortælle funktionerne og pluginet at køre på UI -tråden som en AndroidJavaRunnable som billedet ovenfor.

Trin 4: Kampe

På dette tidspunkt tror jeg, at jeg er en Android -ekspert, Jeg ansøger online om android dev-job, jeg bestiller Android-klistermærker og t-shirts. Livet er godt. Nu er jeg klar til at finde ud af, hvordan man gengiver en webside i Unity. Efter at have gjort lidt research ser jeg, at den accepterede løsning er at bruge en Android WebView. Dette er bare en Android-klasse, der giver dig mulighed for at gengive websteder, der kan interageres i en Android-app uden at indlæse alt i browseren. Grundlæggende er det så du kan beholde brugere i din app. Den første forretningsorden er at se, om nogen har lavet et enhedsplugin til dette, der er open source. Jeg prøver først dette plugin:

github.com/gree/unity-webview

men det gengiver kun en WebView til Unity GUI -laget, så det virker ikke. Så finder jeg dette plugin til VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

dette giver dig mulighed for at gengive en WebView til en tekstur og dens endda interaktive, hvilket er fantastisk. Jeg troede, at dette var svaret, indtil jeg prøvede det og fandt ud af, at det blokerede alle mine klik fra enhed.

Trin 5: Tilbage til tegnebrættet

Jeg vil bare prøve at oprette mit plugin til dette, for alt jeg virkelig har brug for er at sende et billede af webstedet til enhed. Ved at undersøge det, finder jeg ud af, at jeg kan gemme et Android -lærred til et bitmap og derefter kode det til en-p.webp

Det lykkedes endelig.

Så nu får jeg et skærmbillede fra et websted, så lad os se, hvordan det fungerer med arcore …

Det gør den ikke.

Jeg mener, at jeg bruger en galaxy s7, som ikke er den nyeste telefon, men denne WebView -ting fryser stadig hele appen og er stort set ubrugelig. Jeg går ud fra, at det er fordi WebView og ARCore begge overbelaster hovedtråden, men jeg ved det ikke rigtigt. Tilbage til tegnebrættet. Hvis vi vil få dette til at fungere, bliver vi nødt til at laste de tunge løft til en slags server. Efter at have googlet viser det sig, at du kan tage et skærmbillede af et websted med et bibliotek til Node.js kaldet WebShot, der bruger Phantom JS, som er en scriptbar hovedløs browser.

Trin 6: Endelig kommer vi et sted

Nu skal jeg finde ud af, hvordan i helvede at bruge Node.js….

Det viser sig, at du kan lave et Node.js -script, der lytter til et bestemt portnummer, og når det får et hit, kan det returnere nogle oplysninger. Vi kan teste dette ved at oprette et lille hej verden script, der lytter på port 3000. Vi kan cd ind i biblioteket med scriptet og køre det ved at lave node og derefter scriptnavnet. Hvis vi navigerer til vores IP -adresse og derefter port 3000 i vores browser, kan vi se den returnere hej verden. Nu hvor jeg har et lille greb om node, kan jeg få det til at fungere på min server, som jeg er vært for mine websteder, som er hawkhost.com. Jeg SSH ind på min server og prøver at køre et par hej verden node.js scripts … og intet virker. Efter endnu et par timers roding finder jeg ud af, at min særlige hosting -server kun har to porte åbne til brug, det vil sige 3000 og 12001.

Så ved hjælp af disse porte og mine hosting -serveres IP kan jeg få et hej verden -eksempel til at fungere. Dernæst installerer jeg WebShot -modulet og opretter et lille script, som jeg kan videregive en URL, og det vil give mig et billede af webstedet på den webadresse. Nu kan jeg starte dette node -script og sende en http POST -anmodning fra Unity til den specifikke IP og portnummer på min server, som vil returnere mig et byte -array, der er billedet af dette websted. Tak GUD. Nu er et andet problem, når jeg lukker min terminal, slutter processen og holder op med at lytte. Jeg undersøger mere og finder et modul kaldet for evigt. NPM installeres for evigt, og nu kan jeg navigere til evigt og altid starte scriptet, og det vil fortsætte med at køre, indtil jeg logger ind og stopper det igen.

Trin 7: Det virker

Store. Men det er ikke fedt nok.

Når jeg tænker på værdien af at surfe på internettet i AR, kommer det fra tilføjelse af plads. Vi er ikke længere begrænset til en enkelt skærm, så jeg vil lave noget, der giver mig mulighed for at visualisere mit søgespor lige foran mig. Så lad os indlæse den første søgeside og derefter gennemgå den side og udtrække hvert søgeresultat som et link, som vi derefter kan indlæse som et billede over vores hovedskærm. Vi kan gøre dette med et andet Node.js -script, der skraber den første side af Google -resultaterne og kører det kontinuerligt med evigt. Dette kunne gøres meget mere effektivt med Google Search API, men regel nummer to for dette projekt var ingen betalte API'er, så vi gør det sådan nu. Nu hvor vi har billederne for hvert link, kan vi indlæse dem på en større skærm, hver gang vi klikker på dem og boom, har vi en dejlig lille browser her. Det er ikke fuldt funktionelt, men jeg tager det. Okay, så hvis du selv vil køre dette projekt, skal du gå til mit Github og downloade expressVPN -projektet:

github.com/MatthewHallberg/ARBrowserExpres…

Trin 8: Få alt til at fungere

Åbn det i Unity, og lad os få alt til at køre lokalt på din maskine. Først skal du finde IP -adressen på din maskine, så hvis du er på mac, skal du bare holde indstillingen og klikke på wifi -symbolet for at afsløre din IP.

Gå tilbage til enhed, og åbn browsercontrollerscriptet, og indtast din IP -adresse der, og kopier den til dit udklipsholder. Find mappen nodeScripts, og læg den på dit skrivebord, åbn mappen, og skift begge udvidelser til.js. Åbn hvert script, og skift IP -adressen til din IP. Åbn nu terminalen, og vi skal installere nogle ting. Installer HomeBrew, hvis du ikke allerede har det.

-bryg installationsknudepunkt

-npm installer webshot

-npm installere flatiron

-npm installere fagforening

-npm installere cheerio

Nu kan vi starte begge scripts, så cd ind i nodescripts -mappen og gøre node getimage.js Og derefter åbne et nyt terminalvindue og gøre node getlinks.js Lad begge terminalvinduer køre og gå tilbage til editoren. Hvis vi trykker på play, skulle alt fungere fint. Vi kan også gå til fil, bygge indstillinger og trykke på build and run for at få det på vores telefon! Hvis du vil stoppe serverne, skal du bare trykke på kontrol c eller kommando q for at lukke hele terminalen.

DET ER DET!