Cómo funciona el seguimiento de manos en el navegador

Puedes probarlo ahora. Abre Ink, activa la cámara y señala con el índice para dibujar un hilo de color. Junta el pulgar y el índice para recoger una gota y luego sepáralos para dejar que florezca en el agua.

Esta guía sigue ese proceso paso a paso. Explica qué concede realmente el permiso de cámara, qué devuelve un modelo como MediaPipe Hand Landmarker, cómo unas pocas decenas de números se convierten en un gesto, qué se queda en tu dispositivo y dónde la técnica todavía tiene dificultades. Si te interesa la pregunta más amplia de qué hace que el arte sea interactivo o generativo, El arte generativo interactivo, explicado cubre ese terreno. Aquí nos centramos en el mecanismo.

Cómo funciona, en cinco pasos

1. La página pide la cámara. El navegador muestra un aviso de permiso y no se captura nada hasta que aceptas.
2. Los fotogramas van a un modelo. Cada fotograma del vídeo se entrega a un modelo de visión que se ejecuta dentro de la página.
3. El modelo devuelve puntos clave. Por cada mano que encuentra, genera 21 puntos: la muñeca y las articulaciones y puntas de los dedos.
4. El código deduce gestos. Las distancias, ángulos y velocidades entre esos puntos se convierten en estados como señalar, pellizcar, la palma abierta o el puño.
5. Los gestos se convierten en parámetros. Esos estados se asignan a un sistema visual o sonoro, como una posición, una fuerza o un color.

El resto de la guía recorre cada paso.

Paso 1: pedir la cámara

Una página web no puede ver a través de tu webcam por defecto. Para obtener vídeo, llama a una función del navegador llamada getUserMedia(), que forma parte de la especificación Media Capture and Streams publicada por el W3C. La referencia de MDN sobre getUserMedia describe lo que ocurre después. El navegador pide permiso al usuario y solo si se concede la página recibe un MediaStream, un flujo de fotogramas en directo. Si el usuario lo rechaza, o no hay cámara, la petición falla y la página no recibe nada.

Algunos detalles de este paso importan para la privacidad y para cómo se siente la experiencia:

• La petición es concreta. Una página puede pedir solo vídeo, solo audio o ambos, y puede indicar qué cámara prefiere (por ejemplo, la que mira al usuario). Una página de seguimiento de manos no tiene ningún motivo para pedir el micrófono.
• Necesita un contexto seguro. Según MDN, getUserMedia() solo está disponible en páginas servidas por HTTPS (o desde una dirección local de desarrollo). Una página normal no segura no puede pedir la cámara en absoluto.
• El navegador manda. Los navegadores muestran un indicador mientras la cámara está activa, y puedes revocar el permiso desde la configuración del sitio en cualquier momento. Las reglas se definen en la especificación Media Capture and Streams del W3C.

Fíjate en lo que este paso no implica. Conceder acceso a la cámara no significa que el vídeo se muestre en pantalla, se grabe o se envíe a ningún sitio. La página simplemente recibe fotogramas en memoria. Lo que haga con ellos es otra cuestión, y la sección de privacidad vuelve sobre ello más abajo.

Paso 2: de los fotogramas a un modelo

Una vez que el flujo está en marcha, la página lee fotogramas de él, normalmente conectándolo a un elemento <video> oculto y tomando una muestra en cada fotograma de animación. Cada fotograma muestreado es una imagen, una cuadrícula de píxeles, y se pasa a un modelo.

El modelo más usado para esta tarea en la web es MediaPipe Hand Landmarker, del proyecto MediaPipe de Google. Su documentación describe una tarea que «opera sobre datos de imagen con un modelo de aprendizaje automático (ML), como datos estáticos o como un flujo continuo». Incluye guías para Android, Python y la web. En la web, la página descarga el archivo del modelo y el cálculo se ejecuta dentro del navegador mediante un entorno WebAssembly, con aceleración por GPU opcional.

La tarea tiene tres modos de ejecución. IMAGE procesa imágenes sueltas y VIDEO procesa archivos de vídeo decodificados. LIVE_STREAM es el adecuado para una webcam, y en ese modo los resultados llegan a través de un listener a medida que se procesan los fotogramas. Varios ajustes regulan su comportamiento. num_hands fija cuántas manos buscar, y el valor por defecto es 1. Tres umbrales de confianza (detección, presencia y seguimiento, cada uno 0,5 por defecto) deciden qué seguridad necesita el modelo antes de informar de una mano o seguir rastreándola.

Dos modelos hacen el trabajo, empaquetados juntos en un mismo paquete. Según la documentación de Google:

• Un modelo de detección de palma recorre todo el fotograma buscando algo que parezca una mano.
• Un modelo de detección de puntos clave de la mano examina después esa región de cerca y coloca los puntos.

Esta división es la razón por la que el seguimiento puede ser ligero. En los modos de vídeo y de flujo en directo, una vez encontrada una mano, el modelo de puntos clave puede seguirla de un fotograma a otro. La detección de palma, más pesada, solo tiene que volver a ejecutarse cuando el rastreador pierde la confianza de que hay una mano.

Paso 3: veintiún puntos clave

El resultado que importa es el conjunto de puntos clave. El modelo de manos de MediaPipe devuelve 21 puntos por mano, que la documentación de Google llama «21 coordenadas de los nudillos de la mano»:

• 1 punto para la muñeca
• 4 puntos para cada uno de los cinco dedos: la articulación de la base, dos articulaciones intermedias y la punta

Cada punto llega en dos formas. Las coordenadas de imagen son x e y, normalizadas al ancho y alto del fotograma, más un valor de profundidad relativa. Las coordenadas del mundo son posiciones 3D aproximadas en metros, con el origen en el centro geométrico aproximado de la mano. El modelo también indica la lateralidad, una estimación de si cada mano es izquierda o derecha.

Ayuda imaginar el resultado como un pequeño esqueleto de puntos, redibujado muchas veces por segundo sobre un vídeo que la página nunca necesita mostrarte. Ese esqueleto es lo único con lo que trabaja el resto del sistema. A partir de aquí, el código ya no maneja la imagen de una mano. Maneja 21 puntos y su movimiento.

La documentación también dice que el modelo se entrenó con unas 30.000 imágenes del mundo real, además de modelos sintéticos de manos renderizados sobre fondos diversos. Eso explica en parte por qué funciona con muchos tonos de piel, habitaciones y condiciones de luz, y también por qué todavía pueden engañarlo los ángulos inusuales.

Paso 4: de los puntos a los gestos

Veintiún puntos en movimiento todavía no son un gesto. Convertirlos en algo que una persona pueda hacer con intención, y repetir, es el oficio de las interfaces de seguimiento de manos. El modelo no decide que estás pellizcando. Lo decide el código de la aplicación, a partir de la geometría.

Algunas deducciones habituales:

• Señalar y posición. La punta del índice (o el centro de la palma) se convierte en un cursor. Su x y su y se asignan a la pantalla, normalmente en espejo para que, al mover la mano a la derecha, el cursor vaya a la derecha, como en un espejo.
• Pellizco. Se mide la distancia entre la punta del pulgar y la del índice. Cuando baja de un umbral, relativo al tamaño de la mano para que funcione cerca y lejos de la cámara, empieza un pellizco. Cuando sube por encima de un umbral algo mayor, termina. El margen entre ambos umbrales evita que el estado parpadee.
• Palma abierta y puño. Lo lejos que quedan las puntas de los dedos de la muñeca o del centro de la palma, comparado con sus articulaciones, indica si los dedos están extendidos o doblados. Promediado entre los dedos, da un valor continuo entre abierto y cerrado, y no solo un sí o un no.
• Velocidad y dirección. Comparar la posición de un punto entre fotogramas da la velocidad, de modo que un barrido horizontal rápido se distingue de una deriva lenta.

Enseguida aparecen dos problemas prácticos. El primero es el temblor: los puntos clave tiemblan ligeramente incluso con la mano quieta, así que la mayoría de las aplicaciones los suavizan durante unos fotogramas y aceptan un pequeño retraso a cambio de un movimiento tranquilo. Synfield lo hace con un filtro One Euro sobre el punto rastreado, un paso bajo que se adapta a la velocidad y mantiene tranquilas las manos quietas sin que los movimientos rápidos se noten pegajosos. El segundo es el alcance: la zona que tu mano puede cubrir con comodidad es más pequeña que el campo de la cámara, así que Synfield te deja calibrar los bordes de esa zona y los guarda localmente como preferencia de «zona de la mano» (gestureos.calibration.v1 en la página de privacidad).

Paso 5: de los gestos a un sistema vivo

El último paso es donde el seguimiento de manos deja de ser una demo técnica y se convierte en una experiencia. Los estados de los gestos se asignan a parámetros de lo que esté ejecutando la página, como un campo de partículas, un fluido, un sonido o un conjunto de reflejos.

La asignación es una decisión de diseño, y el mismo pequeño vocabulario de gestos puede significar cosas muy distintas. En los mundos de Synfield, por ejemplo:

• En Helix, señalar enrolla una corriente de luz, un pellizco sostenido la atrae y la rompe en espuma, y al soltar se vuelve a formar una ola de luz. Abrir o cerrar la mano extiende la ola o riza su cresta.
• En Mirror, tu índice dibuja un trazo que se refleja alrededor de un centro. Un pellizco sostenido mueve ese centro, y la palma abierta o el puño añaden o quitan pliegues.
• En Breathe, la mano apenas manda. Un pellizco pausa la luz que respira y al soltar continúa, mientras que abrir o cerrar la mano la amplía o la suaviza.

El proceso es idéntico en los tres. Solo cambia la asignación. Esa es la lección útil para quien construye con seguimiento de manos: el modelo te da los mismos 21 puntos cada vez, y el carácter de la obra depende de lo que dejes que esos puntos signifiquen. Para ver cómo encajan estas asignaciones en los sistemas generativos en general, consulta la sección sobre la cámara de El arte generativo interactivo, explicado.

¿Es privado el seguimiento de manos en el navegador?

Puede serlo, pero depende de cómo esté construido cada sitio. La técnica no lo garantiza. Conviene ser preciso sobre qué partes fija el navegador y qué partes son decisiones del sitio.

Lo que garantiza el navegador. Según la especificación Media Capture y la práctica de los navegadores descrita por MDN, una página no puede leer la cámara sin tu permiso, debe servirse de forma segura para pedirlo y muestra un indicador mientras la cámara está en uso. Puedes retirar el permiso en cualquier momento.

Lo que depende del sitio. Una vez que una página tiene fotogramas, su código puede hacer cualquier cosa con ellos. Eso incluye procesarlos localmente, dibujarlos en pantalla, grabarlos o subirlos a un servidor. MediaPipe Hand Landmarker está diseñado para ejecutarse en el dispositivo, dentro del navegador, así que un sitio que lo use no necesita enviar vídeo a ningún lado para seguir tu mano. Que lo haga o no depende del sitio, así que la prueba honesta es leer su página de privacidad y, si puedes, observar su actividad de red.

Lo que Synfield dice que hace. La página de privacidad de Synfield describe el sitio tal como está construido hoy:

• La cámara está apagada cuando se abre un mundo. Solo se enciende si eliges «Explorar con las manos», o si la activas después desde el control de cámara o con la tecla C.
• La petición es de vídeo de la cámara que te mira, sin micrófono, y la imagen no se muestra en la página.
• Los fotogramas se leen en la página y se pasan a una tarea de visión que también se ejecuta en el navegador. Busca una mano y devuelve puntos. El modelo es un archivo del propio sitio y solo se descarga después de que se encienda la cámara.
• El código del sitio no graba el vídeo, no sube los fotogramas ni los puntos de la mano y no crea ninguna cuenta.
• El contador anónimo de visitas registra solo datos generales, como si se usó un ratón, la pantalla táctil o las manos, y cuándo se encendió la cámara. No incluye nada de la imagen de la cámara ni de los puntos de la mano.

Esas afirmaciones coinciden con el código publicado: Synfield carga MediaPipe Hand Landmarker (@mediapipe/tasks-vision) con el archivo de modelo hand_landmarker.task del propio sitio, fija numHands en 1 e intenta primero un delegado de GPU con alternativa de CPU.

Elegir «Manos» en la página de información de un mundo solo muestra instrucciones y nunca enciende la cámara. La cámara solo se enciende dentro de un mundo, y solo cuando tú lo pides.

La tecnología, en breve

No necesitas conocer las herramientas para disfrutar de una obra con seguimiento de manos, pero ayuda saber qué significan los nombres.

• getUserMedia / Media Capture and Streams. Es el estándar del navegador para acceder a la cámara y al micrófono. Toda experiencia web basada en la webcam empieza aquí. (MDN, W3C)
• MediaPipe Hand Landmarker. La tarea actual de Google para puntos clave de la mano, con un paquete web que carga un modelo y lo ejecuta en la página. Devuelve puntos clave, puntos clave del mundo y lateralidad. (Documentación de Google AI Edge)
• TensorFlow.js y modelos de manos anteriores. Antes de la API actual MediaPipe Tasks, el seguimiento de manos en el navegador se hacía a menudo con modelos de TensorFlow.js como Handpose y con la antigua solución «MediaPipe Hands». Muchos tutoriales todavía usan esos nombres, así que si los ves, describen una generación anterior de la misma idea.
• Una capa de renderizado. Los puntos clave controlan después lo que dibuja la imagen, normalmente WebGL o Canvas. Esa parte es programación gráfica normal, y es donde se toman la mayoría de las decisiones artísticas.

Límites, y por qué el ratón y la pantalla táctil siguen importando

El seguimiento de manos en el navegador funciona lo bastante bien como para hacer arte con él. No funciona en todas partes, y no es la mejor forma de interacción para todo el mundo. Los límites habituales:

• Luz. El modelo ve píxeles. Una habitación oscura, una luz fuerte detrás de ti o una mano en sombra reducen su confianza, y puede perder la mano.
• Distancia y encuadre. Demasiado cerca, partes de la mano salen del encuadre. Demasiado lejos, la mano ocupa solo unos pocos píxeles. A un brazo de distancia de la cámara de un portátil suele ser cómodo.
• Oclusión. Cuando los dedos se superponen o la mano se pone de canto respecto a la cámara, el modelo tiene que adivinar dónde están las articulaciones ocultas, y gestos como el pellizco se vuelven menos fiables.
• Dos manos y otras personas. Más manos significan más ambigüedad y más cálculo. Muchas experiencias siguen solo una mano por este motivo.
• Dispositivos. La inferencia necesita potencia de cálculo. Los portátiles recientes la manejan sin problema. Los dispositivos más antiguos o de bajo consumo pueden rastrear a menor frecuencia o calentarse de forma notable, y los navegadores móviles varían. Synfield no publica una lista cerrada de dispositivos compatibles: el modo manos necesita un contexto seguro, getUserMedia y un navegador que pueda ejecutar el WASM de visión (con GPU cuando esté disponible). Los navegadores de escritorio recientes son la vía cómoda; en móviles la misma tecnología puede funcionar, pero el encuadre y el calor varían, así que la pantalla táctil suele ser más fácil.
• Cuerpos. No todo el mundo puede mantener un brazo levantado mucho tiempo, y no todo el mundo quiere salir en cámara. Una interacción que solo funciona con las manos deja gente fuera.

Por eso, las obras con seguimiento de manos más cuidadas tratan la cámara como una vía de entrada entre varias. En Synfield, todos los mundos se pueden explorar también con ratón o pantalla táctil, y los gestos tienen equivalentes directos. Mantener pulsado el botón del ratón o apoyar un dedo hace lo mismo que un pellizco, y la rueda o separar dos dedos hace lo mismo que abrir y cerrar la mano. La guía Cómo explorar los muestra lado a lado.

Una breve nota histórica

La idea de un cuerpo que dirige una imagen sin tocar nada es más antigua que las webcams. Videoplace, de Myron Krueger, de los años setenta y ochenta, usaba cámaras para introducir la silueta de una persona en una obra que respondía. Esa historia forma parte del relato del arte interactivo, contado en ¿Qué es el arte interactivo?. Lo nuevo es el contexto. Detectar una mano con detalle antes requería hardware especial, y ahora es un archivo de modelo que una página web puede descargar y ejecutar en una pestaña.

Pruébalo

La mejor forma de entender el proceso es sentir cómo responde. Empieza por uno de estos y luego explora:

• Ink: pellizca para recoger una gota, suelta para que florezca.
• Helix: señala para enrollar una corriente de luz.
• Mirror: dibuja un trazo y mira cómo se pliega.
• Breathe: un mundo más lento, donde un pellizco solo pausa la luz.
• Matter: la palma abierta repele un campo de partículas y el puño lo atrae.

O abre Explorar y elige «Explorar con las manos». La cámara sigue apagada hasta que lo hagas.

Preguntas frecuentes

¿Necesito instalar algo para el seguimiento de manos en el navegador? No. Basta con un navegador moderno y una webcam. La página descarga el modelo y lo ejecuta ella misma. Tú solo concedes el permiso de cámara.

¿Es privado el seguimiento de manos con webcam? El navegador garantiza que una página no puede usar tu cámara sin permiso. Que los fotogramas se queden en tu dispositivo depende del sitio. Modelos como MediaPipe Hand Landmarker se ejecutan localmente, así que no hace falta subir nada. Consulta la página de privacidad del sitio. La de Synfield dice que los fotogramas y los puntos de la mano no se graban ni se suben.

¿Qué son los 21 puntos clave de la mano? Son los puntos que el modelo de MediaPipe coloca en cada mano detectada: uno para la muñeca y cuatro para cada dedo, desde la articulación de la base hasta la punta. Los gestos se calculan a partir de las distancias y los ángulos entre ellos.

¿Funciona en el móvil? A menudo sí, cuando el navegador móvil permite el acceso a la cámara y puede ejecutar el modelo de visión en la página. El rendimiento y el encuadre varían según el dispositivo, así que en el móvil la pantalla táctil suele ser la forma más cómoda de entrar.

¿Qué puedo hacer si el seguimiento pierde mi mano? Añade luz delante de ti, colócate a un brazo de distancia de la cámara y mantén la palma hacia ella. Si sigue costando, un ratón o una pantalla táctil ofrecen la misma experiencia.