Lisätty todellisuuden verkkoselain: 9 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:02

Tänään aiomme tehdä lisätyn todellisuuden verkkoselaimen Androidille.

Tämä idea alkoi, kun ExpressVPN pyysi minua tekemään sponsoroidun YouTube -videon. Koska tämä on ensimmäinen, halusin tehdä jotain, joka liittyi heidän tuotteeseensa. Melkein heti ajattelin, että ohh, teen vain lisätyn todellisuuden verkkoselaimen, jotta voimme selata verkkoa AR: ssä VPN: llä. Se ei voi olla niin vaikeaa, eikö? Väärä. Asetin itselleni joitain rajoituksia tälle projektille, koska halusin käyttää sitä oppiakseni uusia asioita.

Numero yksi halusin sen olevan Androidille, koska teen aina asioita IOS: n kanssa.

Toiseksi en halunnut käyttää mitään maksullisia sovellusliittymiä, vaan halusin kaikkien voivan vain ladata tämän projektin ja suorittaa sen ilman, että joutuisin maksamaan mistään tavaroista verkossa. Ei siis IBM Watsonia, ei Google -sovellusliittymää eikä mitään Unity Asset -kaupasta.

ALOITETAAN!

Vaihe 1: Ensimmäiset asiat ensin

Ensimmäinen asia, jonka halusin saada toimimaan, oli hyvä ratkaisu puheeksi tekstiksi, jotta voisimme tehdä verkkohakuja äänellämme. Lisäksi mielestäni ääni on loistava vuorovaikutusmenetelmä AR: ssa, ainakin kunnes meillä on hyvä kädenseurantaratkaisu. Tiedän, että Androidilla on natiivi puhetekstitoiminto, joten nopea Google -haku auttaa meitä löytämään Unityn laajennuksia.

Löysin ensimmäisen kerran tämän yhtenäisyyden yhdistävän laajennuksen:

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

Kokeilin tätä ja se toimi loistavasti. Ainoa ongelma oli, että kun käytät sitä ARCoren kanssa, se luo alkuperäisen ponnahdusikkunan ja näyttää taustalta Unityn ja menetät seurannan.

Tämä oli vähemmän kuin ideaali.

Vaihe 2: Puheen siirtäminen tekstiksi Androidille

Joten aloin etsiä joitain laajennuksia, jotka eivät tuoneet esiin alkuperäistä ponnahdusikkunaa eivätkä löytäneet paljon, mutta löysin lopulta tämän android -kirjaston:

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

Nyt en tiedä kirjaimellisesti mitään Androidin alkuperäisestä kehityksestä, mutta halusin haastaa itseni, joten ajattelin vain kirjoittaa jonkin siltakoodin tälle kirjastolle ja muuttaa sen Android -laajennukseksi käytettäväksi Unityssä. tuntien turhautumiseen.

Sitten se lopulta toimi…

Vaihe 3: Oppiaiheet

Joten tässä prosessissa olen oppinut kaksi asiaa, jotka eivät näy heti googlaamalla, kuinka tehdä Android -laajennus yhtenäisyyden saavuttamiseksi.

Ensimmäinen on, että sinun on luultavasti saatava viittaus Android -sovelluksen kontekstiin, jos laajennuksesi tekee jotain mielenkiintoista. Voit tehdä tämän lisäämällä class.jar -tiedoston Unity -asennuksestasi Android -projektiin kirjastona. Siirry siis tiedostoprojektin rakenteeseen ja valitse sitten sovellusmoduulin riippuvuusvälilehti. Täällä voit lisätä jar -tiedoston napsauttamalla pluspainiketta. Siirry Unity -rakenteen, toistomoottorien, Android -pelaajan, muunnelmien, mono, kehityksen, luokkien ja lopuksi luokkien kohdalle. Jar. Muuta laajuus vain kääntämiseksi. Nyt uudessa java -tiedostossa voit tehdä:

UnityPlayer.currentActivity.getApplicationContext ();

ja käytä sitä viittausta missä tahansa tarvitset.

Seuraava outo ongelma on, että tämä äänitoiminto voidaan suorittaa vain päälangassa tai muuten saat virheitä. Jotta voit tehdä tämän Unityssä, sinun on kerrottava toiminnot ja laajennus, jotka toimivat käyttöliittymässä AndroidJavaRunnable -muodossa, kuten yllä oleva kuva.

Vaihe 4: Taistelut

Tässä vaiheessa luulen olevani Android -asiantuntija, Haen verkossa Android-kehittäjätyöhön, tilaan Android-tarroja ja t-paitoja. Elämä on hyvää. Nyt olen valmis siirtymään miettimään, miten Unityn verkkosivu voidaan tehdä. Pienen tutkimuksen jälkeen huomaan, että hyväksytty ratkaisu on käyttää Android WebView -näkymää. Tämä on vain Android-luokka, jonka avulla voit tehdä verkkosivustoja, jotka ovat yhteensopivia Android-sovelluksen sisällä lataamatta kaikkea selaimeen. Pohjimmiltaan näin voit pitää käyttäjät sovelluksessasi. Ensimmäinen asia on selvittää, onko joku tehnyt avoimen lähdekoodin tähän yhtenäisyyslaajennuksen. Kokeilen ensin tätä laajennusta:

github.com/gree/unity-webview

mutta se tekee WebView -näkymän vain Unity GUI -kerrokselle, joten se ei toimi. Sitten löydän tämän VR: n laajennuksen:

github.com/IanPhilips/UnityAndroidVRBrowse…

Tämän avulla voit tehdä WebView -kuvasta tekstuurin ja jopa vuorovaikutteisen, mikä on hienoa. Ajattelin, että tämä oli vastaus, kunnes kokeilin sitä ja huomasin, että se estää kaikki napsautukseni ykseydestä.

Vaihe 5: Takaisin piirustuspöydälle

Yritän vain tehdä tästä laajennuksen, koska tarvitsen vain lähettää kuvan verkkosivustosta unitylle. Tutkimalla asiaa, huomaan, että voin tallentaa android -kankaan bittikarttaan ja sitten koodata sen png: ksi ja lähettää vain nämä tavut Unitylle, siellä luodaan uusi tekstuuri kyseisellä tavutyypillä ja olen hyvä. Muutaman tunnin turhautumisen ja olemassaoloni kyseenalaistamisen jälkeen…

Se lopulta toimi.

Joten nyt saan kuvakaappauksen verkkosivustolta, joten katsotaan kuinka se toimii arcoren kanssa…

Se ei.

Tarkoitan, että käytän galaxy s7: tä, joka ei ole uusin puhelin, mutta tämä WebView -sisältö jäädyttää edelleen koko sovelluksen ja on periaatteessa käyttökelvoton. Oletan, että se johtuu siitä, että WebView ja ARCore ylikuormittavat molemmat päälankaa, mutta en todellakaan tiedä. Takaisin piirustuspöydän ääreen. Jos haluamme saada tämän toimimaan, joudumme siirtämään raskaan nostamisen jollekin palvelimelle. Googlaamisen jälkeen käy ilmi, että voit ottaa kuvakaappauksen verkkosivustosta, jossa on Node.js -kirjasto nimeltä WebShot, joka käyttää Phantom JS: ää, joka on skriptitön päätön selain.

Vaihe 6: Lopulta pääsemme jonnekin

Nyt minun on selvitettävä, miten helvetissä voin käyttää Node.js -tiedostoa.

Osoittautuu, että voit tehdä Node.js -komentosarjan, joka kuuntelee tiettyä portin numeroa, ja kun se osuu siihen, se voi palauttaa joitain tietoja. Voimme testata tämän luomalla pienen hello world -skriptin, joka kuuntelee porttia 3000. Voimme levittää cd -tiedoston hakemistoon komentosarjan avulla ja suorittaa sen tekemällä solmun ja sitten komentosarjan nimen. Jos siirrytään IP -osoitteeseemme ja sitten porttiin 3000 selaimessamme, voimme nähdä sen palauttavan terveen maailman. Nyt kun minulla on pieni käsitys solmusta, voin saada sen toimimaan palvelimessani, joka isännöi verkkosivustojani, joilla on hawkhost.com. Saan SSH: n palvelimelleni ja yritän suorittaa muutaman hello world node.js -skriptin … eikä mikään toimi. Muutaman tunnin sekoilun jälkeen huomaan, että tietyssä isäntäpalvelimessani on vain kaksi porttia auki, eli 3000 ja 12001.

Joten käyttämällä näitä portteja ja isäntäpalvelimeni IP -osoitetta voin saada toimivan esimerkin terveestä maailmasta. Seuraavaksi asennan WebShot -moduulin ja luon pienen komentosarjan, jonka voin välittää URL -osoitteen ja se palauttaa minulle kuvan verkkosivustosta kyseisessä verkko -osoitteessa. Nyt voin aloittaa tuon solmuskriptin ja lähettää Unitylta http POST -pyynnön palvelimeni tiettyyn IP -osoitteeseen ja portin numeroon, joka palauttaa minulle tavumallin, joka on kyseisen verkkosivuston kuva. Nyt toinen ongelma on, kun suljen terminaalin, prosessi päättyy ja lopetan kuuntelun. Teen lisää tutkimusta ja löydän moduulin nimeltä ikuisesti. NPM -asennus ikuisesti ja nyt voin siirtyä ikuisesti ja aloittaa ikuisesti komentosarjan ja se jatkuu, kunnes kirjaudun sisään ja lopetan sen uudelleen.

Vaihe 7: Se toimii

Loistava. Mutta se ei ole tarpeeksi viileä.

Kun ajattelen webin selaamisen arvoa AR: ssä, se tulee tilan lisäämisestä. Emme enää rajoitu yhteen näyttöön, joten haluan tehdä jotain, jonka avulla voin visualisoida hakureitin aivan edessäni. Ladataan siis ensimmäinen hakusivu ja indeksoidaan sitten kyseinen sivu ja puretaan jokainen hakutulos linkiksi, jonka voimme ladata kuvana päänäytön yläpuolelle. Voimme tehdä tämän toisella Node.js -komentosarjalla, joka raapii Googlen tulosten ensimmäisen sivun ja käyttää sitä jatkuvasti ikuisesti. Tämä voitaisiin tehdä paljon tehokkaammin Google -hakusovellusliittymällä, mutta tämän projektin sääntö numero kaksi ei ollut maksettu sovellusliittymä, joten teemme sen tällä hetkellä näin. Nyt kun meillä on kuvia jokaisesta linkistä, voimme ladata ne suuremmalle näytölle aina, kun napsautamme niitä ja nousemme, meillä on mukava pieni selain täällä. Se ei ole täysin toimiva, mutta otan sen vastaan. Selvä, jos haluat suorittaa tämän projektin itse, siirry Githubiini ja lataa expressVPN -projekti:

github.com/MatthewHallberg/ARBrowserExpres…

Vaihe 8: Kaikki toimii

Avaa se Unityssä ja saat kaiken toimimaan paikallisesti koneellasi. Ensin sinun on löydettävä koneesi IP -osoite, joten jos olet Macissa, pidä vain vaihtoehtoa ja napsauta wifi -symbolia paljastaaksesi IP -osoitteesi.

Palaa yhtenäisyyteen ja avaa selainohjaimen komentosarja ja kirjoita IP -osoitteesi sinne ja kopioi se leikepöydälle. Etsi nodeScripts -kansio ja aseta se työpöydällesi, avaa kansio ja muuta molemmat laajennukset.js -muotoon. Avaa jokainen komentosarja ja muuta IP -osoite IP -osoitteeseesi. Avaa nyt terminaali ja meidän on asennettava joitain asioita. Asenna HomeBrew, jos sinulla ei vielä ole sitä.

-Brew -asennussolmu

-npm asentaa web -kuvan

-iltapäivän asentaminen

-npm asennusliitto

-npm asenna cheerio

Nyt voimme käynnistää molemmat skriptit niin cd: llä nodescripts -kansioon ja tehdä solmun getimage.js Ja sitten avata uuden pääteikkunan ja tehdä solmun getlinks.js Jätä molemmat pääteikkunat käynnissä ja palaa editoriin. Jos painamme toistoa, kaiken pitäisi toimia hyvin. Voimme myös siirtyä tiedostoon, rakentaa asetuksia ja painaa rakentaa ja suorittaa saadaksesi sen puhelimeemme! Jos haluat pysäyttää palvelimet, paina C -näppäintä tai komentoa q sulkeaksesi koko päätelaitteen.

SE SIITÄ!