Browser web de realitate augmentată: 9 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:44

Astăzi vom trece prin crearea unui browser web de Realitate Augmentată pentru Android.

Această idee a început când ExpressVPN mi-a cerut să fac un videoclip YouTube sponsorizat. Deoarece acesta este primul meu, am vrut să fac ceva care să fie relevant pentru produsul lor. Aproape imediat m-am gândit, ohh, voi face doar un browser web de realitate augmentată, astfel încât să putem naviga pe web în RA pe un VPN. Nu poate fi atât de greu, nu? Gresit. Mi-am pus câteva limitări pentru acest proiect, deoarece am vrut să-l folosesc pentru a învăța câteva lucruri noi.

Numărul unu pe care l-am dorit să fie pentru Android deoarece fac întotdeauna lucruri cu IOS.

Numărul doi Nu am vrut să folosesc niciun API plătit, am vrut ca toată lumea să poată descărca acest proiect și să îl ruleze fără a fi nevoie să plătească pentru orice lucruri online. Deci, nu IBM Watson, nici un API Google și nimic din magazinul Unity Asset.

SĂ ÎNCEPEM!

Pasul 1: Primele lucruri mai întâi

Primul lucru pe care am vrut să-l lucrez a fost o soluție bună pentru vorbire în text, astfel încât să putem face căutările online cu vocea noastră. De asemenea, cred că vocea este o metodă excelentă de interacțiune în RA, cel puțin până când avem o soluție bună de urmărire a mâinilor. Știu că Android are unele funcții native de vorbire către text, astfel încât o căutare rapidă pe Google ne va ajuta să găsim câteva pluginuri pentru Unity.

Am întâlnit prima dată acest plugin pentru unitate:

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

Am încercat asta și a funcționat grozav. Singura problemă a fost că, atunci când îl utilizați cu ARCore, generează o casetă pop-up nativă și pare să dea fundal Unity și ajungeți să pierdeți urmărirea.

Acest lucru a fost mai puțin decât ideal.

Pasul 2: Obținerea funcției de vorbire în text pentru Android

Așa că am început să caut câteva plugin-uri care nu au afișat caseta pop-up nativă și nu au putut găsi multe, dar am ajuns să găsesc această bibliotecă Android:

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

Acum nu știu nimic despre dezvoltarea Android nativă, dar am vrut să mă provoc, așa că m-am gândit că voi încerca doar să scriu un cod bridge pentru această bibliotecă și să-l transform într-un plugin Android pentru utilizare în Unity. Din nou, aceasta a fost o greșeală la ore de frustrare.

Apoi, în cele din urmă, a funcționat …

Pasul 3: Lecții învățate

Așadar, sunt două lucruri pe care le-am învățat în acest proces, care nu sunt imediat evidente doar prin căutarea unui mod de a crea un plugin Android pentru unitate.

Numărul unu este că, probabil, va trebui să obțineți o referință la contextul aplicației Android dacă pluginul dvs. va face ceva interesant. Puteți face acest lucru adăugând fișierul classes.jar din instalarea Unity în proiectul dvs. Android ca bibliotecă. Deci, mergeți la structura proiectului de fișiere și apoi alegeți fila dependențe pentru modulul aplicației. Aici puteți face clic pe butonul plus pentru a adăuga fișierul jar. Accesați versiunea Unity, motoarele de redare, Androidplayer, variații, mono, dezvoltare, clase și, în final, classes.jar. Schimbați domeniul de aplicare pentru a compila numai. Acum, într-un nou fișier Java puteți face:

UnityPlayer.currentActivity.getApplicationContext ();

și folosiți această referință ori de câte ori aveți nevoie de ea.

Următoarea problemă ciudată este că această funcționalitate vocală poate fi rulată numai pe firul principal sau altfel veți primi erori. Pentru a face acest lucru în Unity, trebuie să spuneți funcțiilor și pluginului să ruleze pe UI Thread ca AndroidJavaRunnable, ca imaginea de mai sus.

Pasul 4: Lupte

În acest moment mă gândesc că sunt un expert în Android, Solicitez online locuri de muncă pentru dezvoltatori Android, comand autocolante și tricouri Android. Viata e buna. Acum sunt gata să trec la a afla cum să redăm o pagină web în Unity. După ce am făcut o mică cercetare, văd că soluția acceptată este utilizarea unui Android WebView. Aceasta este doar o clasă Android care vă permite să redați site-uri web care sunt interacționabile într-o aplicație Android fără a încărca totul în browser. Practic, este astfel încât să puteți păstra utilizatorii în aplicația dvs. Prima ordine de idei este să vedem dacă cineva a creat un plugin de unitate pentru acest lucru care este open source. Mai întâi încerc acest plugin:

github.com/gree/unity-webview

dar redă doar un WebView la stratul GUI Unity, astfel încât să nu funcționeze. Apoi găsesc acest plugin pentru VR:

github.com/IanPhilips/UnityAndroidVRBrowse …

acest lucru vă permite să redați un WebView într-o textură și chiar interactiv, ceea ce este grozav. Am crezut că acesta este răspunsul până când l-am încercat și am aflat că îmi blochează toate clicurile de la unitate.

Pasul 5: Înapoi la planșa de desen

Voi încerca să îmi creez pluginul pentru asta, pentru că tot ce am nevoie este să trimit o imagine a site-ului către unitate. Cercetând acest lucru, am aflat că pot salva o pânză Android într-o hartă de biți și apoi o pot codifica într-un-p.webp

În cele din urmă a funcționat.

Așa că acum pot obține o captură de ecran de pe un site web, așa că să vedem cum funcționează cu arcore …

Nu.

Adică folosesc un Galaxy S7 care nu este cel mai nou telefon, dar aceste lucruri WebView încă înghețează întreaga aplicație și practic inutilizabilă. Presupun că este pentru că WebView și ARCore ambele supraîncarcă firul principal, dar nu știu cu adevărat. Înapoi la planșă. Dacă vrem să facem acest lucru, va trebui să încărcăm greutatea pe un fel de server. După ce ați făcut unele Google, se pare că puteți face o captură de ecran a unui site web cu o bibliotecă pentru Node.js numită WebShot care utilizează Phantom JS, care este un browser fără cap scriptabil.

Pasul 6: În cele din urmă ajungem undeva

Acum trebuie să-mi dau seama cum naiba să folosesc Node.js ….

Se pare că puteți crea un script Node.js care ascultă un anumit număr de port și, când primește o lovitură, îl poate returna pe acel port. Putem testa acest lucru creând un mic script Hello World care ascultă pe portul 3000. Putem cd în directorul cu scriptul și îl putem executa făcând nodul și apoi numele scriptului. Dacă navighăm la adresa noastră IP și apoi la portul 3000 din browserul nostru, îl putem vedea cum revine Hello World. Acum, că am o mică înțelegere asupra nodului, îl pot face să funcționeze pe serverul meu că îmi găzduiesc site-urile web pe care este hawkhost.com. Am SSH pe serverul meu și încerc să rulez câteva scripturi hode world node.js … și nimic nu funcționează. După alte câteva ore de joc, aflu că serverul meu de găzduire are doar două porturi deschise pentru utilizare, adică 3000 și 12001.

Așadar, folosind acele porturi și IP-ul serverelor mele de găzduire, pot obține un exemplu de hello world. Apoi instalez modulul WebShot și creez un mic script pe care îl pot transmite o adresă URL și îmi va reda o imagine a site-ului web la adresa respectivă. Acum pot să încep acel script de nod și să trimit o cerere http POST de la Unity către IP-ul specific și numărul de port al serverului meu, care îmi va întoarce o matrice de octeți care este imaginea acelui site web. Mulțumesc DUMNEZEU. Acum, o altă problemă este când închid terminalul, procesul se termină și renunță la ascultare. Mai cercetez și găsesc un modul numit pentru totdeauna. NPM se instalează pentru totdeauna și acum pot naviga pentru totdeauna și porni pentru totdeauna scriptul și va continua să ruleze până mă conectez și îl opresc din nou.

Pasul 7: Funcționează

Grozav. Dar nu este destul de mișto.

Când mă gândesc la valoarea de navigare pe web în RA, vine din adăugarea de spațiu. Nu mai suntem limitați la un singur ecran, așa că vreau să fac ceva care să-mi permită să-mi vizualizez traseul de căutare chiar în fața mea. Deci, să încărcăm prima pagină de căutare, apoi să accesăm cu crawlere acea pagină și să extragem fiecare rezultat al căutării ca un link, pe care îl putem încărca apoi ca imagine deasupra ecranului nostru principal. Putem face acest lucru cu un alt script Node.js care răzuiește prima pagină a rezultatelor Google și îl rulează continuu pentru totdeauna. Acest lucru s-ar putea face mult mai eficient cu API-ul de căutare Google, dar regula numărul doi pentru acest proiect nu a fost API plătită, așa că o vom face așa deocamdată. Acum, că avem imaginile pentru fiecare link, le putem încărca pe un ecran mai mare de fiecare dată când facem clic pe ele și creștem, avem un mic browser frumos aici. Nu este pe deplin funcțional, dar o voi lua. Bine, deci, dacă doriți să rulați acest proiect, mergeți la Github și descărcați proiectul expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Pasul 8: Funcționarea totul

Deschideți-l în Unity și să facem totul să ruleze local pe computer. Mai întâi trebuie să găsiți adresa IP a mașinii dvs., deci dacă sunteți pe Mac, țineți opțiunea și faceți clic pe simbolul wifi pentru a vă dezvălui adresa IP.

Reveniți la unitate și deschideți scriptul controlerului browserului și introduceți adresa IP acolo și copiați-l în clipboard. Găsiți folderul nodeScripts și puneți-l pe desktop, deschideți folderul și schimbați ambele extensii în.js. Deschideți fiecare script și schimbați adresa IP la adresa dvs. IP. Acum deschideți terminalul și trebuie să instalăm câteva lucruri. Instalați HomeBrew dacă nu îl aveți deja.

-nodul de instalare a berii

-npm instalați webshot

-npm instalare flatiron

-npm instalați uniunea

-npm instala cheerio

Acum putem începe ambele scripturi, deci cd în folderul nodescripts și să facem nodul getimage.js. Apoi deschidem o nouă fereastră de terminal și să facem nodul getlinks.js. Dacă apăsăm pe play totul ar trebui să funcționeze bine. Putem, de asemenea, să accesăm fișierul, să construim setări și să lovim compilarea și să alergăm pentru a o primi pe telefonul nostru! Dacă doriți să opriți serverele, apăsați controlul c sau comanda q pentru a închide întregul terminal.

ASTA E!