Navegador web de realitat augmentada: 9 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:14

Avui passarem a fer un navegador web de realitat augmentada per a Android.

Aquesta idea va començar quan ExpressVPN em va demanar que fes un vídeo patrocinat de YouTube. Com que aquest és el meu primer, volia fer alguna cosa que fos rellevant per al seu producte. Pràcticament de seguida vaig pensar, ohh, només faré un navegador web de realitat augmentada perquè puguem navegar pel web en RA des d’una VPN. No pot ser tan dur, oi? Mal. Em vaig posar algunes limitacions per a aquest projecte perquè el volia utilitzar per aprendre algunes coses noves.

El primer que volia que fos per Android, sempre faig coses amb iOS.

El número dos, no volia utilitzar cap API de pagament, volia que tothom pogués descarregar aquest projecte i executar-lo sense haver de pagar cap cosa en línia. Per tant, no hi ha IBM Watson, ni API de Google ni res de la botiga d’Unity Asset.

COMENCEM!

Pas 1: primer, primer

El primer que volia treballar era una bona solució per a la parla i el text, per poder fer les cerques en línia amb la nostra veu. També crec que la veu és un gran mètode d’interacció en RA, almenys fins que tinguem una bona solució de seguiment manual. Sé que Android té algunes funcions natives de parla i text, de manera que una cerca ràpida a Google ens ajudarà a trobar alguns connectors per a Unity.

Primer vaig trobar aquest complement per a la unitat:

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

Ho vaig provar i va funcionar molt bé. L'únic problema va ser que quan el feu servir amb ARCore, es genera un quadre emergent natiu i sembla que en segon pla d'Unity i acabareu perdent el seguiment.

Això era menys que ideal.

Pas 2: fer que la veu i el text funcioni per a Android

Així que vaig començar a buscar alguns connectors que no mostressin el quadre emergent natiu i que no trobessin gaire, però vaig acabar trobant aquesta biblioteca d'android:

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

Ara no sé literalment res sobre el desenvolupament d'Android natiu, però volia desafiar-me, així que vaig pensar que només intentaria escriure algun codi pont per a aquesta biblioteca i convertir-lo en un connector d'Android per utilitzar-lo a Unity. a hores de frustració.

Després finalment va funcionar …

Pas 3: lliçons apreses

Per tant, hi ha dues coses que vaig aprendre en aquest procés que no es veuen immediatament només en cercar a Google com crear un connector d'Android per a la unitat.

El número u és que probablement haureu d’obtenir una referència al context de l’aplicació per a Android si el vostre complement farà alguna cosa interessant. Podeu fer-ho afegint el fitxer classes.jar de la instal·lació d'Unity al vostre projecte d'Android com a biblioteca. Aneu a l'arxiu de l'estructura del projecte i, a continuació, trieu la pestanya de dependències del mòdul d'aplicació. Aquí podeu fer clic al botó més per afegir el fitxer jar. Aneu a la vostra versió d’Unity, motors de reproducció, androidplayer, variacions, mono, desenvolupament, classes i, finalment, classes.jar. Canvieu l'abast per compilar només. Ara, en un fitxer java nou podeu fer:

UnityPlayer.currentActivity.getApplicationContext ();

i utilitzeu aquesta referència sempre que la necessiteu.

El següent problema estrany és que aquesta funcionalitat de veu només es pot executar al fil principal o bé obtindreu errors. Per fer-ho a Unity, heu de dir a les funcions i al connector que s'executin a la interfície d'usuari com a AndroidJavaRunnable, com la imatge anterior.

Pas 4: lluites

En aquest moment estic pensant que sóc un expert en Android, Sol·licito feina en línia per a desenvolupadors d’Android, demano adhesius i samarretes per a Android. La vida és bona. Ara estic preparat per passar a esbrinar com representar una pàgina web a Unity. Després de fer una petita investigació, veig que la solució acceptada és utilitzar un Android WebView. Aquesta és només una classe d'Android que us permet representar llocs web interaccionables dins d'una aplicació d'Android sense carregar-ho tot al navegador. Bàsicament, és perquè pugueu mantenir els usuaris a la vostra aplicació. La primera qüestió és veure si algú ha creat un connector d’unitat per a això de codi obert. Primer intento aquest complement:

github.com/gree/unity-webview

però només representa un WebView a la capa d’interfície gràfica d’Unity, de manera que això no funcionarà. Llavors trobo aquest complement per a la realitat virtual:

github.com/IanPhilips/UnityAndroidVRBrowse …

això us permet representar un WebView a una textura i fins i tot interactuar, cosa fantàstica. Vaig pensar que aquesta era la resposta fins que ho vaig provar i vaig saber que bloquejava tots els meus clics de la unitat.

Pas 5: torneu al tauler de dibuix

Intentaré crear el meu complement per a això, perquè tot el que realment necessito és enviar una imatge del lloc web a la unitat. Fent algunes investigacions sobre això, descobreixo que puc desar un llenç d'Android en un mapa de bits i després codificar-lo a un-p.webp

Finalment va funcionar.

Així que ara tinc una captura de pantalla d'un lloc web, així que anem a veure com funciona amb arcore …

No ho fa.

Vull dir que estic fent servir un Galaxy S7 que no és el telèfon més recent, però aquestes coses de WebView segueixen congelant tota l'aplicació i bàsicament inutilitzable. Suposo que és perquè WebView i ARCore estan sobrecarregant el fil principal, però realment no ho sé. Tornar al tauler de dibuix. Si volem que això funcioni, haurem de descarregar la càrrega pesada a algun tipus de servidor. Després de fer una mica de Google, resulta que podeu fer una captura de pantalla d'un lloc web amb una biblioteca per a Node.js anomenada WebShot que utilitza Phantom JS, que és un navegador sense cap script.

Pas 6: Finalment, arribem a algun lloc

Ara he d'esbrinar com dimonis utilitzar Node.js …

Resulta que podeu crear un script Node.js que escolti un número de port concret i que, quan obtingui un cop d’accés, pugui retornar-li informació. Podem provar-ho creant un petit script hola world que escolta al port 3000. Podem fer cd al directori amb el script i executar-lo fent el node i després el nom del script. Si naveguem a la nostra adreça IP i, a continuació, al port 3000 del nostre navegador, podrem veure com torna hola world. Ara que tinc una mica de comprensió sobre el node, puc fer funcionar al meu servidor que allotjo els meus llocs web on es troba hawkhost.com. Em dirigeixo al meu servidor i intento executar uns quants scripts hode world node.js … i res no funciona. Després d’unes quantes hores més, he descobert que el meu servidor d’allotjament en particular només té dos ports oberts per utilitzar, és a dir, 3000 i 12001.

Per tant, fent servir aquests ports i la meva IP de servidors d’allotjament, puc obtenir un exemple d’hola world funcionant. A continuació, instal·lo el mòdul WebShot i creeu un petit script que puc passar un URL i em retornarà una imatge del lloc web en aquesta adreça web. Ara puc iniciar aquest script de node i enviar una sol·licitud http POST d’Unity a la IP específica i al número de port del meu servidor que em retornarà una matriu de bytes que és la imatge d’aquest lloc web. Gràcies DÉU. Ara un altre problema és que quan tanco el terminal, el procés finalitza i deixa d’escoltar. Investigo més i trobo un mòdul anomenat forever. NPM s'instal·la per sempre i ara puc navegar per sempre i iniciar per sempre l'script, que continuarà funcionant fins que iniciï la sessió i el torni a aturar.

Pas 7: funciona

Genial. Però no és prou genial.

Quan penso en el valor de navegar pel web a RA prové de l’afegit d’espai. Ja no ens limitem a una sola pantalla, de manera que vull fer alguna cosa que em permeti visualitzar la meva pista de cerca just davant meu. Per tant, carreguem aquesta primera pàgina de cerca i, a continuació, rastregeu-la i extreguem tots els resultats de la cerca com a enllaç, que després podem carregar com a imatge a sobre de la pantalla principal. Ho podem fer amb un altre script Node.js que rasca la primera pàgina dels resultats de Google i l’executa contínuament per sempre. Això es podria fer de manera molt més eficient amb l'API de cerca de Google, però la regla número dos d'aquest projecte no era una API de pagament, així que ho farem ara per ara. Ara que tenim les imatges de cada enllaç, podem carregar-les en una pantalla més gran cada cop que hi fem clic i fem clic, hi tenim un petit navegador aquí. No és del tot funcional, però ho agafaré. Molt bé, si voleu executar aquest projecte vosaltres mateixos, aneu al meu Github i descarregueu-vos el projecte expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Pas 8: fer que tot funcioni

Obriu-lo a Unity i fem que tot funcioni localment al vostre equip. Primer heu de trobar l'adreça IP de la vostra màquina, de manera que si esteu al Mac, només cal que manteniu l'opció i feu clic al símbol wifi per mostrar la vostra IP.

Torneu a la unitat i obriu l'script del controlador del navegador i introduïu-hi la vostra adreça IP i copieu-la al porta-retalls. Cerqueu la carpeta nodeScripts i col·loqueu-la a l'escriptori, obriu-la i canvieu les dues extensions a.js. Obriu cada script i canvieu l'adreça IP a la vostra IP. Ara obriu el terminal i hem d’instal·lar algunes coses. Instal·leu HomeBrew si encara no el teniu.

-node d'instal·lació de cervesa

-npm instal·la webshot

-npm instal·lar planxa

-npm instal·lar unió

-npm instal·leu cheerio

Ara podem iniciar els dos scripts de manera que CD a la carpeta nodescripts i fer el node getimage.js. A continuació, obrirem una nova finestra de terminal i fer el node getlinks.js. Deixeu les dues finestres del terminal en execució i torneu a l'editor. Si premem reproduir, tot hauria de funcionar bé. També podem anar a arxivar, configurar els paràmetres i fer clic a construir i córrer per obtenir-lo al nostre telèfon. Si voleu aturar els servidors, només heu de prémer control c o ordre q per tancar tot el terminal.

AIXÒ ÉS!