La Realidad Aumentada (WebAR) no se trata solo de superponer modelos 3D sobre el mundo real. A veces, la magia ocurre cuando manipulamos la propia visión del usuario. Hoy vamos a desglosar una técnica avanzada pero esencial: cómo capturar el flujo de video de la cámara (ya sea trasera o frontal) y utilizarlo como textura sobre un marcador.
Esta técnica permite crear efectos de «camuflaje», espejos virtuales o interfaces de usuario que reaccionan a lo que ve el dispositivo.
Antes de continuar con el tutorial te recomiendo esta herramienta para que puedas crear tus propios marcadores para realidad aumentada de manera fácil y gratuita: Compilador de Marcadores AR | Crea Realidad Aumentada Gratis
El Desafío: Gestión de Cámaras en WebAR
Manejar cámaras en el navegador web es una de las habilidades más críticas para un desarrollador de AR hoy en día. No basta con encender la webcam; el reto real reside en:
- Eficiencia de Recursos: Los navegadores móviles suelen limitar el acceso a una sola cámara a la vez. Intentar abrir dos flujos de video simultáneamente puede colgar la aplicación.
- Orientación y «Mirroring»: Un problema clásico es que la cámara trasera a menudo se muestra invertida (efecto espejo) al proyectarse en texturas 3D.
- Multi-dispositivo: Tu código debe funcionar tanto en un iPhone (iOS) como en Android o en una laptop con webcam externa.
Dominar la gestión de la cámara te separa de ser un simple usuario de librerías a ser un verdadero creador de experiencias inmersivas.
Análisis del Código: Eficiencia Pura
Para lograr visualizar la cámara en el marcador sin sobrecargar el procesador, no vamos a solicitar un nuevo acceso a la cámara. En su lugar, vamos a utilizar un truco inteligente: «robaremos» la señal de video que MindAR ya está utilizando para el rastreo.
Aquí tienes el código completo de la solución:
<script>
AFRAME.registerComponent('cam-feed', {
init: function () {
this.el.sceneEl.addEventListener('arReady', () => {
const video = document.querySelector('video');
if (video) {
const texture = new THREE.VideoTexture(video);
const mesh = this.el.getObject3D('mesh');
if (mesh) {
mesh.material.map = texture;
mesh.material.needsUpdate = true;
}
}
});
}
});
</script>Luego sencillamente hacemos en Mindar desde el <a-entity> hacemos el llamado un plano donde pondremos nuestro video.
<a-plane cam-feed position="0 0 0" height="2" width="3.5" rotation="0 0 0" scale="-1 1 1" material="shader: flat"> </a-plane>
¿Cómo funciona este script?
La clave está en el componente personalizado cam-feed. Analicémoslo:
- Reutilización del Stream: En lugar de usar navigator.mediaDevices.getUserMedia (que pediría permisos de nuevo), usamos document.querySelector(‘video’). MindAR crea este elemento video automáticamente para «ver» el mundo. Nosotros simplemente lo tomamos prestado.
- Puente entre HTML y WebGL: La línea const texture = new THREE.VideoTexture(video); es la más importante. Transforma un elemento de video plano de HTML en una textura dinámica que la tarjeta gráfica (GPU) puede pintar sobre cualquier objeto 3D.
- La Corrección del Espejo: ¿Notaste la propiedad scale=»-1 1 1″ en el <a-plane>? Esta es la solución al dolor de cabeza de la orientación. Al escalar en negativo el eje X, invertimos la imagen horizontalmente, asegurando que lo que ves en el marcador coincida con la realidad y no se vea como un espejo invertido.
Tal vez te pueda interesar seguir aprendiendo, te recomiendo este post:
- Realidad Aumentada WebAR lee codigos QR y Codigos de barras
- Keep models 3D or videos always visible using MindAR
- Como agregar y editar texto e imágenes en realidad aumentada
- Crea realidad aumentada utilizando múltiples fotografías
Por qué debes aprender Realidad Aumentada ahora
Implementar soluciones como esta demuestra por qué el desarrollo de AR es una carrera con futuro. Ya no estamos en la era de simples filtros de caras. Las industrias de retail, logística y educación buscan desarrolladores que entiendan cómo mezclar el mundo físico (cámaras) con el digital (WebGL).
Saber manipular el hardware del dispositivo (cámaras, giroscopios) a través del navegador web (WebAR) es una ventaja competitiva enorme. Te permite crear PWAs (Aplicaciones Web Progresivas) que se sienten como apps nativas, sin obligar al usuario a descargar nada.
¿Quieres apoyar mi trabajo? Te invito a que te agregues a mi Patreon y patrocines mi trabajo. Muchas gracias por tu apoyo.
