Liitreaalsuse veebibrauser: 9 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:48

Täna teeme Androidi jaoks liitreaalsuse veebibrauseri loomise.

See idee sai alguse sellest, kui ExpressVPN palus mul teha sponsoreeritud YouTube'i video. Kuna see on minu esimene, tahtsin teha midagi, mis oleks nende toote jaoks asjakohane. Peaaegu kohe mõtlesin, et oh, ma teen lihtsalt liitreaalsuse veebibrauseri, et saaksime VPN -is AR -i veebis sirvida. See ei saa nii raske olla, eks? Vale. Ma seadsin endale selle projekti jaoks mõned piirangud, sest tahtsin seda kasutada uute asjade õppimiseks.

Number üks, mida ma tahtsin, et see oleks Androidi jaoks, sest teen alati asju iOS -iga.

Teine number, et ma ei soovinud kasutada ühtegi tasulist API -d, tahtsin, et kõik saaksid selle projekti lihtsalt alla laadida ja käivitada, ilma et peaksite veebis maksma. Seega pole IBM Watsonit, Google'i API -d ega midagi Unity Asset poest.

ALUSTAME!

Samm: esiteks esimesed asjad

Esimese asjana tahtsin tööle asuda hea lahendus kõneks tekstiks, et saaksime oma häälega veebis otsinguid teha. Samuti arvan, et hääl on AR -is suurepärane suhtlusmeetod, vähemalt seni, kuni meil on hea käejälgimislahendus. Ma tean, et Androidil on teatud tekstikeele funktsionaalsus, nii et kiire Google'i otsing aitab meil leida Unity jaoks pistikprogramme.

Esimest korda jõudsin ühtsuse nimel selle pistikprogrammini:

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

Proovisin seda ja see töötas suurepäraselt. Ainus probleem oli see, et kui kasutate seda koos ARCore'iga, genereerib see natiivse hüpikakna ja näib Unity'i taustal olevat ning lõpuks kaotate jälgimise.

See oli vähem kui ideaalne.

2. toiming. Kõne tekstiks töötamine Androidi jaoks

Niisiis hakkasin otsima mõnda pistikprogrammi, mis ei toonud esile oma hüpikakent ega leidnud palju, kuid leidsin lõpuks selle androidi teegi:

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

Nüüd ma ei tea sõna otseses mõttes midagi Androidi loomulikust arendamisest, kuid tahtsin endale väljakutseid esitada, nii et arvasin, et proovin lihtsalt selle raamatukogu jaoks sildkoodi kirjutada ja muuta see Unity'is kasutamiseks mõeldud Androidi pistikprogrammiks. Jällegi oli see viga ja plii tundideks pettumuseks.

Siis see lõpuks töötas…

3. samm: saadud õppetunnid

Nii et selle protsessi käigus õppisin kahte asja, mis ei ilmne kohe googeldades, kuidas ühtsuse nimel Androidi pistikprogrammi teha.

Esiteks peate tõenäoliselt viite Androidi rakenduse kontekstile, kui teie pistikprogramm teeb midagi huvitavat. Seda saate teha, lisades Unity installifailist class.jar faili oma Androidi projektile raamatukoguna. Nii et minge failiprojekti struktuuri ja valige seejärel rakenduse mooduli vahekaart sõltuvused. Siin saate jar -faili lisamiseks klõpsata plussnupul. Minge oma Unity ehituse, taasesitusmootorite, androidplayeri, variatsioonide, mono, arenduse, klasside ja lõpuks klasside juurde. Jar. Muutke ulatust ainult kompileerimiseks. Nüüd saate uues Java -failis teha järgmist.

UnityPlayer.currentActivity.getApplicationContext ();

ja kasutage seda viidet kõikjal, kus seda vajate.

Järgmine kummaline probleem on see, et seda häälfunktsiooni saab käivitada ainult põhilõngas või muidu saate vigu. Selleks, et seda Unity'is teha, peate ütlema funktsioonidele ja pistikprogrammile, et need kasutaksid kasutajaliidese lõime AndroidJavaRunnable -na nagu ülaltoodud pilt.

4. samm: võitlused

Siinkohal arvan, et olen Androidi ekspert, Kandideerin veebis androidi arendajatele, tellin android-kleebiseid ja t-särke. Elu on hea. Nüüd olen valmis jätkama nuputamist, kuidas Unity'is veebilehte renderdada. Pärast väikest uurimistööd näen, et aktsepteeritud lahendus on Android WebView kasutamine. See on lihtsalt Android-klass, mis võimaldab teil Android-rakenduse sees toimivaid veebisaite renderdada ilma kõike brauserisse laadimata. Põhimõtteliselt on see nii, et saate oma rakenduses kasutajaid hoida. Esimene tegevuskava on näha, kas keegi on selleks teinud ühtsuse pistikprogrammi, mis on avatud lähtekoodiga. Esmalt proovin seda pistikprogrammi:

github.com/gree/unity-webview

kuid see renderdab WebView ainult Unity GUI kihile, nii et see ei tööta. Siis leian selle VR -i pistikprogrammi:

github.com/IanPhilips/UnityAndroidVRBrowse…

see võimaldab teil muuta WebView tekstuuri ja selle isegi interakteeruvaks, mis on suurepärane. Ma arvasin, et see oli vastus, kuni proovisin ja sain teada, et see blokeerib kõik minu klikid ühtsusest.

Samm: tagasi joonistuslauale

Proovin selleks lihtsalt oma plugina luua, sest kõik, mida ma tõesti vajan, on saata veebisaidile pilt ühtsusele. Uurides seda, saan teada, et saan androidi lõuendi bitkaardile salvestada ja seejärel-p.webp

Lõpuks see töötas.

Nüüd saan veebisaidilt ekraanipildi, nii et vaatame, kuidas see arcore'iga töötab …

Seda ei tehta.

Ma mõtlen, et ma kasutan galaktikat s7, mis pole uusim telefon, kuid see WebView kraam külmutab endiselt kogu rakenduse ja on põhimõtteliselt kasutamiskõlbmatu. Ma eeldan, et see on sellepärast, et WebView ja ARCore koormavad mõlemad põhilõnga üle, kuid ma ei tea tegelikult. Tagasi joonistuslaua juurde. Kui me tahame seda tööd teha, peame koormate tõstmise mingisse serverisse laadima. Pärast mõningast googeldamist selgub, et saate teha ekraanipildi veebisaidilt, millel on Node.js raamatukogu nimega WebShot, mis kasutab Phantom JS -i, mis on skripteeritav peata brauser.

6. samm: lõpuks jõuame kuhugi

Nüüd pean välja mõtlema, kuidas kurat Node.js -i kasutada….

Selgub, et saate teha skripti Node.js, mis kuulab teatud pordi numbrit ja kui see selles pordis tabab, võib see teatud teavet tagasi saata. Saame seda testida, luues väikese teremaailma skripti, mis kuulab porti 3000. Saame skriptiga kataloogi CD -d käivitada ja seda käivitada, tehes sõlme ja seejärel skripti nime. Kui navigeerime oma IP -aadressile ja seejärel brauseris porti 3000, näeme, et see naaseb tere maailmale. Nüüd, kui mul on sõlmest väike arusaam, saan selle tööle oma serveris, kus ma hostin oma veebisaite, millel on hawkhost.com. Sisestan oma serverisse SSH ja proovin käivitada mõned teremaailma node.js skriptid … ja miski ei tööta. Pärast veel mõnetunnist jamamist avastan, et minu konkreetsel hostiserveril on kasutamiseks avatud ainult kaks porti, st 3000 ja 12001.

Nii et kasutades neid sadamaid ja oma hostimisserverite IP -d, saan näite tervest maailmast. Järgmisena installin WebShot mooduli ja loon väikese skripti, mille kaudu saan edastada URL -i ja see tagastab mulle selle veebisaidi pildi sellel veebiaadressil. Nüüd võin selle sõlmeskripti käivitada ja saata Unitylt http POST -päringu oma serveri konkreetsele IP -aadressile ja pordi numbrile, mis tagastab mulle baidimassiivi, mis on selle veebisaidi pilt. Tänan Jumalat. Nüüd on teine probleem see, et kui ma terminali sulgen, lõpeb protsess ja lõpetan kuulamise. Ma uurin veel ja leian mooduli nimega igavesti. NPM installitakse igavesti ja nüüd saan skripti igavesti käivitada ja igavesti käivitada ning see töötab edasi, kuni login sisse ja peatan selle uuesti.

Samm: see toimib

Suurepärane. Kuid see pole piisavalt lahe.

Kui ma mõtlen AR -i veebis sirvimise väärtusele, tuleneb see ruumi lisamisest. Me ei piirdu enam ühe ekraaniga, nii et ma tahan teha midagi, mis võimaldab mul visualiseerida oma otsingurada otse minu ees. Laadime siis selle esimese otsingulehe ja seejärel indekseerime seda lehte ning ekstraheerime iga otsingutulemi lingina, mille saame seejärel oma põhiekraani kohal pildina laadida. Seda saame teha teise Node.js skriptiga, mis kraabib Google'i tulemuste esimese lehe ja käivitab selle pidevalt koos igaveseks. Seda saaks teha Google'i otsingu API -ga palju tõhusamalt, kuid selle projekti reegel number kaks ei olnud tasulised API -d, nii et praegu teeme seda niimoodi. Nüüd, kui meil on iga lingi pildid, saame need iga kord klõpsates ja buumides suuremale ekraanile laadida, on meil siin tore väike brauser. See pole täielikult töökorras, kuid võtan selle vastu. Olgu, nii et kui soovite seda projekti ise juhtida, minge minu Githubisse ja laadige alla expressVPN projekt:

github.com/MatthewHallberg/ARBrowserExpres…

8. toiming: pange kõik tööle

Avage see Unity'is ja laseme kõik teie arvutis kohapeal töötada. Kõigepealt peate leidma oma masina IP -aadressi, nii et kui olete Macis, hoidke lihtsalt nuppu ja klõpsake oma IP paljastamiseks WiFi -sümbolil.

Minge tagasi ühtsusesse ja avage brauseri kontrolleri skript ning sisestage sinna oma IP -aadress ja kopeerige see lõikelauale. Otsige üles kaust nodeScripts ja pange see töölauale, avage kaust ja muutke mõlemad laiendid.js -ks. Avage iga skript ja muutke IP -aadress oma IP -aadressiks. Nüüd avage terminal ja peame mõned asjad installima. Installige HomeBrew, kui teil seda veel pole.

-pruuli paigaldussõlm

-npm installige veebipilt

-npm paigaldage tasane

-npm installiliit

-npm installige cheerio

Nüüd saame käivitada mõlemad skriptid nii cd -ga kausta nodescripts ja teha sõlme getimage.js. Seejärel avada uus terminaliaken ja teha sõlm getlinks.js Jätke mõlemad terminaliaknad töötama ja naaske redaktorisse. Kui vajutame nuppu Play, peaks kõik toimima. Võime minna ka faili, koostada seadeid ja klõpsata ehitamisel ja käivitamisel, et see oma telefoni saada! Kui soovite serverid peatada, klõpsake kogu terminali sulgemiseks lihtsalt nuppu c või käsku q.

SEE ON!