Kiterjesztett valóság webböngésző: 9 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:42

Ma egy kiterjesztett valóság webböngészőt készítünk Androidra.

Ez az ötlet akkor kezdődött, amikor az ExpressVPN felkért, hogy készítsek egy szponzorált YouTube -videót. Mivel ez az első, szerettem volna valamit tenni, ami releváns a termékükhöz. Nagyjából azonnal azt gondoltam, hogy óh, csak csinálok egy kibővített valóság böngészőt, hogy VPN -en AR -ban böngészhessünk. Nem lehet olyan nehéz, igaz? Rossz. Meghatároztam magamnak néhány korlátozást ehhez a projekthez, mert arra akartam használni, hogy új dolgokat tanuljak.

Az első számú, hogy azt akartam, hogy Androidra legyen, mert mindig IOS -t csinálok.

Másodszor, nem akartam fizetős API -kat használni, azt akartam, hogy mindenki csak le tudja tölteni ezt a projektet, és futtassa, anélkül, hogy online fizetnie kellene. Tehát nincs IBM Watson, nincs Google API, és semmi a Unity Asset áruházból.

LÁSSUNK NEKI!

1. lépés: Először az első dolgok

Az első dolog, amit szerettem volna elkezdeni, az volt a jó megoldás a beszédről szövegre, így hangunk segítségével elvégezhetjük az online kereséseket. Azt is gondolom, hogy a hang nagyszerű interakciós módszer az AR -ban, legalábbis addig, amíg nincs jó kézkövető megoldásunk. Tudom, hogy az Android rendelkezik natív beszéd -szöveg funkciókkal, így a gyors Google -keresés segít megtalálni néhány Unity -bővítményt.

Először az egység érdekében találkoztam ezzel a bővítménnyel:

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

Ezt kipróbáltam, és remekül működött. Az egyetlen probléma az volt, hogy amikor az ARCore -val használja, akkor natív előugró ablakot generál, és úgy tűnik, háttérbe szorítja az Unityt, és végül elveszíti a követést.

Ez kevésbé volt ideális.

2. lépés: A beszéd szöveggé alakítása Androidon

Elkezdtem tehát olyan bővítmények után kutatni, amelyek nem hozták létre a natív felugró ablakot, és nem sokat találtak, de végül megtaláltam ezt az androidos könyvtárat:

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

Most szó szerint semmit sem tudok a natív Android fejlesztésről, de szerettem volna kihívást jelenteni magamnak, ezért úgy gondoltam, hogy megpróbálok néhány hídkódot írni ehhez a könyvtárhoz, és Android -bővítményké alakítani a Unity -ben. Ismétlem, ez hiba és ólom volt órányi csalódásig.

Aztán végül sikerült…

3. lépés: Tanulságok

Tehát két dolgot tanultam meg ebben a folyamatban, amelyek nem azonnal látszanak, ha csak googlizom, hogyan készítsünk egy Android -bővítményt az egység érdekében.

Az első az, hogy valószínűleg hivatkoznia kell az Android -alkalmazás kontextusára, ha a beépülő modul valami érdekeset fog tenni. Ezt úgy teheti meg, hogy hozzáadja a class.jar fájlt az Unity telepítésből az Android -projekthez könyvtárként. Tehát menjen a fájlprojekt struktúrájához, majd válassza ki az alkalmazásmodul függőségek lapját. Itt a plusz gombra kattintva hozzáadhatja a jar fájlt. Lépjen a Unity buildhez, a lejátszó motorokhoz, az androidplayerhez, a variációkhoz, a monóhoz, a fejlesztéshez, az osztályokhoz és végül az osztályokhoz. Jar. Módosítsa a hatókört csak fordításra. Most egy új java fájlban a következőket teheti:

UnityPlayer.currentActivity.getApplicationContext ();

és használja ezt a hivatkozást, ahol szüksége van rá.

A következő furcsa probléma az, hogy ez a hangfunkció csak a fő szálon futtatható, különben hibákat fog kapni. Annak érdekében, hogy ezt a Unity -ben megtehesse, meg kell mondania a funkciókat és a beépülő modult, hogy futtassák a felhasználói felületen AndroidJavaRunnable -ként, mint a fenti képen.

4. lépés: Küzdelem

Ezen a ponton azt gondolom, hogy Android -szakértő vagyok, Online jelentkezem android fejlesztői munkákra, android matricákat és pólókat rendelek. Az élet jó. Most készen állok arra, hogy kitaláljam, hogyan lehet egy weboldalt megjeleníteni az Unity -ben. Egy kis kutatás után látom, hogy az elfogadott megoldás az Android WebView használata. Ez csak egy Android-osztály, amely lehetővé teszi, hogy az Android-alkalmazáson belül együttműködő webhelyeket jelenítsen meg anélkül, hogy mindent betöltene a böngészőbe. Alapvetően azért, hogy megtartsa a felhasználókat az alkalmazásban. Az első sorrend az, hogy megnézzük, készített -e ehhez valaki unity plugint, amely nyílt forráskódú. Először kipróbálom ezt a bővítményt:

github.com/gree/unity-webview

de csak a WebView -t jeleníti meg az Unity GUI rétegben, így ez nem fog működni. Aztán megtalálom ezt a VR bővítményt:

github.com/IanPhilips/UnityAndroidVRBrowse…

ez lehetővé teszi, hogy a WebView -t textúrává alakítsa, és még interaktív is legyen, ami nagyszerű. Azt hittem, ez a válasz, amíg ki nem próbáltam, és rájöttem, hogy ez blokkolja az összes kattintásomat az egységtől.

5. lépés: Vissza a rajztáblához

Csak megpróbálom elkészíteni a beépülő modulomat ehhez, mert csak arra van szükségem, hogy elküldjek egy képet a webhelyről az egységnek. Kutatásokat végzek ezzel kapcsolatban, és rájövök, hogy elmenthetek egy android vásznat egy bitképre, majd kódolhatom egy-p.webp

Végül sikerült.

Tehát most kapok egy képernyőképet egy webhelyről, ezért nézzük meg, hogyan működik az arcore -val…

Nem.

Úgy értem, hogy egy Galaxy S7 -et használok, amely nem a legújabb telefon, de ez a WebView -tartalom még mindig lefagyasztja az egész alkalmazást, és alapvetően használhatatlan. Feltételezem, hogy azért, mert a WebView és az ARCore egyaránt túlterheli a fő szálat, de nem igazán tudom. Vissza a rajztáblához. Ha ezt szeretnénk megvalósítani, akkor le kell raknunk a nehéz emelést valamilyen szerverre. A Google keresése után kiderül, hogy készíthet egy képernyőképet egy webhelyről, amely Node.js könyvtárral rendelkezik, WebShot néven, amely Phantom JS -t használ, amely egy scriptelhető fej nélküli böngésző.

6. lépés: Végül eljutunk valahová

Most ki kell találnom, hogyan használjam a Node.js -t….

Kiderült, hogy létrehozhat egy Node.js szkriptet, amely meghallgat egy adott portszámot, és amikor találatot kap, abban a portban visszaadhat néhány információt. Ezt kipróbálhatjuk egy kis hello world szkript létrehozásával, amely hallgatja a 3000 -es portot. CD -vel beírhatjuk a könyvtárat a szkripttel, és futtathatjuk a csomópont, majd a parancsfájl nevével. Ha navigálunk az IP -címünkre, majd böngészőnkben a 3000 -es portra, láthatjuk, hogy visszatér a hello world. Most, hogy van egy kis fogalmam a csomópontról, működésbe hozhatom a szerveremen, amelyen a hawkhost.com webhelyeket tárolom. SSH -t teszek a szerverre, és megpróbálok néhány hello world node.js szkriptet futtatni … és semmi sem működik. Újabb néhány órányi kavarodás után rájövök, hogy az adott tárhelyszerveren csak két port van nyitva használatra, ez a 3000 és az 12001.

Tehát ezeknek a portoknak és a tárhely -kiszolgálóim IP -jének használatával kaphatok egy példát a hello world működésére. Ezután telepítem a WebShot modult, és létrehozok egy kis szkriptet, amellyel átadhatom az URL -t, és visszaadja nekem a webhely képét az adott webcímen. Most elindíthatom ezt a csomópont -szkriptet, és elküldhetek egy http -POST kérést az Unity -től a szerverem adott IP- és portszámára, amely visszaad egy bájtos tömböt, amely az adott webhely képe. Köszönöm Istenem. Most egy másik probléma az, hogy amikor bezárom a terminált, a folyamat véget ér, és abbahagyom a hallgatást. További kutatásokat végzek, és találok egy örökre hívott modult. Az NPM örökre telepíthető, és most navigálhatok az örökkévalósághoz, és örökre elindíthatom a szkriptet, és addig fut, amíg be nem jelentkezem, és újra le nem állítom.

7. lépés: Működik

Nagy. De nem elég hűvös.

Ha belegondolok az AR -ban való internetes böngészés értékébe, az a tér hozzáadása. Már nem korlátozódunk egyetlen képernyőre, ezért szeretnék valamit létrehozni, amely lehetővé teszi számomra, hogy vizualizáljam a keresési nyomvonalat közvetlenül előttem. Töltsük be tehát az első keresési oldalt, majd térképezzük fel az oldalt, és bontsunk ki minden keresési eredményt linkként, amelyet aztán képként tölthetünk be a főképernyőnk fölé. Ezt megtehetjük egy másik Node.js szkripttel, amely lekaparja a Google találatainak első oldalát, és örökké folyamatosan futtatja. Ezt sokkal hatékonyabban lehetne megtenni a Google keresési API -jával, de a projekt második számú szabálya nem volt fizetett API, így most ezt fogjuk tenni. Most, hogy megvannak az egyes linkekhez tartozó képek, minden nagyobb kattintásra betölthetjük őket, valahányszor rákattintunk és fellendülünk, van egy szép kis böngészőnk. Nem teljesen működőképes, de vállalom. Rendben, tehát ha maga szeretné futtatni ezt a projektet, menjen a Github webhelyemre, és töltse le az expressVPN projektet:

github.com/MatthewHallberg/ARBrowserExpres…

8. lépés: Minden működjön

Nyissa meg a Unity -ben, és futtasson mindent helyben a gépén. Először meg kell találnia a gép IP -címét, így ha Mac -en van, tartsa lenyomva az opciót, és kattintson a wifi szimbólumra az IP megjelenítéséhez.

Menjen vissza az egységhez, és nyissa meg a böngészővezérlő parancsfájlját, és adja meg az IP -címét, és másolja a vágólapra. Keresse meg a nodeScripts mappát, és tegye az asztalára, nyissa meg a mappát, és módosítsa mindkét kiterjesztést.js fájlra. Nyissa meg az egyes szkripteket, és módosítsa az IP -címet az IP -címére. Most nyissa meg a terminált, és telepítenünk kell néhány dolgot. Telepítse a HomeBrew -t, ha még nem rendelkezik vele.

-brew telepítési csomópont

-npm telepítse a webképet

-npm flatiron telepítése

-npm telepítési unió

-npm telepítse a cheerio -t

Most elindíthatjuk mindkét szkriptet, így a cd -t a nodescripts mappába, és megcsinálhatjuk a getimage.js csomópontot, majd nyissunk meg egy új terminál ablakot, és tegyük meg a getlinks.js csomópontot. Hagyjuk futva mindkét terminál ablakot, és térjünk vissza a szerkesztőbe. Ha megnyomjuk a play gombot, mindennek jól kell működnie. Mehetünk a fájlokhoz, a beállítások létrehozásához, és megnyomjuk a build és a futtatást, hogy letölthessük a telefonunkra! Ha le szeretné állítani a szervereket, nyomja meg a c vezérlőgombot vagy a q parancsot az egész terminál bezárásához.

EZ AZ!