Manos y gestos de Google en mi laboratorio

Playground Git repositorio en GitHub con nombre hand_gesture_recognition_nextj_playground y referencia a la pagina de producto de Google MediaPipe Hand Landmark

Por que reconocimiento de manos y gestos Cuando descubrí este proyecto supe que tenía que probarlo. Si creciste en los 80 o 90 y nunca recibiste un Power Glove funcional este proyecto trae esa promesa de control directo con la mano. A pesar de muchos intentos y de la llegada de dispositivos VR modernos, la experiencia de un controlador unificado y la interacción fluida con solo las manos sigue siendo algo por explorar

Por que Nextjs viewTransitions Imagina una interfaz con paneles multicapa donde el usuario no sufre pantallas de carga HTTP tradicionales sino que vive en un entorno continuo y coherente que puede crecer manteniendo eficiencia y bajo consumo de recursos. ViewTransitions facilita transiciones suaves entre estados y vistas, ideal para controles gestuales

Estado actual El proyecto es un playground que integra MediaPipe con un ejemplo en Nextjs, controles de camara, ajustes de confianza de tracking y umbrales de gestos. Incluye calibracion por pantalla y resolucion para adaptar la experiencia a diferentes ordenadores y camaras. Tambien contiene componentes reutilizables como slider de imagenes, deslizador horizontal, reproductor de musica con control de volumen y un lienzo claro para interactuar con gestos

Que pienso Creo que vale la pena probarlo. No resonara con todo el mundo, pero con algo de tiempo para acostumbrarse y ajustar opciones puede ser una experiencia disfrutable y servir como base para una app de control para smart TV, HUD para PC, o nuevas experiencias de juego

Futuro Mi plan es agregar mas elementos y construir una sala de control dentro de un componente Clear Canvas para interactuar con herramientas usando dos manos y soportando gestos preconfigurados y personalizados

Tecnologias Nextjs, React, MediaPipe, TypeScript, Tailwind CSS y utilidades de camara y deteccion de gestos

Construir y ejecutar Usa los siguientes comandos en el proyecto pnpm install y luego pnpm dev

Arquitectura Aplicacion basada en Nextjs App Router con capas de proveedores de contexto para opciones de MediaPipe, opciones de gestos, calibracion y el proveedor central de deteccion de manos. MediaPipe maneja vision por computador mientras los componentes UI consumen el estado para mostrar GestureCursor, HandTrackingOverlay y controles de MediaPipe

Rutas principales Página principal con demos y controles, blog con animaciones ViewTransition, galería de tarjetas con transiciones, deslizador horizontal controlado por pellizco, ruta de slider para controlar volumen, lienzo claro para dibujo por gestos y pagina de calibracion para ajustar mapeo camara a pantalla

Proveedores de contexto y gestion de estado MediaPipeOptionsProvider para configuracion y persistencia, GestureOptionsProvider para algoritmos y umbrales de deteccion, CalibrationProvider para transformar coordenadas de camara a pantalla y HandTrackingProvider que carga dinamicamente MediaPipe, inicializa camara y procesa landmarks en tiempo real

Sistema de calibracion La calibracion corrige mismatch entre coordenadas normalizadas de MediaPipe y coordenadas en pixeles de la pantalla, considera la relacion de aspecto de la camara, genera factores de escala y offsets, valida con puntos de referencia y persiste los datos en el navegador para mantener precision y consistencia

Sistema de reconocimiento de gestos Tres modos disponibles Original con distancia 3D entre puntas de dedo para precision, Simple con normalizacion por ancho de palma para mayor tolerancia y Advanced con scoring multi factor que combina distancia de punta, distancia entre articulaciones y deteccion de curvatura de dedos para mayor robustez

Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software a medida especializada en aplicaciones a medida, software a medida e inteligencia artificial. Ofrecemos servicios de ciberseguridad, servicios cloud aws y azure, servicios de inteligencia de negocio y soluciones IA para empresas. Desarrollamos agentes IA, integraciones con power bi y plataformas personalizadas que impulsan la automatizacion y el analisis de datos. Nuestro equipo diseña soluciones escalables y seguras adaptadas a necesidades especificas, combinando experiencia en inteligencia artificial, ciberseguridad y arquitecturas cloud para maximizar retorno de inversion

Llamado a la accion Si quieres explorar proyectos de interaction por gestos, integrar IA en tus procesos o desarrollar software a medida para tu empresa contacta a Q2BSTUDIO para una consultoria y demostracion. Podemos ayudar a llevar conceptos como reconocimiento de manos a productos reales aprovechando servicios cloud, inteligencia de negocio y agentes IA