Webový prehliadač s rozšírenou realitou: 9 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:59

Dnes si prejdeme vytvorením webového prehliadača pre rozšírenú realitu pre Android.

Táto myšlienka začala, keď ma ExpressVPN požiadal, aby som urobil sponzorované video na YouTube. Pretože je to môj prvý, chcel som urobiť niečo, čo je relevantné pre ich produkt. Hneď som si pomyslel, ohh, urobím webový prehliadač s rozšírenou realitou, aby sme mohli prehliadať web v AR prostredníctvom VPN. To nemôže byť také ťažké, však? Omyl. Nastavil som si pre tento projekt určité obmedzenia, pretože som ho chcel použiť na naučenie sa nových vecí.

Číslo jedna, chcel som, aby to bolo pre Android, pretože vždy robím veci s IOS.

Po druhé, nechcel som používať žiadne platené rozhrania API, chcel som, aby si každý mohol stiahnuť tento projekt a spustiť ho bez toho, aby musel za akékoľvek položky platiť online. Takže žiadny IBM Watson, žiadne Google API a nič z obchodu Unity Asset.

ZAČNIME!

Krok 1: Najskôr najskôr

Prvá vec, ktorú som chcel začať používať, bolo dobré riešenie pre prevod reči na text, aby sme mohli online vyhľadávanie vykonávať pomocou hlasu. Tiež si myslím, že hlas je skvelá metóda interakcie v AR, prinajmenšom dovtedy, kým nebudeme mať dobré riešenie na sledovanie rúk. Viem, že Android má natívnu funkciu prevodu textu na text, takže rýchle vyhľadávanie v službe Google nám pomôže nájsť niektoré doplnky pre Unity.

K tomuto doplnku som prvýkrát prišiel kvôli jednote:

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

Skúsil som to a funguje to skvele. Jediným problémom bolo, že keď ho použijete s ARCore, vygeneruje natívne vyskakovacie okno a zdá sa, že na pozadí Unity a stratíte sledovanie.

Toto bolo menej ako ideálne.

Krok 2: Práca s rečou textu pre Android

Začal som hľadať niektoré doplnky, ktoré nevyvolali pôvodné vyskakovacie okno a nemohli toho veľa nájsť, ale nakoniec som našiel túto knižnicu pre Android:

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

Teraz neviem doslova nič o natívnom vývoji systému Android, ale chcel som sa napadnúť, a tak som si povedal, že by som skúsil napísať nejaký premosťovací kód pre túto knižnicu a premeniť ho na doplnok Android pre použitie v Unity. Opäť to bola chyba a podnet hodiny frustrácie.

Potom to konečne fungovalo…

Krok 3: Získané ponaučenia

V tomto procese som sa teda naučil dve veci, ktoré nie sú hneď zrejmé z googlenia, ako vytvoriť doplnok Android pre jednotu.

Po prvé, pravdepodobne budete potrebovať odkaz na kontext aplikácie pre Android, ak váš doplnok urobí niečo zaujímavé. Môžete to urobiť pridaním súboru Class.jar z vašej inštalácie Unity do projektu Android ako knižnice. Prejdite teda na štruktúru projektu súboru a potom vyberte kartu závislostí pre modul aplikácie. Tu môžete kliknutím na tlačidlo plus pridať súbor jar. Prejdite na svoju zostavu Unity, motory na prehrávanie, androidplayer, variácie, mono, vývoj, triedy a nakoniec Class.jar. Zmeňte rozsah iba na kompiláciu. Teraz v novom súbore java môžete urobiť:

UnityPlayer.currentActivity.getApplicationContext ();

a použite túto referenciu, kedykoľvek ju budete potrebovať.

Ďalším podivným problémom je, že túto hlasovú funkciu je možné spustiť iba v hlavnom vlákne, inak dôjde k chybám. Aby ste to urobili v Unity, musíte povedať funkciám a doplnku, aby bežal na vlákne používateľského rozhrania ako AndroidJavaRunnable, ako je to na obrázku vyššie.

Krok 4: Bojuje

V tomto mieste si myslím, že som expert na Android, Prihlasujem sa online na úlohy vývojára pre Android, objednávam nálepky a tričká pre Android. Život je dobrý. Teraz som pripravený prejsť na to, ako vykresliť webovú stránku v Unity. Po troche skúmania vidím, že akceptovaným riešením je použiť Android WebView. Toto je iba trieda Android, ktorá vám umožňuje vykresľovať webové stránky, ktoré sú v aplikácii pre Android interaktívne, bez načítania všetkého do prehliadača. V zásade je to tak, že môžete ponechať používateľov vo svojej aplikácii. Prvá vec, ktorú musíte urobiť, je zistiť, či niekto vytvoril doplnok Unity na tento účel, ktorý je open source. Najprv vyskúšam tento doplnok:

github.com/gree/unity-webview

ale vykresľuje iba WebView do vrstvy GUI Unity, takže to nebude fungovať. Potom nájdem tento doplnok pre VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

to vám umožňuje vykresliť WebView na textúru a dokonca ju interagovať, čo je skvelé. Myslel som, že to bola odpoveď, kým som to neskúsil a nezistil, že blokuje všetky moje kliknutia od jednoty.

Krok 5: Späť na rysovaciu dosku

Len sa na to pokúsim vytvoriť svoj doplnok, pretože všetko, čo skutočne potrebujem, je poslať obrázok webovej stránky do jednoty. Keď to trochu skúmam, zisťujem, že môžem uložiť plátno Androidu na bitmapu a potom ho zakódovať do formátu-p.webp

Nakoniec to fungovalo.

Teraz môžem získať snímku obrazovky z webového servera, takže sa pozrime, ako to funguje s arcore …

To nie

Myslím tým, že používam galaxiu s7, ktorá nie je najnovším telefónom, ale tieto veci WebView stále zmrazujú celú aplikáciu a sú v zásade nepoužiteľné. Predpokladám, že je to kvôli tomu, že WebView a ARCore preťažujú hlavné vlákno, ale neviem. Späť na rysovaciu dosku. Ak chceme, aby to fungovalo, budeme musieť vyložiť ťažké bremená na nejaký server. Po troche Googlingu sa ukazuje, že môžete urobiť snímku obrazovky webovej stránky s knižnicou pre Node.js s názvom WebShot, ktorá používa Phantom JS, čo je skriptovateľný prehliadač bez hlavy.

Krok 6: Konečne sa niekam dostaneme

Teraz musím zistiť, ako do pekla používať Node.js ….

Ukázalo sa, že môžete vytvoriť skript Node.js, ktorý počúva na konkrétnom čísle portu, a keď ho na tomto porte zasiahne, môže vrátiť niektoré informácie. Môžeme to otestovať vytvorením malého svetového skriptu ahoj, ktorý počúva na porte 3000. Do adresára so skriptom môžeme vložiť cd a spustiť ho vykonaním uzla a potom názvu skriptu. Ak v prehliadači prejdeme na svoju IP adresu a potom na port 3000, vidíme, že sa vracia ahoj svet. Teraz, keď mám malý prehľad o uzle, môžem začať pracovať na svojom serveri, na ktorom hostím svoje webové stránky, na ktorých je hawkhost.com. Prihlásim sa na server a pokúsim sa spustiť niekoľko skriptov node.js hello world … a nič nefunguje. Po ďalších niekoľkých hodinách neporiadku som zistil, že môj konkrétny hostiteľský server má otvorené iba dva porty na použitie, to je 3 000 a 1 2001.

Takže pomocou týchto portov a IP hostiteľských serverov môžem získať príklad fungujúceho ahoj sveta. Ďalej nainštalujem modul WebShot a vytvorím malý skript, ktorému môžem odoslať adresu URL a vráti mi obrázok webovej stránky na danej webovej adrese. Teraz môžem spustiť tento skript uzla a odoslať požiadavku http POST od Unity na konkrétnu adresu IP a číslo portu môjho servera, čo mi vráti pole bajtov, ktoré je obrazom tejto webovej stránky. Ďakujem BOHU. Teraz je ďalším problémom, keď zatvorím terminál, proces sa skončí a prestane počúvať. Vykonávam ďalší prieskum a nachádzam modul s názvom navždy. Inštalácia NPM navždy a teraz môžem navždy prejsť na skript a navždy ho spustiť a bude pokračovať, kým sa neprihlásim a znova ho nezastavím.

Krok 7: Funguje to

Skvelé. Ale nie je to dosť cool.

Keď sa zamyslím nad hodnotou prehliadania webu v AR, vychádza to z pridania priestoru. Už nie sme obmedzení na jednu obrazovku, takže chcem vytvoriť niečo, čo mi umožní vizualizovať môj vyhľadávací chodník priamo predo mnou. Načítajme teda prvú vyhľadávaciu stránku, potom ju prehľadajme a extrahujte každý výsledok vyhľadávania ako odkaz, ktorý potom môžeme načítať ako obrázok nad našu hlavnú obrazovku. Môžeme to urobiť pomocou iného skriptu Node.js, ktorý vyškriabe prvú stránku s výsledkami Google a bude ju spúšťať nepretržite. To sa dá urobiť oveľa efektívnejšie pomocou rozhrania API vyhľadávania Google, ale pravidlo číslo dva pre tento projekt nebolo žiadne platené rozhranie API, takže to zatiaľ urobíme takto. Teraz, keď máme obrázky pre každý odkaz, môžeme ich načítať na väčšiu obrazovku zakaždým, keď na ne klikneme a spustíme, máme tu malý prehliadač. Nie je plne funkčný, ale beriem ho. Dobre, takže ak chcete spustiť tento projekt sami, navštívte môj Github a stiahnite si projekt expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Krok 8: Fungovanie všetkého

Otvorte ho v Unity a spustite všetko lokálne na vašom počítači. Najprv musíte nájsť IP adresu vášho počítača, takže ak máte Mac, podržte možnosť a kliknutím na symbol wifi odhalíte svoju IP.

Vráťte sa k jednote a otvorte skript ovládača prehliadača, zadajte tam svoju IP adresu a skopírujte ju do schránky. Nájdite priečinok nodeScripts a vložte ho na plochu, otvorte priečinok a zmeňte obe rozšírenia na.js. Otvorte každý skript a zmeňte IP adresu na svoju IP. Teraz otvorte terminál a musíme nainštalovať niekoľko vecí. Nainštalujte si HomeBrew, ak ho ešte nemáte.

-inštalačný uzol varenia

-npm nainštalovať webshot

-otáčky za minútu

-npm nainštalovať zväzok

-npm nainštalovať cheerio

Teraz môžeme spustiť oba skripty, teda cd, do priečinka nodecripts a urobiť node getimage.js. Potom otvorte nové okno terminálu a urobte uzol getlinks.js Nechajte obe okná terminálu spustené a vráťte sa do editora. Ak stlačíme tlačidlo hrať, všetko by malo fungovať dobre. Môžeme tiež ísť do súboru, vytvoriť nastavenia a stlačiť zostaviť a spustiť, aby sme ho dostali do telefónu! Ak chcete zastaviť servery, stačí stlačiť klávesovú skratku control c alebo príkazom q zatvoriť celý terminál.

TO JE TO!