Web preglednik proširene stvarnosti: 9 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:36

Danas ćemo proći kroz izradu web preglednika proširene stvarnosti za Android.

Ova je ideja 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 preglednik s proširenom stvarnošću kako bismo mogli pregledavati web u AR -u na VPN -u. Ne može biti tako teško, zar ne? Pogrešno. Za ovaj sam projekt postavio neka ograničenja jer sam ga htio iskoristiti za učenje nekih novih stvari.

Prvi sam želio da to bude za Android jer uvijek radim stvari s 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 ništa iz trgovine Unity Asset.

ZAPOČNIMO!

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 pretraživati na internetu svojim glasom. Također mislim da je glas izvrsna 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…

Ovo sam isprobao 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 pozadina Unityja te na kraju gubite praćenje.

Ovo je bilo manje od idealnog.

2. korak: 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 razvoju izvornog Androida, ali htio sam se izazvati pa sam zaključio da ću samo pokušati napisati neki most kod za ovu biblioteku i pretvoriti ga u dodatak za Android za upotrebu u Unityju. Opet je to bila pogreš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 na kontekst Android aplikacije ako će vaš dodatak učiniti nešto zanimljivo. To možete učiniti dodavanjem datoteke classes.jar iz Unity instalacije u vaš Android projekt kao biblioteku. Stoga idite na datotečnu strukturu projekta, a zatim odaberite karticu ovisnosti za modul aplikacije. Ovdje možete kliknuti gumb plus za dodavanje jar datoteke. Idite na Unity build, strojeve 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 upotrijebite 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 pogreške. Da biste to učinili u Unityju, 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 stručnjak za Android, 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 što sam malo istražio, 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 je poslovni zadatak vidjeti je li netko za to napravio open source dodatak otvorenog koda. Prvo sam isprobao ovaj dodatak:

github.com/gree/unity-webview

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

github.com/IanPhilips/UnityAndroidVRBrowse…

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

Korak 5: Natrag na ploču za crtanje

Pokušat ću za to napraviti svoj dodatak, jer sve što zaista trebam 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

Napokon 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 s WebView -a 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. Natrag na ploču za crtanje. Ako želimo da ovo uspije, morat ćemo prenijeti teške terete na neku vrstu poslužitelja. Nakon što ste malo proguglali, pokazalo se da možete napraviti snimku zaslona web stranice s bibliotekom za Node.js pod nazivom WebShot koja koristi Phantom JS koji je skriptni preglednik bez glave.

Korak 6: Napokon 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 kad dobije udarac na taj port može vratiti neke podatke. To možemo isprobati 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 naziv skripte. Ako dođemo do naše IP adrese, a zatim do priključka 3000 u svom pregledniku, možemo vidjeti da se vraća hello world. Sad kad se malo razumijem u čvor, mogu uspjeti na svom poslužitelju da hostiram svoje web stranice na kojima je hawkhost.com. SSH ulazim na 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 priključka otvorena za korištenje, to su 3000 i 12001.

Tako da pomoću tih portova i IP -a mojih hosting poslužitelja mogu dobiti radni primjer zdravog svijeta. Zatim instaliram WebShot modul i stvaram malu skriptu kojoj mogu proslijediti URL i ona će mi vratiti sliku web stranice na toj web adresi. Sada mogu pokrenuti tu skriptu čvora i poslati http POST zahtjev od Unityja na određeni IP i broj porta mog poslužitelja koji će mi vratiti niz bajtova koji je slika te web stranice. Hvala Bogu. Drugi problem je kad zatvorim terminal, proces završava i prestaje slušati. Još malo istražujem i pronalazim modul koji se zove zauvijek. NPM instalirati zauvijek i sada se mogu kretati zauvijek i zauvijek pokrenuti skriptu, a ona će se nastaviti prikazivati sve dok se ne prijavim i ne zaustavim.

Korak 7: Radi

Sjajno. Ali nije dovoljno cool.

Kad razmišljam o vrijednosti pregledavanja weba u AR -u, to dolazi iz dodatka prostora. Više nismo ograničeni na jedan zaslon pa želim napraviti nešto što mi omogućuje 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 zaslona. To možemo učiniti s drugom skriptom Node.js koja briše prvu stranicu Googleovih rezultata i neprestano je pokreće. To bi se moglo učiniti 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 zaslon svaki put kada ih kliknemo i pokrenemo, imamo lijep mali preglednik ovdje. Nije u potpunosti funkcionalan, ali prihvatit ću ga. U redu, pa ako želite sami pokrenuti ovaj projekt, idite na moj Github i preuzmite projekt expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Korak 8: Neka sve funkcionira

Otvorite ga u Unityju i neka sve radi lokalno na vašem računalu. Prvo morate pronaći IP adresu svog uređaja, pa ako ste na Mac -u, samo držite opciju i kliknite simbol wifi da biste otkrili svoj IP.

Vratite se jedinstvu i otvorite skriptu kontrolera preglednika, 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 oba proširenja 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 instalirati cheerio

Sada možemo pokrenuti obje skripte pa cd u mapu nodescripts i učiniti čvor getimage.js. Zatim otvoriti novi prozor terminala i napraviti č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 and run da je preuzmemo na telefon! Ako želite zaustaviti poslužitelje, samo pritisnite control c ili naredbu q da zatvorite cijeli terminal.

TO JE TO!