Como poner un video sin fondo en realidad aumentada WebAR

Guía Definitiva: Videos Transparentes en WebAR con MindAR (Incluyendo FFmpeg)

ingcarlosreina mostrando su telefono como marcador de realidad aumentada para una app que muestra un video sin fondo — Como poner un video sin fondo en WebAR

Sigue la comunidad de WhatsApp de Realidad Aumentada Empezando desde cero desde el siguiente link: Comunidad WhatsApp

En el emocionante mundo de la Realidad Aumentada (RA) en la web, los videos con transparencia ofrecen una experiencia inmersiva y sorprendente; ahora puedes hacer que tus videos floten limpiamente sobre el mundo real capturado por la cámara.

En este tutorial aprenderás los conceptos clave de la transparencia de video.

Como crear un archivo con fondo transparente usando la herramienta gratuita FFmpeg, hasta integrarlo en tu aplicación WebAR con MindAR y A-frame.

y como digo siempre: ¡Comencemos!

Comprendiendo la Transparencia en Video

Canal Alfa vs. Chroma Key (Fondo Verde)

Canal Alfa (La Transparencia Real)

Imagina que cada píxel de tu video no solo tiene información de color (Rojo, Verde, Azul), sino también una cuarta información: su nivel de opacidad. Esto es el Canal Alfa.

¿Cómo funciona? Un píxel con un valor alfa de 0% es completamente transparente, uno con 100% es completamente opaco, y los valores intermedios permiten semitransparencia.

Ventajas: Permite transparencias complejas, bordes suaves y es la forma más «limpia» de integrar elementos sin fondo. No depende de colores específicos.

Uso: Ideal para gráficos en movimiento, objetos aislados, texto animado, y lo que buscamos en WebAR.

Chroma Key (Fondo Verde/Azul)

Esta es una técnica de post-producción que probablemente has visto en el cine o la televisión.

¿Cómo funciona? Se graba a un sujeto o se crea una animación sobre un fondo de un color sólido y uniforme (generalmente verde o azul, de ahí el «fondo verde»). Luego, en la edición, se le indica al software que «elimine» ese color específico, haciendo que se vea transparente.

Ventajas: Permite grabar personas u objetos reales y luego separarlos del fondo. Es una técnica muy establecida.

Desventajas: Puede haber «derrames» de color (el verde se refleja ligeramente en el sujeto), los bordes pueden no ser perfectos y requiere que el sujeto no tenga el mismo color que el fondo.

Lo más importante: un video exportado con Chroma Key no tiene un canal alfa; el fondo «eliminado» suele ser reemplazado por negro si el reproductor no aplica el efecto en tiempo real.

Conclusión para WebAR: Para tener un video sin fondo que se superponga perfectamente en tu escena de MindAR, necesitas un video con un canal alfa real. Los videos con solo «fondo verde» no funcionarán directamente en el navegador sin un procesamiento adicional.

¿Sabes cómo poner un video en realidad aumentada? Aquí te dejo como hacerlo: Como poner un video en realidad aumentada para Android e iOS

El Formato y Códec Correcto: WebM (VP9)

Ahora que sabemos que necesitamos un canal alfa, ¿qué formato de video lo soporta y es compatible con los navegadores web modernos (y, por extensión, con MindAR/A-Frame)?

La respuesta es: WebM con el códec de video VP9.

Contenedor: .webm

WebM es un formato de archivo multimedia diseñado específicamente para la web. Es abierto y libre de regalías.

Códec de Video: VP9

VP9 es un códec de compresión de video desarrollado por Google. Es eficiente y, crucialmente, soporta un canal alfa.

Otros códecs como H.264 (comúnmente usado en MP4) no soportan canal alfa.

Tu video transparente final debe ser un archivo .webm codificado con VP9 para que funcione correctamente en MindAR.

Usar FFmpeg para Convertir un Video de Fondo Verde en uno con Canal Alfa (WebM/VP9)

Si no tienes acceso a software profesional como Adobe After Effects (Como yo que no lo tengo) para exportar directamente videos .webm con alfa, la suite de herramientas FFmpeg es tu mejor aliada. Es gratuita, extremadamente potente y, aunque de línea de comandos, es muy efectiva.

Pre-requisito: Necesitas tener un video donde tu sujeto esté sobre un fondo verde sólido y uniforme. Puedes crearlo fácilmente con herramientas online gratuitas como CapCut o RunwayML asegurándote de exportar un MP4 con un fondo verde.

para motivos de este tutorial yo descargue este video: GALLETA jengibre bailando pantalla verde 🎅 [ efecto chroma key para NAVIDAD ]

Pasemos a la parte del FFmpeg:

Paso 1: Descarga e Instalación de FFmpeg

Visita el sitio oficial: ffmpeg.org/download.html.

Descarga la versión para tu sistema:

Windows: Descarga un «build» (una versión compilada). Puedes usar enlaces como Gyan o BtbN. Elige el archivo .zip y descomprímelo en una carpeta fácil de recordar, por ejemplo, C:\ffmpeg.

macOS: Puedes instalarlo fácilmente usando Homebrew: abre la Terminal y escribe brew install ffmpeg.

Linux: Usa tu gestor de paquetes (ej., sudo apt install ffmpeg para Ubuntu/Debian, sudo pacman -S ffmpeg para Arch).

Paso 2: Prepara tus Archivos

Asegúrate de que tu video con fondo verde (por ejemplo: videoconfondoverde.mp4) esté en una ubicación fácil de acceder.

Abre tu terminal (o Símbolo del Sistema/PowerShell en Windows).

Paso 3: Ejecuta el Comando FFmpeg

Navega a la carpeta de tu video: Usa el comando cd para ir a la carpeta donde está tu video con fondo verde.

Ejemplo Windows: cd C:\Users\TuUsuario\Videos

Ejemplo macOS/Linux: cd ~/Desktop/MiProyectoVideos

Ejecuta el comando de conversión: Copia y pega el siguiente comando.

Para Windows (si ffmpeg.exe está en C:\ffmpeg\bin):

C:\ffmpeg\bin\ffmpeg.exe -i videoconfondoverde.mp4 -filter_complex "[0:v]chromakey=0x00FF00:0.1:0.2[out]" -map "[out]" -c:v libvpx-vp9 -pix_fmt yuva420p mi_video_transparente.webm

Para macOS/Linux (si FFmpeg está en tu PATH, lo cual es común con Homebrew/apt):

ffmpeg -i videoconfondoverde.mp4 -filter_complex "[0:v]chromakey=0x00FF00:0.1:0.2[out]" -map "[out]" -c:v libvpx-vp9 -pix_fmt yuva420p mi_video_transparente.webm

Expliquemos que significa todos estos codigos:

-i videoconfondoverde.mp4.mp4: Especifica tu archivo de entrada. Cámbialo al nombre de tu archivo de video.

-filter_complex «[0:v]chromakey=0x00FF00:0.1:0.2[out]»: Aplica el filtro de Chroma Key.

0x00FF00: Es el código hexadecimal para el verde puro. Si tu fondo verde es diferente, puedes ajustarlo (ej., 0x008000 para un verde más oscuro).

0.1: Es la similitud del color (qué tan cerca debe ser un píxel del color clave para ser eliminado). Ajusta si hay «ruido».

0.2: Es la mezcla o suavizado de los bordes. Ajusta si los bordes se ven muy duros o con «halo».

-map «[out]»: Indica que queremos usar la salida de nuestro filtro.

-c:v libvpx-vp9: Especifica el códec de video VP9, crucial para la transparencia.

-pix_fmt yuva420p: Indica que el formato de píxeles debe incluir un canal alfa (la ‘A’ en yuva). Sin esto, VP9 no guardará la transparencia.

mi_video_transparente.webm: El nombre de tu archivo de salida. Cámbialo a tu nombre deseado.

listo! Ya podemos iniciar a crear nuestra aplicación de realidad aumentada paso a paso desde cero.

Aquí tenemos el script de nuestro HTML:

<script>
document.addEventListener('DOMContentLoaded', () => {
const miMarcador = document.querySelector('#miMarcador');
const miVideo = document.querySelector('#miVideo');

miMarcador.addEventListener('targetFound', event => {
console.log("✅ Marcador encontrado, reproduciendo video.");
miVideo.play();
});

miMarcador.addEventListener('targetLost', event => {
console.log("❌ Marcador perdido, pausando video.");
miVideo.pause();
});
});
</script>

Seccion de codigo de MindAR y A-frame:

Para esta sección utilice la app de realidad aumentada empezando desde cero para la creación de marcadores de la librería MindAR (.mind)

Compilador de Marcadores AR | Crea Realidad Aumentada Gratis

En este tutorial utilice esta imagen como marcador:

<a-scene
mindar-image="imageTargetSrc: ./targets.mind;"
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false"
>

<a-assets>
<video
id="miVideo"
src="./video_transparente.webm"
loop
muted
playsinline
webkit-playsinline
></video>
</a-assets>

<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

<a-entity id="miMarcador" mindar-image-target="targetIndex: 0">
<a-plane
position="0 0 0"
rotation="0 0 0"
width="1"
height="1"
material="
src: #miVideo;
transparent: true;
shader: flat;
opacity: 1;
"
></a-plane>
</a-entity>
</a-scene>

y el resto del HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Video Controlado por Marcador - MindAR</title>

<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>
</head>
<body>
</body>
</html>

Utilizar la herramienta FFmpeg puede llegar a ser compleja de entender es por eso que decidí agregar un video para su explicacion.