Papildytos realybės žiniatinklio naršyklė: 9 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:47

Šiandien mes ketiname sukurti išplėstinės realybės žiniatinklio naršyklę, skirtą „Android“.

Ši idėja kilo, kai „ExpressVPN“paprašė manęs sukurti remiamą „YouTube“vaizdo įrašą. Kadangi tai mano pirmasis, norėjau padaryti tai, kas susiję su jų produktu. Beveik iš karto pagalvojau, oi, aš tiesiog pasidarysiu papildytos realybės žiniatinklio naršyklę, kad galėtume naršyti žiniatinklyje AR naudojant VPN. Tai negali būti taip sunku, tiesa? Neteisinga. Aš nustatiau sau tam tikrus šio projekto apribojimus, nes norėjau jį panaudoti, kad išmokčiau naujų dalykų.

Numeris vienas, kurį norėjau, kad jis būtų skirtas „Android“, nes aš visada darau viską su „iOS“.

Antras dalykas, aš nenorėjau naudoti jokių mokamų API, norėjau, kad visi galėtų tiesiog atsisiųsti šį projektą ir jį vykdyti, nemokėdami už jokius dalykus internete. Taigi nei „IBM Watson“, nei „Google“API, nei nieko iš „Unity Asset“parduotuvės.

PRADĖKIME!

1 žingsnis: Pirmiausia

Pirmas dalykas, kurį norėjau pradėti, buvo geras kalbos ir teksto sprendimas, kad galėtume atlikti paieškas internete balsu. Taip pat manau, kad balsas yra puikus sąveikos metodas AR, bent jau tol, kol mes neturime gero rankų stebėjimo sprendimo. Žinau, kad „Android“turi tam tikrą gimtosios kalbos į tekstą funkciją, todėl greita „Google“paieška padės rasti „Unity“papildinių.

Pirmą kartą susidūriau su šiuo vienybės priedu:

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

Aš tai išbandžiau ir tai puikiai pavyko. Vienintelė problema buvo ta, kad kai jį naudojate su „ARCore“, jis sukuria vietinį iššokantįjį langelį ir atrodo, kad jis yra „Unity“fonas, o galiausiai prarasite stebėjimą.

Tai buvo mažiau nei idealu.

2 veiksmas: kalbėjimo į tekstą veikimas „Android“

Taigi aš pradėjau ieškoti kai kurių papildinių, kurie neatskleidė gimtosios iššokančiųjų langelių ir negalėjau rasti daug, bet galiausiai radau šią „Android“biblioteką:

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

Dabar aš tiesiog nežinau nieko apie vietinį „Android“kūrimą, bet norėjau mesti sau iššūkį, todėl supratau, kad tiesiog pabandysiu parašyti šios bibliotekos tiltinį kodą ir paversti jį „Android“papildiniu, skirtu naudoti „Unity“. Vėlgi, tai buvo klaida ir švinas iki nusivylimo valandų.

Tada pagaliau pavyko…

3 žingsnis: išmoktos pamokos

Taigi šiame procese sužinojau du dalykus, kurie iš karto nėra akivaizdūs vien tik googlinant, kaip sukurti „Android“papildinį vienybei.

Pirmasis yra tas, kad tikriausiai turėsite gauti nuorodą į „Android“programos kontekstą, jei jūsų papildinys padarys ką nors įdomaus. Tai galite padaryti pridėję failą class.jar iš „Unity“diegimo į „Android“projektą kaip biblioteką. Taigi eikite į failų projekto struktūrą ir tada pasirinkite programos modulio priklausomybių skirtuką. Čia galite spustelėti pliuso mygtuką, kad pridėtumėte stiklainį. Eikite į „Unity Build“, atkūrimo variklius, „Android“grotuvą, variantus, mono, kūrimą, klases ir galiausiai klases. Jar. Pakeiskite apimtį į tik kompiliavimą. Dabar naujame „Java“faile galite atlikti šiuos veiksmus:

UnityPlayer.currentActivity.getApplicationContext ();

ir naudokite tą nuorodą ten, kur jums to reikia.

Kita keista problema yra ta, kad šią balso funkciją galima paleisti tik pagrindinėje gijoje, kitaip gausite klaidų. Norėdami tai padaryti „Unity“, turite pasakyti funkcijoms ir papildiniui, kad jie veiktų UI gijoje kaip „AndroidJavaRunnable“, kaip parodyta aukščiau.

4 žingsnis: kovos

Šiuo metu manau, kad esu „Android“ekspertas, Kviečiu prisijungti prie „Android“kūrėjų darbų, užsisakau „Android“lipdukų ir marškinėlių. Gyvenimas yra geras. Dabar esu pasirengęs pereiti prie to, kad suprasčiau, kaip „Unity“tinklalapį pateikti. Atlikęs nedidelį tyrimą matau, kad priimtas sprendimas yra naudoti „Android WebView“. Tai tik „Android“klasė, leidžianti pateikti svetaines, kurios yra sąveikaujančios „Android“programoje, neįkeliant visko į naršyklę. Iš esmės taip, kad galėtumėte išlaikyti naudotojus savo programoje. Pirmiausia reikia išsiaiškinti, ar kas nors sukūrė atvirumo kodo vienybės papildinį. Pirmiausia išbandau šį papildinį:

github.com/gree/unity-webview

tačiau „WebView“pateikiamas tik „Unity GUI“sluoksniui, todėl tai neveiks. Tada randu šį VR papildinį:

github.com/IanPhilips/UnityAndroidVRBrowse…

tai leidžia jums padaryti „WebView“tekstūrą ir netgi sąveikauti, o tai yra puiku. Maniau, kad tai buvo atsakymas, kol nepabandžiau ir sužinojau, kad tai blokuoja visus mano paspaudimus nuo vienybės.

5 žingsnis: Grįžkite prie piešimo lentos

Aš tiesiog bandysiu tai padaryti, nes tai viskas, ko man tikrai reikia, yra atsiųsti svetainės įvaizdį į „Unity“. Atlikdamas tam tikrus tyrimus, sužinau, kad galiu išsaugoti „Android“drobę bitų žemėlapyje, tada užkoduoti ją į-p.webp

Pagaliau pavyko.

Taigi dabar galiu gauti ekrano kopiją iš svetainės, todėl pažiūrėkime, kaip ji veikia su „arcore“…

Taip nėra.

Aš turiu galvoje, kad naudoju „Galaxy S7“, kuris nėra naujausias telefonas, tačiau ši „WebView“medžiaga vis dar užšaldo visą programą ir iš esmės nenaudojama. Aš manau, kad taip yra todėl, kad „WebView“ir „ARCore“perkrauna pagrindinę giją, bet aš tikrai nežinau. Grįžkime prie piešimo lentos. Jei norime, kad tai veiktų, turėsime perkelti sunkiasvorius kelius į kažkokį serverį. Atlikę „Google“paiešką paaiškėja, kad galite padaryti svetainės, kurioje yra „Node.js“biblioteka, pavadintą „WebShot“, kurioje naudojama „Phantom JS“, kuri yra scenarijus be galvų, naršyklė, ekrano kopiją.

6 žingsnis: Pagaliau mes kažkur einame

Dabar turiu išsiaiškinti, kaip, po velnių, naudoti „Node.js“….

Pasirodo, galite sukurti „Node.js“scenarijų, kuris klauso tam tikro prievado numerio, ir kai jį pasiekia tame prievade, jis gali grąžinti tam tikrą informaciją. Mes galime tai išbandyti sukurdami nedidelį „hello world“scenarijų, kuris klauso 3000 prievado. Galime įrašyti CD į katalogą su scenarijumi ir paleisti jį atlikdami mazgą ir tada scenarijaus pavadinimą. Jei naršydami pereisime prie savo IP adreso, o po to prie savo 3000 prievado, pamatysime, kad jis grįžta į sveiką pasaulį. Dabar, kai šiek tiek suprantu mazgą, galiu tai padaryti savo serveryje, kuriame talpinu savo svetaines, kuriose yra hawkhost.com. Aš SSH į savo serverį ir bandau paleisti keletą „hello world node.js“scenarijų … ir niekas neveikia. Po dar kelių valandų trukdžių suprantu, kad mano konkrečiame prieglobos serveryje yra tik du prievadai, skirti naudoti, tai yra 3000 ir 12001.

Taigi, naudodamas tuos prievadus ir savo prieglobos serverių IP, galiu gauti gero pasaulio pavyzdį. Tada įdiegiu „WebShot“modulį ir sukuriu nedidelį scenarijų, kurį galiu perduoti URL, ir jis man grąžins svetainės vaizdą tuo žiniatinklio adresu. Dabar galiu paleisti tą mazgo scenarijų ir išsiųsti http „POST“užklausą iš „Unity“į konkretų mano serverio IP ir prievado numerį, kuris man grąžins baitų masyvą, kuris yra tos svetainės vaizdas. Ačiū Dievui. Dabar kita problema yra ta, kad uždarius terminalą procesas baigiasi ir nustojau klausytis. Atlieku daugiau tyrimų ir randu modulį, vadinamą amžinai. NPM įdiegti amžinai ir dabar aš galiu pereiti į amžinai ir visam laikui pradėti scenarijų ir jis ir toliau veiks, kol aš prisijungsiu ir vėl jį sustabdysiu.

7 žingsnis: tai veikia

Puiku. Bet tai nėra pakankamai kieta.

Kai galvoju apie naršymo internete vertę AR, tai atsiranda dėl papildomos vietos. Mes nebėra apsiriboję vienu ekranu, todėl noriu sukurti kažką, kas leistų man vizualizuoti savo paieškos kelią priešais mane. Taigi įkelkime tą pirmąjį paieškos puslapį, tada nuskaitykime tą puslapį ir ištraukime kiekvieną paieškos rezultatą kaip nuorodą, kurią vėliau galėsime įkelti kaip vaizdą virš pagrindinio ekrano. Tai galime padaryti naudodami kitą „Node.js“scenarijų, kuris nuskaito pirmąjį „Google“rezultatų puslapį ir nuolat jį vykdo amžinai. Tai būtų galima padaryti daug efektyviau naudojant „Google“paieškos API, tačiau antroji šio projekto taisyklė nebuvo mokama API, todėl dabar tai padarysime taip. Dabar, kai turime kiekvienos nuorodos vaizdus, galime juos įkelti į didesnį ekraną kiekvieną kartą spustelėję ir pakilę, čia turime gražią mažą naršyklę. Jis ne visiškai veikia, bet aš jį priimu. Gerai, taigi, jei norite paleisti šį projektą patys, eikite į mano „Github“ir atsisiųskite „expressVPN“projektą:

github.com/MatthewHallberg/ARBrowserExpres…

8 žingsnis: kad viskas veiktų

Atidarykite jį „Unity“ir leiskite, kad jūsų kompiuteryje viskas vyktų vietoje. Pirmiausia turite rasti savo įrenginio IP adresą, taigi, jei naudojate „Mac“, tiesiog laikykite nuspaudę parinktį ir spustelėkite „wifi“simbolį, kad atskleistumėte savo IP.

Grįžkite į vienybę ir atidarykite naršyklės valdiklio scenarijų, įveskite ten savo IP adresą ir nukopijuokite jį į mainų sritį. Raskite aplanką „nodeScripts“ir įdėkite jį į darbalaukį, atidarykite aplanką ir pakeiskite abu plėtinius į.js. Atidarykite kiekvieną scenarijų ir pakeiskite IP adresą į savo IP. Dabar atidarykite terminalą ir turime įdiegti kai kuriuos dalykus. Įdiekite „HomeBrew“, jei to dar neturite.

-alaus diegimo mazgas

-npm įdiegti žiniatinklio kopiją

-npm montuoti lygintuvą

-npm įdiegti sąjungą

-npm įdiegti cheerio

Dabar galime paleisti abu scenarijus, tokius kaip cd, į aplanką nodescripts ir padaryti mazgą getimage.js, tada atidaryti naują terminalo langą ir padaryti mazgą getlinks.js Palikite abu terminalo langus veikiančius ir grįžkite į redaktorių. Jei paspausime „play“, viskas turėtų veikti gerai. Mes taip pat galime eiti į failą, kurti nustatymus ir paspausti „build“ir paleisti, kad gautume jį į savo telefoną! Jei norite sustabdyti serverius, tiesiog paspauskite valdymo klavišą c arba komandą q, kad uždarytumėte visą terminalą.

VISKAS!