Navegador web de realidad aumentada: 9 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

Hoy vamos a hacer un navegador web de realidad aumentada para Android.

Esta idea comenzó cuando ExpressVPN me pidió que hiciera un video patrocinado de YouTube. Dado que este es el primero, quería hacer algo que fuera relevante para su producto. Casi de inmediato pensé, ohh, solo haré un navegador web de realidad aumentada para que podamos navegar por la web en AR en una VPN. No puede ser tan difícil, ¿verdad? Incorrecto. Me puse algunas limitaciones para este proyecto porque quería usarlo para aprender algunas cosas nuevas.

Número uno, quería que fuera para Android porque siempre hago cosas con IOS.

Número dos: no quería utilizar ninguna API de pago, quería que todos pudieran descargar este proyecto y ejecutarlo sin tener que pagar nada en línea. Así que nada de IBM Watson, ninguna API de Google y nada de la tienda Unity Asset.

¡EMPECEMOS!

Paso 1: Primero lo primero

Lo primero que quería hacer funcionar era una buena solución de voz a texto para que pudiéramos hacer las búsquedas en línea con nuestra voz. También creo que la voz es un gran método de interacción en AR, al menos hasta que tengamos una buena solución de rastreo de manos. Sé que Android tiene algunas funciones nativas de voz a texto, por lo que una búsqueda rápida en Google nos ayudará a encontrar algunos complementos para Unity.

Primero encontré este complemento para la unidad:

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

Probé esto y funcionó muy bien. El único problema fue que cuando lo usas con ARCore genera un cuadro emergente nativo y parece que Unity se pone en segundo plano y terminas perdiendo el seguimiento.

Esto era menos que ideal.

Paso 2: hacer que Speech to Text funcione para Android

Así que comencé a buscar algunos complementos que no mostraban el cuadro emergente nativo y no pude encontrar mucho, pero terminé encontrando esta biblioteca de Android:

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

Ahora no sé literalmente nada sobre el desarrollo nativo de Android, pero quería desafiarme a mí mismo, así que pensé que solo intentaría escribir un código puente para esta biblioteca y convertirlo en un complemento de Android para usar en Unity. a horas de frustración.

Entonces finalmente funcionó …

Paso 3: lecciones aprendidas

Entonces, hay dos cosas que aprendí en este proceso que no son evidentes de inmediato simplemente buscando en Google cómo hacer un complemento de Android para la unidad.

El número uno es que probablemente necesitará obtener una referencia al contexto de la aplicación de Android si su complemento va a hacer algo interesante. Puede hacer esto agregando el archivo classes.jar de su instalación de Unity a su proyecto de Android como una biblioteca. Así que vaya a la estructura del proyecto de archivo y luego elija la pestaña de dependencias para el módulo de la aplicación. Aquí puede hacer clic en el botón más para agregar el archivo jar. Vaya a su compilación de Unity, motores de reproducción, androidplayer, variaciones, mono, desarrollo, clases y, finalmente, classes.jar. Cambie el alcance para compilar solo. Ahora, en un nuevo archivo java puede hacer:

UnityPlayer.currentActivity.getApplicationContext ();

y use esa referencia donde la necesite.

El siguiente problema extraño es que esta funcionalidad de voz solo se puede ejecutar en el hilo principal o, de lo contrario, obtendrá errores. Para hacer esto en Unity, debe decirle a las funciones y al complemento que se ejecuten en el subproceso de la interfaz de usuario como un AndroidJavaRunnable como en la imagen de arriba.

Paso 4: Luchas

En este punto, creo que soy un experto en Android, Estoy solicitando en línea trabajos de desarrollador de Android, estoy solicitando calcomanías y camisetas de Android. La vida es buena. Ahora estoy listo para pasar a descubrir cómo renderizar una página web en Unity. Después de investigar un poco, veo que la solución aceptada es usar un WebView de Android. Esta es solo una clase de Android que le permite renderizar sitios web que son interactivos dentro de una aplicación de Android sin cargar todo en el navegador. Básicamente, es para que puedas mantener a los usuarios en tu aplicación. La primera orden del día es ver si alguien ha creado un complemento de unidad para esto que sea de código abierto. Primero pruebo este complemento:

github.com/gree/unity-webview

pero solo procesa un WebView en la capa GUI de Unity, por lo que no funcionará. Entonces encuentro este complemento para VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

esto le permite convertir un WebView en una textura y es incluso interactiva, lo cual es genial. Pensé que esta era la respuesta hasta que lo probé y descubrí que estaba bloqueando todos mis clics de la unidad.

Paso 5: Volver al tablero de dibujo

Solo intentaré crear mi complemento on para esto, porque todo lo que realmente necesito es enviar una imagen del sitio web a unity. Investigando un poco sobre eso, descubrí que puedo guardar un lienzo de Android en un mapa de bits y luego codificarlo en un-p.webp

Finalmente funcionó.

Ahora puedo obtener una captura de pantalla de un sitio web, así que veamos cómo funciona con arcore …

No es así.

Quiero decir que estoy usando un galaxy s7 que no es el teléfono más nuevo, pero estas cosas de WebView todavía están congelando toda la aplicación y básicamente inutilizable. Supongo que es porque WebView y ARCore están sobrecargando el hilo principal, pero realmente no lo sé. De vuelta a la mesa de dibujo. Si queremos que esto funcione, tendremos que descargar el trabajo pesado a algún tipo de servidor. Después de buscar en Google, resulta que puede tomar una captura de pantalla de un sitio web con una biblioteca para Node.js llamada WebShot que usa Phantom JS, que es un navegador sin cabeza que se puede programar.

Paso 6: Finalmente estamos llegando a algún lugar

Ahora tengo que averiguar cómo diablos usar Node.js….

Resulta que puede crear un script Node.js que escuche en un número de puerto en particular y cuando lo golpee en ese puerto, puede devolver cierta información. Podemos probar esto creando un pequeño script de hola mundo que escuche en el puerto 3000. Podemos cd en el directorio con el script y ejecutarlo haciendo el nodo y luego el nombre del script. Si navegamos a nuestra dirección IP y luego al puerto 3000 en nuestro navegador, podemos ver que regresa hola mundo. Ahora que tengo un pequeño conocimiento del nodo, puedo hacerlo funcionar en mi servidor donde alojo mis sitios web, que es hawkhost.com. Hago SSH en mi servidor e intento ejecutar algunos scripts de hello world node.js … y nada funciona. Después de algunas horas de jugar, descubrí que mi servidor de alojamiento en particular solo tiene dos puertos abiertos para su uso, es decir, 3000 y 12001.

Entonces, usando esos puertos y la IP de mis servidores de alojamiento, puedo obtener un ejemplo de Hola mundo funcionando. A continuación, instalo el módulo WebShot y creo un pequeño script que puedo pasar una URL y me devolverá una imagen del sitio web en esa dirección web. Ahora puedo iniciar ese script de nodo y enviar una solicitud http POST desde Unity a la IP específica y el número de puerto de mi servidor, que me devolverá una matriz de bytes que es la imagen de ese sitio web. Gracias a DIOS. Ahora otro problema es que cuando cierro mi terminal, el proceso finaliza y deja de escuchar. Investigo un poco más y encuentro un módulo llamado forever. NPM se instala para siempre y ahora puedo navegar hasta para siempre e iniciar el script para siempre y continuará ejecutándose hasta que inicie sesión y lo detenga nuevamente.

Paso 7: ¡Funciona

Excelente. Pero no es lo suficientemente genial.

Cuando pienso en el valor de navegar por la web en AR, proviene de la adición de espacio. Ya no estamos confinados a una sola pantalla, así que quiero hacer algo que me permita visualizar mi rastro de búsqueda justo frente a mí. Así que carguemos esa primera página de búsqueda y luego rastreemos esa página y extraiga cada resultado de búsqueda como un vínculo, que luego podemos cargar como una imagen sobre nuestra pantalla principal. Podemos hacer esto con otro script de Node.js que raspa la primera página de los resultados de Google y lo ejecuta de forma continua para siempre. Esto se podría hacer de manera mucho más eficiente con la API de búsqueda de Google, pero la regla número dos para este proyecto no era una API paga, así que lo haremos así por ahora. Ahora que tenemos las imágenes para cada enlace, podemos cargarlas en una pantalla más grande cada vez que hacemos clic en ellas y boom, tenemos un pequeño navegador aquí. No es completamente funcional, pero lo aceptaré. Muy bien, si desea ejecutar este proyecto usted mismo, vaya a mi Github y descargue el proyecto expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Paso 8: hacer que todo funcione

Ábralo en Unity y hagamos que todo se ejecute localmente en su máquina. Primero debe encontrar la dirección IP de su máquina, por lo que si está en Mac, simplemente mantenga presionada la opción y haga clic en el símbolo wifi para revelar su IP.

Regrese a la unidad y abra el script del controlador del navegador, ingrese su dirección IP allí y cópiela en su portapapeles. Busque la carpeta nodeScripts y colóquela en su escritorio, abra la carpeta y cambie ambas extensiones a.js. Abra cada secuencia de comandos y cambie la dirección IP a su IP. Ahora abre la terminal y tenemos que instalar algunas cosas. Instale HomeBrew si aún no lo tiene.

-nodo de instalación brebaje

-npm instalar webshot

-npm instal flatiron

-npm instalar unión

-npm instalar cheerio

Ahora podemos iniciar ambos scripts, así que cd en la carpeta nodescripts y hacer el nodo getimage.js Y luego abrir una nueva ventana de terminal y hacer el nodo getlinks.js Deje ambas ventanas del terminal ejecutándose y vuelva al editor. Si presionamos reproducir, todo debería funcionar bien. ¡También podemos ir a archivo, configuración de compilación y presionar compilar y ejecutar para obtenerlo en nuestro teléfono! Si desea detener los servidores, simplemente presione el control co el comando q para cerrar toda la terminal.

¡ESO ES TODO!