Web pretraživač proširene stvarnosti: 9 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:07

Danas ćemo proći kroz izradu web pretraživača proširene stvarnosti za Android.

Ova ideja je nastala kada me ExpressVPN zamolio da napravim sponzorirani YouTube video. Budući da mi je ovo prvi, htio sam učiniti nešto što je relevantno za njihov proizvod. Ubrzo sam pomislio, oh, samo ću napraviti web pretraživač proširene stvarnosti kako bismo mogli pretraživati web u AR -u na VPN -u. Ne može biti tako teško, zar ne? Pogrešno. Postavio sam sebi neka ograničenja za ovaj projekt jer sam ga htio iskoristiti za učenje nekih novih stvari.

Broj jedan sam želio da to bude za Android jer uvijek radim stvari sa IOS -om.

Drugo, nisam želio koristiti plaćene API -je, želio sam da svi mogu samo preuzeti ovaj projekt i pokrenuti ga bez plaćanja bilo kakvih stvari na internetu. Dakle, nema IBM Watsona, nema Google API -ja i nema ništa iz trgovine Unity Asset.

HAJDE DA POČNEMO!

Korak 1: Prvo prve stvari

Prvo što sam htio započeti s radom bilo je dobro rješenje za govor u tekst kako bismo mogli glasovnim pretraživanjem na internetu. Takođe mislim da je glas odlična metoda interakcije u AR -u, barem dok ne budemo imali dobro rješenje za praćenje ruku. Znam da Android ima neke funkcije izvornog govora u tekst, pa će nam brzo Google pretraživanje pomoći da pronađemo neke dodatke za Unity.

Prvi put sam naišao na ovaj dodatak za jedinstvo:

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

Isprobao sam ovo i odlično je funkcioniralo. Jedini problem je bio u tome što kada ga koristite s ARCore -om, on generira izvorni skočni okvir i čini se da podržava Unity, a vi na kraju gubite praćenje.

To je bilo manje od idealnog.

Korak 2: Prevođenje govora u tekst za Android

Tako sam počeo tražiti neke dodatke koji nisu otvorili izvorni skočni okvir i nisu mogli pronaći mnogo, ali na kraju sam pronašao ovu android biblioteku:

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

Sada ne znam doslovno ništa o izvornom Android razvoju, ali sam htio izazvati sebe pa sam zaključio da ću samo pokušati napisati neki Bridge kod za ovu biblioteku i pretvoriti ga u Android dodatak za upotrebu u Unityju. Opet je ovo bila greška do sati frustracije.

Onda je napokon upalilo …

Korak 3: Naučene lekcije

Dakle, dvije stvari koje sam naučio u ovom procesu nisu jasne iz googlanja kako napraviti dodatak za Android za jedinstvo.

Prvo, vjerojatno ćete morati dobiti referencu o kontekstu Android aplikacije ako će vaš dodatak učiniti bilo što zanimljivo. To možete učiniti dodavanjem datoteke classes.jar iz Unity instalacije u vaš Android projekt kao biblioteku. Stoga idite na datoteku struktura projekta, a zatim odaberite karticu ovisnosti za modul aplikacije. Ovdje možete pritisnuti dugme plus za dodavanje jar datoteke. Idite na Unity build, mehanizme za reprodukciju, androidplayer, varijacije, mono, razvoj, klase i na kraju classes.jar. Promijenite opseg samo za kompajliranje. Sada u novoj java datoteci možete učiniti:

UnityPlayer.currentActivity.getApplicationContext ();

i koristite tu referencu gdje god vam zatreba.

Sljedeći čudan problem je što se ova glasovna funkcija može pokrenuti samo na glavnoj niti ili ćete dobiti greške. Da biste to učinili u Unity -u, morate reći funkcijama i dodatku da rade na niti korisničkog sučelja kao AndroidJavaRunnable kao na gornjoj slici.

Korak 4: Borbe

U ovom trenutku mislim da sam Android stručnjak, Na mreži se prijavljujem za Android dev poslove, naručujem android naljepnice i majice. Život je dobar. Sada sam spreman prijeći na pronalaženje načina prikazivanja web stranice u Unityju. Nakon malo istraživanja vidim da je prihvaćeno rješenje korištenje Android WebView -a. Ovo je samo Android klasa koja vam omogućuje iscrtavanje web stranica koje se mogu međusobno aktivirati unutar Android aplikacije bez učitavanja svega u pregledniku. U osnovi, tako možete zadržati korisnike u svojoj aplikaciji. Prvi posao je da se vidi da li je neko za to napravio open source dodatak otvorenog koda. Prvo sam isprobao ovaj dodatak:

github.com/gree/unity-webview

ali samo prikazuje WebView na sloju Unity GUI tako da to neće funkcionirati. Zatim pronalazim ovaj dodatak za VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

ovo vam omogućava da WebView pretvorite u teksturu, pa čak i u interakciju, što je sjajno. Mislio sam da je ovo odgovor dok nisam pokušao i otkrio da blokira sve moje klikove od jedinstva.

Korak 5: Natrag na ploču za crtanje

Za to ću samo pokušati napraviti svoj dodatak, jer sve što mi zaista treba je poslati sliku web stranice jedinstvu. Istražujući to, otkrivam da mogu spremiti androidno platno na bitmapu, a zatim ga kodirati u-p.webp

Konačno je upalilo.

Tako da sada mogu dobiti snimak zaslona s web stranice, pa da vidimo kako to funkcionira s arcoreom …

Nije.

Mislim, koristim galaxy s7 koji nije najnoviji telefon, ali ove stvari o WebViewu i dalje zamrzavaju cijelu aplikaciju i u osnovi su neupotrebljive. Pretpostavljam da je to zato što i WebView i ARCore preopterećuju glavnu nit, ali zapravo ne znam. Nazad na ploču za crtanje. Ako želimo da ovo uspije, morat ćemo prenijeti teške terete na neku vrstu servera. Nakon što ste malo proguglali, pokazalo se da možete napraviti snimak zaslona web stranice s bibliotekom za Node.js pod nazivom WebShot koja koristi Phantom JS koji je skriptni pretraživač bez glave.

Korak 6: Konačno stižemo negdje

Sada moram shvatiti kako dovraga koristiti Node.js….

Ispostavilo se da možete napraviti Node.js skriptu koja osluškuje određeni broj porta i kada dobije udarac na taj port može vratiti neke informacije. Ovo možemo testirati stvaranjem male hello world skripte koja sluša na portu 3000. Možemo ubaciti CD u direktorij sa skriptom i pokrenuti ga radeći čvor, a zatim ime skripte. Ako se pomaknemo do naše IP adrese, a zatim porta 3000 u svom pregledniku, možemo vidjeti da se vraća hello world. Sad kad se malo razumijem u čvor, mogu ga pokrenuti na poslužitelju da hostiram svoje web stranice na kojima je hawkhost.com. Ubacujem SSH u svoj poslužitelj i pokušavam pokrenuti nekoliko hello world node.js skripti … i ništa ne radi. Nakon još nekoliko sati petljanja saznajem da moj poslužitelj za hosting ima samo dva porta otvorena za upotrebu, to su 3000 i 12001.

Dakle, koristeći te portove i IP adrese svojih hosting servera, mogu dobiti svjetski primjer rada. Zatim instaliram WebShot modul i stvaram malu skriptu kojoj mogu proslijediti URL i koja će mi vratiti sliku web stranice na toj web adresi. Sada mogu pokrenuti tu skriptu čvora i poslati http POST zahtjev od Unity -a na određenu IP adresu i broj porta mog servera koji će mi vratiti niz bajtova koji je slika te web stranice. Hvala Bogu. Drugi problem je kad zatvorim terminal, proces se završava i prestaje slušati. Još malo istražujem i pronalazim modul koji se zove zauvijek. NPM se instalira zauvijek i sada se mogu kretati zauvijek i zauvijek pokrenuti skriptu i ona će se nastaviti izvoditi sve dok se ne prijavim i ponovo zaustavim.

Korak 7: Radi

Odlično. Ali to nije dovoljno kul.

Kad razmišljam o vrijednosti pregledavanja weba u AR -u, to dolazi iz dodatka prostora. Više nismo ograničeni na jedan ekran pa želim napraviti nešto što mi omogućava da vizualiziram svoj trag pretraživanja ispred sebe. Pa učitajmo tu prvu stranicu za pretraživanje, a zatim indeksiramo tu stranicu i izdvojimo svaki rezultat pretraživanja kao vezu, koju tada možemo učitati kao sliku iznad našeg glavnog ekrana. To možemo učiniti s drugom skriptom Node.js koja struže prvu stranicu Googleovih rezultata i neprestano je pokreće. To bi se moglo učiniti mnogo učinkovitije s Googleovim API -jem za pretraživanje, ali pravilo broj dva za ovaj projekt nije bilo plaćeno API -jevo, pa ćemo to za sada učiniti ovako. Sada kada imamo slike za svaku vezu, možemo ih učitati na veći ekran svaki put kada ih kliknemo i pokrenemo, imamo lijep mali preglednik ovdje. Nije potpuno funkcionalan, ali prihvatit ću ga. U redu, pa ako želite sami pokrenuti ovaj projekt, idite na moj Github i preuzmite expressVPN projekt:

github.com/MatthewHallberg/ARBrowserExpres…

Korak 8: Neka sve funkcionira

Otvorite ga u Unityju i neka sve radi lokalno na vašem računaru. Prvo morate pronaći IP adresu svoje mašine, pa ako ste na Mac -u, samo zadržite opciju i kliknite simbol wifi da biste otkrili svoj IP.

Vratite se jedinstvu i otvorite skriptu kontrolera pregledača i tamo unesite svoju IP adresu i kopirajte je u međuspremnik. Pronađite mapu nodeScripts i stavite je na radnu površinu, otvorite mapu i promijenite obje ekstenzije u.js. Otvorite svaku skriptu i promijenite IP adresu u svoju IP. Sada otvorite terminal i moramo instalirati neke stvari. Instalirajte HomeBrew ako ga već nemate.

-brew instalacijski čvor

-npm install webshot

-npm install flatiron

-npm install union

-npm install cheerio

Sada možemo pokrenuti oba skripta, dakle cd u mapu nodescripts i učiniti čvor getimage.js. Zatim otvoriti novi prozor terminala i učiniti čvor getlinks.js Ostavite oba prozora terminala aktivnim i vratite se u uređivač. Ako pritisnemo play, sve bi trebalo funkcionirati. Također možemo otići u datoteku, postaviti postavke i pritisnuti build i run da je preuzmemo na telefon! Ako želite zaustaviti poslužitelje, samo pritisnite control c ili naredite q da zatvorite cijeli terminal.

TO JE TO!