¿Te imaginas poder hacer realidad aumentada directamente con tus manos?
Hace algunos años realizar este tipo de aplicación de realidad aumentada (RA) donde pudiéramos utilizar nuestras manos o incluso cada uno de nuestros dedos como marcadores (Augmented Reality Marker) era imposible, pero gracias a los avances en inteligencia artificial y tecnologías de Augmented Reality (AR), hoy es toda una realidad.
Recuerda lo importante que es para nosotros los desarrolladores aprender a hacer este tipo de aplicaciones para tener una amplia gama de contenido para ofrecer a nuestros clientes: La importancia de aprender a crear realidad aumentada
En este articulo te presentamos una aplicación web (WebAR) que utiliza la potencia de:
- MediaPipe Handpose
- TensorFlow.js
¿De qué se trata?
Esta aplicación, utiliza machine learning junto a el desarrollo web, es capaz de rastrear en tiempo real los movimientos de tu mano frente a la cámara. Lo que la hace especial es su capacidad para identificar y seguir los puntos clave de cada dedo de tu mano derecha o izquierda (No ambas al tiempo), permitiendo la superposición precisa de cualquier elemento plano o 3D.
*Imagina mostrar pequeños logos o iconos flotando mágicamente en la punta de cada uno de tus dedos mientras los mueves.
¿Cómo funciona la magia?
La clave de esta aplicación reside en la combinación de MediaPipe Handpose y TensorFlow.js:
MediaPipe Handpose: Google proporciona un modelo de aprendizaje automático de alto rendimiento que estima las ubicaciones 2D y 3D de 21 puntos clave de una mano a partir de una sola imagen.
TensorFlow.js: Esta biblioteca de JavaScript de código abierto permite ejecutar modelos de machine learning directamente en el navegador web. Gracias a TensorFlow.js, el modelo Handpose puede funcionar sin necesidad de instalar software adicional, ofreciendo una experiencia accesible y fluida para el usuario.
La aplicación captura el video de tu cámara web y alimenta cada fotograma al modelo Handpose. Este identifica las posiciones de los dedos. Una vez que se detecta una mano derecha o izquierda con una confianza y reconocimiento suficiente, la aplicación toma las coordenadas de las puntas de los dedos (pulgar, índice, corazón, anular y meñique) y dibuja las imágenes predefinidas utilizando un canvas en HTML5 o cualquier elemento que quieras agregar.
Aquí te dejo el short de YouTube para que puedas ver el funcionamiento de la aplicación
Si quieres acceder al código fuente puedes descargarlo libremente desde aquí: Tutoriales y Video Tutoriales en la comunidad de Realidad Aumentada