Realidad Aumentada Interactiva Video Táctil MindAR y A-Frame

Una figura extraña de ingcarlosreina mostrando un ejemplo de realidad aumentada — Como hacer que nuestro video sea táctil usando realidad aumentada

La Realidad Aumentada (RA) ha dejado de ser solo una tecnología para «ver». Hoy, buscamos experiencias inmersivas e interactivas que respondan a nuestras acciones. En este artículo, vamos a llevar un paso más allá una aplicación básica de RA basada en marcadores, permitiendo que un video proyectado sobre un marcador sea completamente táctil: podrás pausarlo y reproducirlo con un simple toque en tu dispositivo móvil.

Utilizaremos dos herramientas de código abierto: MindAR.js para la detección de marcadores y la gestión de la cámara, y A-Frame para construir la escena 3D de forma declarativa.

Realidad Aumentada Interactiva: Dale Vida a tus Videos con MindAR y A-Frame (Play/Pause al Toque)

Antes de comenzar te recomiendo este super post:

Imagina que apuntas la cámara de tu teléfono a una imagen (un «marcador»). Sobre esa imagen, aparece un video. Pero lo realmente genial es que, al tocar la pantalla donde se proyecta el video, este se pausa o se reproduce. ¡Ideal para presentaciones, catálogos interactivos o incluso exposiciones de arte digital!

La Base de Nuestro Proyecto: HTML, A-Frame y MindAR

Aquí tienes el código completo. Lo desglosaremos sección por sección para entender cada parte.

Recuerda que puedes apoyarme en PATREON: Realidad Aumentada Empezando Desde Cero – Ingcarlosreina | Tutoriales de Realidad Aumentada – Augmented Reality Tutorials | Patreon

<!DOCTYPE html>
<html>
<head>
<title>MindAR Video Táctil (Play/Pause)</title>

<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; /* Evita barras de scroll */
}
</style>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<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>

<script>
AFRAME.registerComponent('video-handler', {
init: function () {
this.video = document.querySelector("#vid");
this.video.pause();
this.isPlaying = false;

this.el.addEventListener('click', () => {
if (this.isPlaying) {
this.video.pause();
console.log("Video Pausado");
} else {
this.video.play();
console.log("Video Reproduciendo");
}
this.isPlaying = !this.isPlaying;
});
}
});
</script>
</head>

<body>
<a-scene
mindar-image="imageTargetSrc: ./targets.mind;"
embedded
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false"
>
<a-assets>
<video
id="vid"
src="./videoAR.mp4"
preload="auto"
loop
playsinline
crossOrigin="anonymous">
</video>
</a-assets>

<a-camera
position="0 0 0"
look-controls="enabled: false"
cursor="fuse: false; rayOrigin: mouse;"
raycaster="near: 10; far: 10000; objects: .clickable">
</a-camera>

<a-entity mindar-image-target="targetIndex: 0">
<a-plane
class="clickable"
video-handler
material="src: #vid"
geometry="primitive: plane; width: 1; height: 0.5625;"
position="0 0 0"
rotation="0 0 0"
>
</a-plane>
</a-entity>
</a-scene>
</body>
</html>

Paso a Paso: Entendiendo el Código
Estructura HTML y Meta Etiquetas (<head>):

<title> y <meta name=»description»>: Optimizados para tu blog.
<style>: Un bloque CSS crucial. Resetea los márgenes y padding por defecto del navegador (body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }). Esto asegura que la escena de MindAR ocupe toda la pantalla sin barras de desplazamiento ni espacios en blanco indeseados.
<meta name=»viewport»>: Esencial para la correcta visualización en dispositivos móviles.
Scripts de A-Frame y MindAR: Importamos las librerías necesarias desde sus CDN.

El Componente video-handler (JavaScript):

AFRAME.registerComponent(‘video-handler’, { … });: Creamos un componente personalizado de A-Frame. Este es el «cerebro» que manejará la interacción del video.
this.video = document.querySelector(«#vid»);: Obtenemos una referencia al elemento <video> que definiremos en <a-assets>.
this.video.pause(); y this.isPlaying = false;: Al iniciar, nos aseguramos de que el video esté pausado y que nuestro estado isPlaying refleje eso.
this.el.addEventListener(‘click’, () => { … });: Aquí es donde reside la magia táctil. Cuando el usuario hace clic (o toca) en el elemento al que se le adjunta este componente, esta función se ejecuta.
Dentro de la función, simplemente alternamos entre this.video.play() y this.video.pause(), actualizando la variable this.isPlaying para mantener el estado. Esto controla tanto la imagen como el audio del video.

La Escena AR (<a-scene>):

mindar-image=»imageTargetSrc: ./targets.mind;»: Configura MindAR para que use un archivo de marcador llamado targets.mind. Este archivo debe ser generado previamente con tus propias imágenes de marcadores.
embedded: Indica que la escena debe incrustarse dentro del HTML.
vr-mode-ui=»enabled: false» y device-orientation-permission-ui=»enabled: false»: Desactivan elementos de UI que no necesitamos para esta experiencia de RA.

Recursos (<a-assets>):

<video id=»vid» …>: Aquí declaramos nuestro video.
id=»vid»: Es el identificador que usamos en nuestro componente video-handler.
src=»./videoAR.mp4″: Asegúrate de que tu archivo videoAR.mp4 esté en la misma carpeta que tu index.html.
playsinline: Crucial para que el video se reproduzca directamente en la página web en dispositivos móviles (especialmente iOS), en lugar de abrir el reproductor nativo del sistema.
crossOrigin=»anonymous»: Previene problemas de seguridad al cargar el video en el lienzo de A-Frame, especialmente si el video estuviera alojado en un dominio diferente.

La Cámara (<a-camera>):

cursor=»fuse: false; rayOrigin: mouse;»: Configura un «cursor» que simula la interacción del puntero.
raycaster=»near: 10; far: 10000; objects: .clickable»: Esta es la pieza clave para la interactividad. El raycaster detecta cuando el cursor (o el toque del dedo) «choca» con un objeto en la escena. objects: .clickable le dice que solo preste atención a los elementos que tengan la clase CSS .clickable.

El Marcador y el Contenido 3D (<a-entity mindar-image-target>):

mindar-image-target=»targetIndex: 0″: Esta entidad solo será visible y activa cuando MindAR detecte el primer marcador (índice 0) de tu archivo targets.mind.
<a-plane class=»clickable» video-handler material=»src: #vid» …>: Dentro del marcador, creamos un plano.
class=»clickable»: ¡Fundamental! Sin esta clase, el raycaster de la cámara ignoraría nuestro plano y no detectaría los clics.
video-handler: Adjunamos nuestro componente JavaScript personalizado a este plano, dándole la capacidad de reproducir/pausar el video.
material=»src: #vid»: Indica que el material de este plano debe ser la textura de nuestro video #vid.
geometry=»primitive: plane; width: 1; height: 0.5625;»: Define las dimensiones del plano. Un ancho de 1 y un alto de 0.5625 mantiene una proporción de aspecto 16:9, ideal para la mayoría de los videos modernos.

Requisitos Previos y Cómo Ponerlo en Marcha
Para que esta aplicación funcione, necesitarás lo siguiente:
0
¿Quieres que haga un tutorial de como empezar desde cero con realidad aumentada? Déjame un comentario.x

Tu Video: Un archivo videoAR.mp4 ubicado en la misma carpeta que tu archivo HTML.
Un Marcador: Un archivo targets.mind que contenga una o más imágenes de marcadores. Puedes generarlo usando las herramientas de MindAR (por ejemplo, desde su generador online).
Servidor Web con HTTPS: La API de la cámara del navegador solo funciona en entornos seguros (HTTPS) y no cuando abres un archivo HTML directamente (file://). Puedes usar herramientas como Live Server en VS Code para un servidor local o desplegarlo en plataformas como GitHub Pages o Netlify.

Explorando el Potencial
Este ejemplo sienta las bases para experiencias de RA mucho más complejas. Podrías añadir múltiples videos, superponer botones interactivos, o incluso cambiar el contenido 3D en función de las interacciones del usuario. La combinación de MindAR y A-Frame abre un mundo de posibilidades para desarrolladores y creativos que buscan innovar en la web.

¡Anímate a experimentar y a crear tus propias experiencias de Realidad Aumentada interactiva!

Realidad Aumentada Interactiva: Dale Vida a tus Videos con MindAR y A-Frame (Play/Pause al Toque)

Requisitos Previos y Cómo Ponerlo en Marcha Para que esta aplicación funcione, necesitarás lo siguiente:0¿Quieres que haga un tutorial de como empezar desde cero con realidad aumentada? Déjame un comentario.x

Requisitos Previos y Cómo Ponerlo en Marcha
Para que esta aplicación funcione, necesitarás lo siguiente:
0
¿Quieres que haga un tutorial de como empezar desde cero con realidad aumentada? Déjame un comentario.x