Augmented Reality -nettleser: 9 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:23

I dag skal vi lage en Augmented Reality -nettleser for Android.

Denne ideen startet da ExpressVPN ba meg om å lage en sponset YouTube -video. Siden dette er min første, ønsket jeg å gjøre noe som var relevant for produktet deres. Ganske mye umiddelbart tenkte jeg, åhh jeg skal bare lage en nettleser med utvidet virkelighet, slik at vi kan surfe på nettet i AR på en VPN. Det kan ikke være så vanskelig, ikke sant? Feil. Jeg satte meg noen begrensninger for dette prosjektet fordi jeg ønsket å bruke det til å lære noen nye ting.

Nummer én jeg ønsket at det skulle være for Android fordi jeg alltid gjør ting med IOS.

Nummer to Jeg ønsket ikke å bruke noen betalte API -er, jeg ønsket at alle bare kunne laste ned dette prosjektet og kjøre det uten å måtte betale for ting online. Så ingen IBM Watson, ingen Google API og ingenting fra Unity Asset -butikken.

LA OSS KOMME I GANG!

Trinn 1: Første ting først

Det første jeg ønsket å få i gang var en god løsning for tale til tekst, slik at vi kunne gjøre søk på nettet med stemmen vår. Jeg synes også stemme er en flott metode for interaksjon i AR, i hvert fall til vi har en god håndsporingsløsning. Jeg vet at Android har noen morsmål til tekstfunksjonalitet, så et raskt google -søk vil hjelpe oss med å finne noen plugins for Unity.

Jeg kom først på denne pluginen for enhet:

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

Jeg prøvde dette og det fungerte bra. Det eneste problemet var at når du bruker den med ARCore, genererer den en innfødt popup -boks og ser ut til å bakgrunne Unity, og du ender opp med å miste sporing.

Dette var mindre enn ideelt.

Trinn 2: Få tale til tekstarbeid for Android

Så jeg begynte å lete etter noen plugins som ikke hentet den opprinnelige popup -boksen og ikke fant mye, men jeg endte opp med å finne dette Android -biblioteket:

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

Nå vet jeg bokstavelig talt ingenting om innfødt Android -utvikling, men jeg ønsket å utfordre meg selv, så jeg tenkte at jeg bare ville prøve å skrive noen brokode for dette biblioteket og gjøre det til et Android -plugin for bruk i Unity. Igjen, dette var en feil og føre til timer med frustrasjon.

Så endelig fungerte det …

Trinn 3: Lærte leksjoner

Så det er to ting jeg lærte i denne prosessen som ikke umiddelbart fremgår av bare å google hvordan du lager et Android -plugin for enhet.

Nummer én er at du sannsynligvis må få en referanse til Android -app -konteksten hvis plugin -modulen din vil gjøre noe interessant. Du kan gjøre dette ved å legge class.jar -filen fra Unity -installasjonen til Android -prosjektet som et bibliotek. Så gå til filprosjektstruktur og velg deretter avhengighetsfanen for appmodulen. Her kan du klikke på pluss -knappen for å legge til jar -filen. Gå til din Unity build, avspillingsmotorer, androidplayer, variasjoner, mono, utvikling, klasser og til slutt classes.jar. Endre omfanget til bare å kompilere. Nå kan du gjøre i en ny java -fil:

UnityPlayer.currentActivity.getApplicationContext ();

og bruk referansen der du trenger den.

Det neste rare problemet er at denne stemmefunksjonaliteten bare kan kjøres på hovedtråden, ellers får du feil. For å gjøre dette i Unity må du fortelle funksjonene og plugin -modulen om å kjøre UI -tråden som en AndroidJavaRunnable som bildet ovenfor.

Trinn 4: Sliter

På dette tidspunktet tenker jeg at jeg er en Android -ekspert, Jeg søker online for android dev-jobber, jeg bestiller Android-klistremerker og t-skjorter. Livet er godt. Nå er jeg klar til å finne ut hvordan jeg gjengir en webside i Unity. Etter å ha gjort en liten undersøkelse ser jeg at den aksepterte løsningen er å bruke en Android WebView. Dette er bare en Android-klasse som lar deg gjengi nettsteder som kan samhandles i en Android-app uten å laste alt i nettleseren. I utgangspunktet er det slik at du kan beholde brukere i appen din. Den første forretningsordenen er å se om noen har laget et enhetsplugin for dette som er åpen kildekode. Jeg prøver først denne pluginen:

github.com/gree/unity-webview

men det gjengir bare en WebView til Unity GUI -laget, så det kommer ikke til å fungere. Så finner jeg denne pluginen for VR:

github.com/IanPhilips/UnityAndroidVRBrowse …

Dette lar deg gjengi en WebView til en tekstur og til og med samhandle, noe som er flott. Jeg trodde dette var svaret til jeg prøvde det og fant ut at det var å blokkere alle mine klikk fra enhet.

Trinn 5: Tilbake til tegnebrettet

Jeg skal bare prøve å få min plugin for dette, for alt jeg egentlig trenger er å sende et bilde av nettstedet til enhet. Gjør jeg noen undersøkelser om det, finner jeg ut at jeg kan lagre et Android -lerret til et bitmap og deretter kode det til en-p.webp

Det fungerte til slutt.

Så nå får jeg et skjermbilde fra et nettsted, så la oss se hvordan det fungerer med arcore …

Det gjør den ikke.

Jeg mener jeg bruker en galaxy s7 som ikke er den nyeste telefonen, men dette WebView -stoffet fryser fortsatt hele appen og er i utgangspunktet ubrukelig. Jeg antar at det er fordi WebView og ARCore begge overbelaster hovedtråden, men jeg vet egentlig ikke. Tilbake til tegnebrettet. Hvis vi vil få dette til å fungere, må vi laste de tunge løftene til en slags server. Etter å ha googlet litt viser det seg at du kan ta et skjermbilde av et nettsted med et bibliotek for Node.js kalt WebShot som bruker Phantom JS som er en skriptbar nettleser uten hoder.

Trinn 6: Endelig kommer vi et sted

Nå må jeg finne ut hvordan i helvete å bruke Node.js….

Det viser seg at du kan lage et Node.js -skript som lytter til et bestemt portnummer, og når det får et treff, kan det returnere litt informasjon. Vi kan teste dette ut ved å lage et lite hallo -verdensskript som lytter på port 3000. Vi kan cd inn i katalogen med skriptet og kjøre det ved å gjøre node og deretter skriptnavnet. Hvis vi navigerer til vår IP -adresse og deretter port 3000 i nettleseren vår, kan vi se den returnere hei verden. Nå som jeg har et lite grep om noden, kan jeg få det til å fungere på serveren min som jeg er vert for nettstedene mine som er hawkhost.com. Jeg SSH inn på serveren min og prøver å kjøre noen hello world node.js -skript … og ingenting fungerer. Etter ytterligere noen timers roting finner jeg ut at min spesielle hosting -server bare har to porter åpne for bruk, det vil si 3000 og 12001.

Så ved å bruke disse portene og hosting -serverne mine IP kan jeg få et hallo -verdenseksempel som fungerer. Deretter installerer jeg WebShot -modulen og lager et lite skript som jeg kan sende en URL, og det vil gi meg et bilde av nettstedet på den nettadressen. Nå kan jeg starte dette nodeskriptet og sende en http POST -forespørsel fra Unity til den spesifikke IP -adressen og portnummeret til serveren min, som vil gi meg en byte -matrise som er bildet av nettstedet. Takk GUD. Nå er et annet problem når jeg lukker terminalen, prosessen avsluttes og slutter å lytte. Jeg gjør litt mer forskning og finner en modul som heter evig. NPM installeres for alltid, og nå kan jeg navigere til for alltid og starte skriptet for alltid, og det vil fortsette å kjøre til jeg logger inn og stopper det igjen.

Trinn 7: Det fungerer

Flott. Men det er ikke kult nok.

Når jeg tenker på verdien av å surfe på nettet i AR, kommer det fra tillegg av plass. Vi er ikke lenger begrenset til en enkelt skjerm, så jeg vil lage noe som lar meg visualisere søkesporet mitt foran meg. Så la oss laste den første søkesiden og deretter gjennomsøke den siden og trekke ut hvert søkeresultat som en lenke, som vi deretter kan laste inn som et bilde over hovedskjermen. Vi kan gjøre dette med et annet Node.js -skript som skraper den første siden av Google -resultatene og kjører den kontinuerlig med for alltid. Dette kan gjøres mye mer effektivt med Google Search API, men regel nummer to for dette prosjektet var ingen betalte APIer, så vi kommer til å gjøre det slik nå. Nå som vi har bildene for hver lenke, kan vi laste dem på en større skjerm hver gang vi klikker på dem og boom, har vi en fin liten nettleser her. Det er ikke fullt funksjonelt, men jeg tar det. Ok, så hvis du vil kjøre dette prosjektet selv, gå til min Github og last ned expressVPN -prosjektet:

github.com/MatthewHallberg/ARBrowserExpres…

Trinn 8: Få alt til å fungere

Åpne den i Unity og la alt kjøre lokalt på maskinen din. Først må du finne IP -adressen til maskinen din, så hvis du er på mac, holder du bare alternativet og klikker på wifi -symbolet for å avsløre IP -en din.

Gå tilbake til enhet og åpne skriptet for nettleserkontrolleren og legg inn IP -adressen din der og kopier den til utklippstavlen. Finn nodeScripts -mappen og legg den på skrivebordet, åpne mappen og endre begge utvidelsene til.js. Åpne hvert skript og endre IP -adressen til din IP. Åpne nå terminalen, og vi må installere noen ting. Installer HomeBrew hvis du ikke allerede har det.

-brygg installasjonsnode

-npm installere webshot

-npm installere flatiron

-npm installere union

-npm installere cheerio

Nå kan vi starte begge skriptene så cd inn i nodescripts -mappen og gjøre node getimage.js Og deretter åpne et nytt terminalvindu og gjøre node getlinks.js La begge terminalvinduene være i gang og gå tilbake til redaktøren. Hvis vi trykker på play, burde alt fungere bra. Vi kan også gå til fil, bygge innstillinger og trykke bygge og kjøre for å få det på telefonen vår! Hvis du vil stoppe serverne, trykker du bare på kontroll c eller kommando q for å lukke hele terminalen.

DET ER DET!