AR interactiva: Utilizando MindAR para mostrar video en Realidad Aumentada para Android, iOS y otros dispositivos
¡Bienvenidos a este nuevo tutorial aumentados!
Si ya dominas la RA con AR.js, ¡es hora de un upgrade! En este tutorial, exploraremos MindAR, una poderosa alternativa que te permitirá crear experiencias más robustas y fluidas. Aprenderemos a integrar videos en tus proyectos de RA, dándoles vida con controles de reproducción, pausa y volumen. A diferencia de las soluciones anteriores, MindAR ofrece un rendimiento superior y una configuración optimizada, haciendo de este un paso adelante para tus proyectos.
Aquí están estos posts si te interesa crear una app de video en realidad aumentada utilizando AR.js
Como poner un video en realidad aumentada en android y pc
Como poner un video en realidad aumentada en ios y desktop
Trabajar con videos en MindAR tiene una gran ventaja: necesitas desarrollar una sola aplicación que funciona en todos los dispositivos.
Anteriormente, con la versión de AR.js con la que trabajé, era necesario crear dos códigos distintos para manejar las restricciones de seguridad de iOS y Android. Esto resultaba en dos aplicaciones separadas con cambios mínimos, que no podían combinarse sin causar errores.
Gracias a MindAR, este problema se elimina, permitiendo un desarrollo más eficiente y unificado.
¡Pasemos a lo que vinimos!
HAZ PARTE DE LA COMUNIDAD DE REALIDAD AUMENTADA EN WHATSAPP PARA OBTENER EL CODIGO FUENTE EN UN ARCHIVO ZIP.
Hagamos una explicación del código
El código HTML se divide en varias secciones clave que definen la escena de RA y sus componentes.
- Cabecera y Scripts:
La <head> incluye el título de la página y las bibliotecas esenciales. Aquí cargamos A-Frame, un framework para construir experiencias de realidad virtual y aumentada, y MindAR, que se integra con A-Frame para el reconocimiento de imágenes.
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
- La Escena de Realidad Aumentada:
El elemento <a-scene> es el contenedor principal de todo el contenido de RA. El atributo mindar-image es el corazón de la aplicación, donde se configura el archivo de la imagen objetivo (targets.mind) y los parámetros de seguimiento.
<a-scene mindar-image="imageTargetSrc: ./targets.mind; ..." color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights: true" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
La línea mindar-image utiliza la configuración optimizada que me proporcionaste, asegurando una detección robusta y estable del marcador.
- Recursos (Assets):
La sección <a-assets> es fundamental para precargar recursos como videos e imágenes antes de que la escena se renderice. Esto mejora el rendimiento y evita retrasos.
<video>: El video videoAR.mp4 se carga aquí. Atributos como crossorigin, playsinline, y webkit-playsinline son vitales para asegurar que el video se reproduzca correctamente en dispositivos iOS.
<img>: Aquí se cargan las imágenes PNG para los botones de control (reproducir, pausar y volumen).
- La Cámara y el Cursor:
La <a-camera> define el punto de vista del usuario. La magia de la interactividad ocurre aquí con los atributos cursor y raycaster.
cursor=»fuse: false; rayOrigin: mouse;»: Permite que el mouse o el toque en la pantalla actúen como un cursor, habilitando los clics.
raycaster=»…»: Este componente detecta qué objetos 3D son «tocados» por el cursor. El atributo objects: .clickable le indica al raycaster que solo preste atención a los elementos con la clase CSS .clickable.
- El Marcador y el Contenedor:
El elemento <a-entity mindar-image-target=»targetIndex: 0″> es el contenedor principal del contenido 3D. Todo lo que esté dentro de esta etiqueta aparecerá superpuesto sobre la primera imagen que MindAR detecte.
- El Video en Realidad Aumentada:
El video se inserta en la escena con la etiqueta <a-video>.
src=»#videoAR»: Vincula el video desde los assets.
width=»2″ height=»1″: Define el tamaño del video en la escena 3D.
position=»0 0.5 0″: Coloca el video ligeramente por encima del marcador.
- Los Botones Interactivos:
Los botones se crean con <a-circle> para darles una forma redonda y <a-image> para mostrar el icono PNG.
class=»clickable»: Esta clase es crucial para que el raycaster de la cámara pueda detectar los clics en los botones.
position=»…»: Estos valores de posición colocan los botones debajo del video.
La Lógica: El Código JavaScript
El bloque de <script> en la parte inferior del archivo contiene la lógica de JavaScript que controla el comportamiento de la aplicación.
Variables y Eventos: Se obtienen referencias a los elementos del DOM (video, botones, imágenes) y se les añaden «listeners» que esperan un evento de clic.
playPauseButton.addEventListener('click', () => { ... });
muteButton.addEventListener('click', () => { ... });
video.addEventListener('ended', () => { ... });- Funcionalidad del Botón Play/Pause:
Cuando se hace clic, el código verifica si el video está en pausa (video.paused).
Si está en pausa, llama a video.play() y cambia la imagen del botón al icono de pausa (#pause-img).
Si está reproduciéndose, lo pausa (video.pause()) y cambia la imagen de vuelta al icono de reproducir (#play-img).
- Funcionalidad del Botón de Volumen:
El muteButton alterna la propiedad video.muted, silenciando o reactivando el audio.
El código también cambia dinámicamente la imagen del botón entre #volume-off-img (silencio) y #volume-on-img (sonido).
- Reinicio Automático:
El video.addEventListener(‘ended’, …) asegura que, al finalizar el video, este se reinicie al segundo 0 y se pause automáticamente, mostrando el icono de reproducir para que el usuario pueda volver a verlo.
Este código es un ejemplo robusto y bien estructurado para crear una experiencia de RA que muestre un video. Combinando la potencia de MindAR para el seguimiento de imágenes y la simplicidad de A-Frame para la escena 3D, es posible crear experiencias inmersivas que funcionan en múltiples plataformas con una única base de código.