Augmented Reality Web Browser: 9 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:13

Ngayon ay dumadaan tayo sa paggawa ng isang Augmented Reality web browser para sa Android.

Ang ideyang ito ay nagsimula nang hilingin sa akin ng ExpressVPN na gumawa ng isang nai-sponsor na video sa YouTube. Dahil ito ang aking una, nais kong gumawa ng isang bagay na nauugnay sa kanilang produkto. Medyo kaagad naisip ko, ohh gagawa lang ako ng isang augmented reality web browser upang ma-browse namin ang web sa AR sa isang VPN. Hindi ito maaaring maging mahirap, di ba? Mali Nagtakda ako ng ilang mga limitasyon para sa proyektong ito dahil nais kong gamitin ito upang malaman ang ilang mga bagong bagay.

Numero ng isang nais kong ito ay para sa Android sanhi palagi akong gumagawa ng mga bagay-bagay sa IOS.

Numero ng dalawang hindi ko nais na gumamit ng anumang bayad na API, nais kong ma-download lamang ng lahat ang proyektong ito at patakbuhin ito nang hindi na magbabayad para sa anumang bagay sa online. Kaya't walang IBM Watson, walang Google API, at wala sa Unity Asset store.

MAGSIMULA NA TAYO!

Hakbang 1: Una sa Una

Ang unang bagay na nais kong gumana ay isang mahusay na solusyon para sa pagsasalita sa teksto upang magawa namin ang mga paghahanap sa online gamit ang aming boses. Gayundin sa tingin ko ang boses ay isang mahusay na pamamaraan ng pakikipag-ugnay sa AR, kahit na hanggang sa magkaroon kami ng mahusay na solusyon sa pagsubaybay sa kamay. Alam ko na ang Android ay may ilang katutubong pagsasalita sa pagpapaandar ng teksto kaya't ang isang mabilis na paghahanap sa google ay makakatulong sa amin na makahanap ng ilang mga plugin para sa Unity.

Una kong dumating sa plugin na ito para sa pagkakaisa:

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

Sinubukan ko ito at gumana ito ng mahusay. Ang problema lamang ay kapag ginamit mo ito sa ARCore bumubuo ito ng isang katutubong popup box at tila sa background ng Unity at nauwi ka sa pagkawala ng pagsubaybay.

Ito ay mas mababa sa ideal.

Hakbang 2: Pagkuha ng Talumpati sa Paggawa ng Teksto para sa Android

Kaya't nagsimula akong maghanap ng ilang mga plugin na hindi naglabas ng katutubong pop up box at hindi makahanap ng marami ngunit natapos ko ang paghahanap ng android library na ito:

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

Ngayon alam kong walang alam tungkol sa katutubong pag-unlad ng Android ngunit nais kong hamunin ang aking sarili kaya naisip kong susubukan ko lamang na magsulat ng ilang code ng tulay para sa library na ito at gawing isang Android plugin na gagamitin sa Unity. Muli, ito ay isang pagkakamali at lead sa mga oras ng pagkabigo.

Pagkatapos sa wakas ay gumana ito …

Hakbang 3: Mga Natutuhan sa Aralin

Kaya't may dalawang bagay na natutunan ako sa prosesong ito na hindi kaagad maliwanag mula sa pag-google lamang kung paano gumawa ng isang Android plugin para sa pagkakaisa.

Ang isa sa marahil ay kakailanganin mong makakuha ng isang sanggunian sa konteksto ng Android app kung ang iyong plugin ay gagawa ng anumang kawili-wili. Maaari mo itong gawin sa pamamagitan ng pagdaragdag ng mga files.jar file mula sa iyong Unity install sa iyong proyekto sa Android bilang isang library. Kaya pumunta sa file na istraktura ng proyekto at pagkatapos ay piliin ang tab ng mga dependency para sa module ng app. Dito maaari mong i-click ang plus button upang idagdag ang jar file. Pumunta sa iyong Unity build, playback engine, androidplayer, pagkakaiba-iba, mono, development, klase, at sa wakas ay mga klase.jar. Baguhin ang saklaw upang mag-ipon lamang. Ngayon, sa isang bagong file ng java maaari mong gawin:

UnityPlayer.currentActivity.getApplicationContext ();

at gamitin ang sanggunian na iyon kung saan mo kailangan ito.

Ang susunod na kakatwang isyu ay ang pagpapatakbo ng boses na ito ay maaari lamang patakbuhin sa pangunahing thread o kung hindi ka makakakuha ng mga error. Upang magawa ito sa Unity kailangan mong sabihin ang mga pag-andar at ang plugin upang tumakbo sa UI Thread bilang isang AndroidJavaRunnable tulad ng larawan sa itaas.

Hakbang 4: Mga Pakikibaka

Sa puntong ito iniisip ko na ako ay isang dalubhasa sa Android, Nag-apply ako online para sa mga trabaho sa android dev, nag-order ako ng mga Android sticker at t-shirt. Maganda ang buhay. Handa na akong magpatuloy sa pag-alam kung paano mag-render ng isang webpage sa Unity. Matapos gawin ang isang maliit na pagsasaliksik nakikita ko na ang tinatanggap na solusyon ay ang paggamit ng isang Android WebView. Ito ay isang klase lamang sa Android na nagbibigay-daan sa iyo upang mag-render ng mga website na inter-actable sa loob ng isang Android app nang hindi nilo-load ang lahat sa browser. Talaga, ito ay upang mapapanatili mo ang mga gumagamit sa iyong app. Ang unang pagkakasunud-sunod ng negosyo ay upang makita kung ang sinuman ay gumawa ng isang plugin ng pagkakaisa para dito na bukas na mapagkukunan. Una kong sinubukan ang plugin na ito:

github.com/gree/unity-webview

ngunit nagbibigay lamang ito ng isang WebView sa layer ng Unity GUI kaya't hindi iyon gagana. Pagkatapos hanapin ko ang plugin na ito para sa VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

Pinapayagan ka nitong mag-render ng isang WebView sa isang pagkakayari at kahit na nakikipag-ugnay, na mahusay. Akala ko ito ang sagot hanggang sa nasubukan ko ito at nalaman na hinaharangan ang lahat ng aking pag-click mula sa pagkakaisa.

Hakbang 5: Bumalik sa Drawing Board

Susubukan ko lamang na gawin ang aking plugin para dito, sapagkat ang talagang kailangan ko ay magpadala ng isang imahe ng website sa pagkakaisa. Gumagawa ng ilang pagsasaliksik tungkol doon, nalaman kong makakapag-save ako ng isang android canvas sa isang bitmap at pagkatapos ay i-encode ito sa isang-p.webp

Sa wakas ay gumana ito.

Kaya nakakakuha ako ngayon ng isang screenshot mula sa isang website, kaya't tingnan natin kung paano ito gumagana sa arcore …

Hindi.

Ibig kong sabihin ay gumagamit ako ng isang galaxy s7 na kung saan ay hindi ito ang pinakabagong telepono, ngunit ang bagay na ito sa WebView ay nagyeyelo pa rin sa buong app at karaniwang hindi magagamit. Ipinapalagay ko na ito sapagkat ang WebView at ARCore ay parehong overloading ang pangunahing thread ngunit hindi ko talaga alam. Bumalik sa drawing board. Kung nais nating gawin ang trabahong ito, kakailanganin nating i-off ang mabibigat na nakakataas sa ilang uri ng server. Matapos gawin ang ilang Googling lumalabas na maaari kang kumuha ng isang screenshot ng isang website na may isang aklatan para sa Node.js na tinatawag na WebShot na gumagamit ng Phantom JS na isang scriptable na walang browser na browser.

Hakbang 6: Sa wakas Nakakarating Na Kami

Ngayon kailangan kong malaman kung paano ang impyerno upang magamit ang Node.js ….

Lumalabas maaari kang gumawa ng isang script ng Node.js na nakikinig sa isang partikular na numero ng port at kapag na-hit ito sa port na maaari itong ibalik ang ilang impormasyon. Maaari naming subukan ito sa pamamagitan ng paglikha ng isang maliit na hello script ng mundo na nakikinig sa port 3000. Maaari kaming mag-cd sa direktoryo gamit ang script at patakbuhin ito sa pamamagitan ng paggawa ng node at pagkatapos ang pangalan ng script. Kung magna-navigate kami sa aming IP address at pagkatapos ay mag-port ng 3000 sa aming browser maaari naming makita itong bumalik sa hello world. Ngayon na mayroon akong isang maliit na maunawaan sa node maaari ko itong magamit sa aking server na naka-host ako sa aking mga website kung saan ang hawkhost.com. SSH ako sa aking server at subukang patakbuhin ang ilang mga script ng hello na node.js sa mundo … at walang gumagana. Pagkatapos ng ilang oras na paggulo sa paligid nalaman ko na ang aking partikular na server ng hosting ay may dalawang port lamang na bukas para magamit, iyon ay 3000 at 12001.

Kaya't gamit ang mga port at ang aking mga server ng pagho-host IP maaari akong makakuha ng isang halimbawa ng hello world na gumagana. Susunod na nai-install ko ang module ng WebShot at lumikha ng isang maliit na script na maaari kong maipasa ang isang URL at ibabalik nito sa akin ang isang imahe ng website sa web address na iyon. Ngayon ay maaari ko nang simulan ang script ng node at magpadala ng isang kahilingan sa http POST mula sa Unity sa tukoy na numero ng IP at port ng aking server na magbabalik sa akin ng isang byte array na imahe ng website na iyon. Salamat sa DIYOS. Ngayon ang isa pang problema ay kapag isinara ko ang aking terminal ang proseso ay nagtatapos at huminto sa pakikinig. Gumagawa pa ako ng ilang pagsasaliksik at makahanap ng isang module na tinatawag na magpakailanman. Ang pag-install ng NPM magpakailanman at ngayon ay maaari na akong mag-navigate magpakailanman at gawin magpakailanman simulan ang script at magpapatuloy ito sa pagtakbo hanggang sa mag-log in at itigil ko ito muli.

Hakbang 7: Gumagana Ito

Malaki. Ngunit hindi ito cool na sapat.

Kapag naiisip ko ang tungkol sa halaga ng pag-browse sa web sa AR nagmula ito sa pagdaragdag ng puwang. Hindi na kami nakakulong sa isang solong screen kaya gusto kong gumawa ng isang bagay na nagbibigay-daan sa aking mailarawan ang aking landas sa paghahanap sa harap ko mismo. Kaya't i-load natin ang unang pahina ng paghahanap na iyon at pagkatapos ay i-crawl ang pahinang iyon at kunin ang bawat resulta ng paghahanap bilang isang link, na maaari naming mai-load bilang isang imahe sa itaas ng aming pangunahing screen. Magagawa natin ito sa isa pang script ng Node.js na nag-scrape ng unang pahina ng mga resulta ng Google at patuloy na pinapatakbo ito magpakailanman. Maaari itong magawa nang mas mahusay sa Google search API ngunit ang panuntunang dalawa para sa proyektong ito ay walang bayad na API, gagawin namin ito tulad nito sa ngayon. Ngayon na mayroon kaming mga imahe para sa bawat link maaari naming mai-load ang mga ito sa isang mas malaking screen sa tuwing nai-click namin ang mga ito at boom, mayroon kaming isang magandang maliit na browser dito. Hindi ito ganap na gumagana ngunit kukunin ko ito. Okay kung nais mong patakbuhin ang proyektong ito ang iyong sarili pumunta sa aking Github at i-download ang expressVPN na proyekto:

github.com/MatthewHallberg/ARBrowserExpres…

Hakbang 8: Pagkuha ng Lahat ng Gumagana

Buksan ito sa Unity at makuha natin ang lahat na tumatakbo nang lokal sa iyong machine. Una kailangan mong hanapin ang IP address ng iyong machine kaya kung nasa mac ka lang pindutin nang matagal ang pagpipilian at i-click ang simbolo ng wifi upang ipakita ang iyong IP.

Bumalik sa pagkakaisa at buksan ang script ng browser controller at ilagay sa iyong IP address doon at kopyahin ito sa iyong clipboard. Hanapin ang folder ng nodeScripts at ilagay ito sa iyong desktop, buksan ang folder at baguhin ang parehong mga extension sa.js. Buksan ang bawat script at baguhin ang IP address sa iyong IP. Ngayon buksan ang terminal at kailangan naming mag-install ng ilang mga bagay. I-install ang HomeBrew kung wala ka pa nito.

-brew install node

-npm i-install ang webshot

-npm install flatiron

-npm i-install ang unyon

-npm i-install ang cheerio

Ngayon ay maaari naming simulan ang parehong mga script kaya cd sa folder ng nodescripts at gawin node getimage.js At pagkatapos ay buksan ang isang bagong window ng terminal at gawin ang mga node getlinks.js Iwanan ang parehong mga windows windows na tumatakbo at bumalik sa editor. Kung pinindot namin ang paglalaro ang lahat ay dapat na gumana nang maayos. Maaari din kaming mag-file, bumuo ng mga setting, at ma-hit ang build at tumakbo upang makuha ito sa aming telepono! Kung nais mong itigil ang mga server pindutin lamang ang control c o utos q upang isara ang buong terminal.

AYAN YUN!