Spletni brskalnik razširjene resničnosti: 9 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:05

Danes bomo izdelali spletni brskalnik z razširjeno resničnostjo za Android.

Ta ideja se je začela, ko me je ExpressVPN prosil, naj posnamem sponzoriran videoposnetek YouTube. Ker je to moj prvi, sem želel narediti nekaj, kar je pomembno za njihov izdelek. Precej takoj sem pomislil, oh, naredil bom samo spletni brskalnik z razširjeno resničnostjo, da bomo lahko brskali po spletu v AR v VPN -ju. Ne more biti tako težko, kajne? Napačno. Za ta projekt sem si postavil nekaj omejitev, ker sem ga želel uporabiti za učenje novih stvari.

Številka ena, za katero sem želel, da je za Android, ker vedno delam stvari z IOS -om.

Drugič, nisem želel uporabljati plačljivih API -jev, želel sem, da bi vsi lahko samo prenesli ta projekt in ga zagnali, ne da bi morali plačati za kakršne koli stvari na spletu. Torej ne IBM Watson, ne Googlov API in nič iz trgovine Unity Asset.

ZAČNIMO!

1. korak: Najprej prve stvari

Prva stvar, s katero sem želel začeti delati, je bila dobra rešitev za govor v besedilo, da smo lahko iskali po spletu z glasom. Mislim tudi, da je glas odlična metoda interakcije v AR, dokler ne dobimo dobre rešitve za sledenje rokam. Vem, da ima Android nekaj funkcij izvornega govora v besedilo, zato nam bo hitro iskanje v Googlu pomagalo najti nekaj vtičnikov za Unity.

Za enotnost sem prvič naletel na ta vtičnik:

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

To sem preizkusil in se je odlično obnesel. Edina težava je bila v tem, da ko ga uporabljate z ARCore, ustvari domače pojavno okno in zdi se, da je v ozadju Unity, zato na koncu izgubite sledenje.

To je bilo manj kot idealno.

2. korak: Prevajanje govora v besedilo za Android

Tako sem začel iskati nekaj vtičnikov, ki niso prikazali domačega pojavnega okna in niso mogli najti veliko, vendar sem na koncu našel to knjižnico Android:

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

Zdaj ne vem dobesedno nič o razvoju domačega Androida, vendar sem se želel izzvati, zato sem mislil, da bom le poskusil napisati nekaj mostne kode za to knjižnico in jo spremeniti v vtičnik za Android za uporabo v Unityju. do ur razočaranja.

Potem je končno uspelo …

3. korak: Naučene lekcije

V tem procesu sem se naučil dve stvari, ki nista takoj razvidni iz googlanja, kako narediti vtičnik za Android za enotnost.

Prva stvar je, da se boste verjetno morali sklicevati na kontekst aplikacije Android, če bo vaš vtičnik naredil kaj zanimivega. To lahko storite tako, da datoteko classes.jar iz namestitve Unity dodate v projekt Android kot knjižnico. Pojdite na datotečno strukturo projekta in nato izberite zavihek odvisnosti za modul aplikacije. Tukaj lahko kliknete gumb plus, da dodate datoteko jar. Pojdite na svoj Unity build, predvajalnike za predvajanje, androidplayer, različice, mono, razvoj, razrede in na koncu classes.jar. Spremenite obseg samo za prevajanje. Zdaj lahko v novi datoteki java naredite naslednje:

UnityPlayer.currentActivity.getApplicationContext ();

in uporabite to referenco, kadar koli jo potrebujete.

Naslednja čudna težava je, da se ta glasovna funkcija lahko izvaja samo v glavni niti, sicer boste dobili napake. Če želite to narediti v Unityju, morate povedati, da funkcije in vtičnik delujejo v niti uporabniškega vmesnika kot AndroidJavaRunnable, kot je prikazano na zgornji sliki.

4. korak: Boji

Na tej točki mislim, da sem strokovnjak za Android, Na spletu se prijavljam za delovna mesta android dev, naročam nalepke in majice za android. Življenje je dobro. Zdaj sem pripravljen preiti na ugotovitev, kako upodobiti spletno stran v Unityju. Po kratkem raziskovanju vidim, da je sprejeta rešitev uporaba Android WebView. To je le razred Android, ki vam omogoča upodabljanje spletnih mest, ki so medsebojno delujoča v aplikaciji Android, ne da bi vse naložili v brskalnik. V bistvu je tako, da lahko obdržite uporabnike v svoji aplikaciji. Prva naloga je preveriti, ali je kdo za to izdelal odprtokodni vtičnik. Najprej preizkusim ta vtičnik:

github.com/gree/unity-webview

vendar upodobi samo WebView na plast grafičnega vmesnika Unity, tako da to ne bo delovalo. Potem najdem ta vtičnik za VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

to vam omogoča, da upodobite WebView v teksturo in je celo interaktivno, kar je super. Mislil sem, da je to odgovor, dokler nisem poskusil in ugotovil, da blokira vse moje klike iz enotnosti.

5. korak: Nazaj na risalno desko

Za to se bom poskušal vključiti v vtičnik, ker vse, kar resnično potrebujem, je, da sliko spletnega mesta pošljem v enotnost. Med raziskovanjem tega sem ugotovil, da lahko androidno platno shranim v bitno sliko, nato pa jo kodiram v-p.webp

Končno je uspelo.

Zdaj dobim posnetek zaslona s spletnega mesta, zato poglejmo, kako deluje z arcore …

Ne gre.

Mislim, uporabljam galaxy s7, ki ni najnovejši telefon, vendar te stvari WebView še vedno zamrznejo celotno aplikacijo in so v bistvu neuporabne. Predvidevam, da zato, ker WebView in ARCore preobremenjujeta glavno nit, vendar v resnici ne vem. Nazaj na risalno desko. Če želimo to uresničiti, bomo morali težka dela prenesti na kakšen strežnik. Po Googlu se izkaže, da lahko posnamete posnetek zaslona spletnega mesta s knjižnico za Node.js, imenovano WebShot, ki uporablja Phantom JS, ki je skriptni brskalnik brez glave.

6. korak: Končno smo nekam prišli

Zdaj moram ugotoviti, kako za vraga uporabljati Node.js….

Izkazalo se je, da lahko naredite skript Node.js, ki posluša določeno številko vrat in ko ga zadene na ta vrata, lahko vrne nekaj informacij. To lahko preizkusimo tako, da ustvarimo mali svetovni skript hello, ki posluša na vratih 3000. Lahko ga vnesemo v imenik s skriptom in ga zaženemo tako, da naredimo vozlišče in nato ime skripta. Če se pomaknemo do našega naslova IP in nato v brskalniku vrat 3000, lahko vidimo, da se vrne hello world. Zdaj, ko sem malo razumel vozlišče, lahko delam na svojem strežniku, da gostim svoja spletna mesta, na katerih je hawkhost.com. V svoj strežnik vnesem SSH in poskusim zagnati nekaj scenarijev hello world node.js … in nič ne deluje. Po nekaj urah prepiranja sem ugotovil, da ima moj strežnik za gostovanje odprta samo dve vrati, to sta 3000 in 12001.

Tako lahko z uporabo teh vrat in gostiteljskih strežnikov IP dobim dober svetovni primer. Nato namestim modul WebShot in ustvarim majhen skript, ki mu lahko posredujem URL in mi bo vrnil sliko spletnega mesta na tem spletnem naslovu. Zdaj lahko zaženem skript vozlišča in pošljem zahtevo http POST iz Unityja na določen IP in številko vrat mojega strežnika, ki mi bo vrnil bajtno matriko, ki je podoba tega spletnega mesta. Hvala BOGU. Zdaj je še ena težava, ko zaprem svoj terminal, se postopek konča in preneha poslušati. Še malo raziskujem in najdem modul, imenovan za vedno. NPM namesti za vedno in zdaj se lahko pomaknem do večno in za vedno zaženem skript, ki se bo nadaljeval, dokler se ne prijavim in ga znova ustavim.

7. korak: Deluje

Super. Ampak to ni dovolj kul.

Ko pomislim na vrednost brskanja po spletu v AR, prihaja iz dodatka prostora. Nismo več omejeni na en sam zaslon, zato želim narediti nekaj, kar mi omogoča, da vizualiziram svojo iskalno pot tik pred seboj. Naložimo torej tisto prvo stran za iskanje in nato plazimo to stran ter izvlecimo vsak rezultat iskanja kot povezavo, ki jo lahko nato naložimo kot sliko nad naš glavni zaslon. To lahko storimo z drugim skriptom Node.js, ki strga prvo stran Googlovih rezultatov in jo izvaja neprekinjeno z večno. To bi lahko naredili veliko bolj učinkovito z Googlovim API -jem za iskanje, vendar pravilo št. 2 za ta projekt ni bilo plačljivo API -je, zato bomo zaenkrat to storili tako. Zdaj, ko imamo slike za vsako povezavo, jih lahko naložimo na večji zaslon vsakič, ko jih kliknemo in se dvignemo, imamo tukaj lep mali brskalnik. Ni popolnoma funkcionalen, vendar ga bom vzel. V redu, če želite sami voditi ta projekt, pojdite na moj Github in prenesite projekt expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

8. korak: Naj vse deluje

Odprite ga v Unityju in zaženimo, da se na vašem računalniku vse izvaja lokalno. Najprej morate najti naslov IP vaše naprave, zato, če uporabljate mac, pridržite možnost in kliknite simbol wifi, da razkrijete svoj IP.

Vrnite se k enoti in odprite skript krmilnika brskalnika, vnesite svoj naslov IP in ga kopirajte v odložišče. Poiščite mapo nodeScripts in jo postavite na namizje, odprite mapo in obe razširitvi spremenite v.js. Odprite vsak skript in spremenite naslov IP v svoj IP. Zdaj odprite terminal in nekaj stvari moramo namestiti. Namestite HomeBrew, če ga še nimate.

-brew namestitveno vozlišče

-npm namestite webshot

-npm install flatiron

-npm install union

-npm namestite cheerio

Sedaj lahko zaženemo oba skripta tako cd v mapo nodescripts in naredimo vozlišče getimage.js. Nato odpremo novo terminalsko okno in naredimo vozlišče getlinks.js Pustimo oba terminalska okna v teku in se vrnemo v urejevalnik. Če pritisnemo play, bi moralo vse delovati v redu. Prav tako lahko gremo v datoteko, nastavitve gradnje in pritisnemo build and run, da jo dobimo v telefonu! Če želite ustaviti strežnike, samo pritisnite control c ali ukaz q, da zaprete celoten terminal.

TO JE TO!