Guía de reconocimiento de gestos para la Web

La tarea de reconocimiento de gestos de MediaPipe te permite reconocer gestos de la mano en tiempo real. proporciona los resultados de gestos reconocidos y los puntos de referencia de la mano de la manos detectadas. Estas instrucciones te muestran cómo usar el Reconocedor de gestos para apps web y de JavaScript.

Para ver esta tarea en acción, consulta el demostración. Para obtener más información sobre las capacidades, los modelos y las opciones de configuración para completar esta tarea, consulta la Descripción general.

Ejemplo de código

El código de ejemplo para el Reconocedor de gestos proporciona una implementación completa de esto en JavaScript para tu referencia. Este código te ayuda a probar esta tarea y obtener empezaste a crear tu propia aplicación de reconocimiento de gestos. Puedes ver, ejecutar y editar el código de ejemplo del Reconocedor de gestos usando solo el navegador web.

Configuración

En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo específicamente para usar el Reconocedor de gestos. Para obtener información general configurar tu entorno de desarrollo web y de JavaScript, lo que incluye de la versión de la plataforma, consulta la Guía de configuración para la Web.

Paquetes de JavaScript

El código del Reconocedor de gestos está disponible a través del @mediapipe/tasks-vision de MediaPipe NPM. Puedes sigue las instrucciones de la plataforma para encontrar y descargar estas bibliotecas. Guía de configuración.

Puedes instalar los paquetes requeridos a través de NPM con el siguiente comando:

npm install @mediapipe/tasks-vision

Si quieres importar el código de la tarea a través de una red de distribución de contenidos (CDN) agrega el siguiente código a la etiqueta <head> de tu archivo HTML:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modelo

La tarea de reconocimiento de gestos de MediaPipe requiere un modelo entrenado que sea compatible tarea. Para obtener más información sobre los modelos entrenados disponibles para el Reconocedor de gestos, consulta la sección Modelos de la descripción general de la tarea.

Selecciona y descarga el modelo; luego, guárdalo en el directorio de tu proyecto:

<dev-project-root>/app/shared/models/

Crea la tarea

Usa una de las funciones createFrom...() del Reconocedor de gestos para preparan la tarea para ejecutar inferencias. Usa el createFromModelPath() con una ruta de acceso absoluta o relativa al archivo de modelo entrenado. Si tu modelo ya está cargado en la memoria, puedes usar createFromModelBuffer().

En el siguiente ejemplo de código, se demuestra el uso de la función createFromOptions() para configurar la tarea. La función createFromOptions te permite personalizar la Reconocedor de gestos con opciones de configuración. Para obtener más información sobre la configuración consulta Opciones de configuración.

En el siguiente código, se muestra cómo compilar y configurar la tarea con Opciones:

// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
  },
  numHands: 2
});

Opciones de configuración

Esta tarea tiene las siguientes opciones de configuración para las aplicaciones web:

Nombre de la opción Descripción Rango de valores Valor predeterminado
runningMode Establece el modo de ejecución de la tarea. Existen dos modos:

IMAGE: Es el modo para entradas de una sola imagen.

VIDEO: el modo para fotogramas decodificados de una o en una transmisión en vivo de datos de entrada, como los de una cámara.		 {IMAGE, VIDEO} IMAGE
num_hands La cantidad máxima de manos puede ser detectada por GestureRecognizer Any integer > 0 1
min_hand_detection_confidence La puntuación de confianza mínima para la detección de la mano considerado exitoso en el modelo de detección de palma. 0.0 - 1.0 0.5
min_hand_presence_confidence La puntuación de confianza mínima de la puntuación de presencia de la mano en la mano de detección de puntos de referencia. En el modo video y el modo de transmisión en vivo del Reconocedor de gestos, si la puntuación de confianza de la presencia de la mano del modelo de punto de referencia de la mano es inferior este umbral, activa el modelo de detección de palma. De lo contrario, el algoritmo de rastreo de manos livianos se usa para determinar la ubicación de las manos para la posterior detección de puntos de referencia. 0.0 - 1.0 0.5
min_tracking_confidence La puntuación de confianza mínima para que se considere el seguimiento de la mano y exitoso. Este es el umbral de IoU del cuadro delimitador entre manos en el fotograma actual y el último. En los modos Video y Transmisión de Reconocedor de gestos; si falla el seguimiento, Reconocedor de gestos activa la mano de detección de intrusiones. De lo contrario, se omitirá la detección de la mano. 0.0 - 1.0 0.5
canned_gestures_classifier_options Opciones para configurar el comportamiento del clasificador de gestos estándar. Los gestos estándar son ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]
  • Configuración regional de los nombres visibles: Es la configuración regional que se usa para los nombres visibles que se especifican a través de los metadatos del modelo de TFLite, si corresponde.
  • Resultados máximos: la cantidad máxima de resultados de clasificación con la puntuación más alta que se mostrarán. Si < 0, se devolverán todos los resultados disponibles.
  • Umbral de puntuación: Es la puntuación por debajo del cual se rechazan los resultados. Si se establece en 0, se devolverán todos los resultados disponibles.
  • Lista de entidades permitidas de categorías: Es la lista de entidades permitidas de nombres de categorías. Si no está vacío, se filtrarán los resultados de clasificación cuya categoría no esté en este conjunto. Este campo y la lista de bloqueo son mutuamente excluyentes.
  • Lista de bloqueo de categoría: Es la lista de bloqueo de nombres de categorías. Si no está vacío, se filtrarán los resultados de clasificación cuya categoría esté en este conjunto. Mutuamente excluyentes con la lista de entidades permitidas.
    		•
    • Configuración regional de los nombres visibles: any string
    • Máx. de resultados: any integer
    • Umbral de puntuación: 0.0-1.0
    • Lista de categorías permitidas: vector of strings
    • Lista de bloqueo de categoría: vector of strings
    • Configuración regional de los nombres visibles: "en"
    • Máx. de resultados: -1
    • Umbral de puntuación: 0
    • Lista de categorías permitidas: vacía
    • Lista de bloqueo de la categoría: vacía
    custom_gestures_classifier_options Opciones para configurar el comportamiento del clasificador de gestos personalizados.
  • Configuración regional de los nombres visibles: Es la configuración regional que se usa para los nombres visibles que se especifican a través de los metadatos del modelo de TFLite, si corresponde.
  • Resultados máximos: la cantidad máxima de resultados de clasificación con la puntuación más alta que se mostrarán. Si < 0, se devolverán todos los resultados disponibles.
  • Umbral de puntuación: Es la puntuación por debajo del cual se rechazan los resultados. Si se establece en 0, se devolverán todos los resultados disponibles.
  • Lista de entidades permitidas de categorías: Es la lista de entidades permitidas de nombres de categorías. Si no está vacío, se filtrarán los resultados de clasificación cuya categoría no esté en este conjunto. Este campo y la lista de bloqueo son mutuamente excluyentes.
  • Lista de bloqueo de categoría: Es la lista de bloqueo de nombres de categorías. Si no está vacío, se filtrarán los resultados de clasificación cuya categoría esté en este conjunto. Mutuamente excluyentes con la lista de entidades permitidas.
    		•
    • Configuración regional de los nombres visibles: any string
    • Máx. de resultados: any integer
    • Umbral de puntuación: 0.0-1.0
    • Lista de categorías permitidas: vector of strings
    • Lista de bloqueo de categoría: vector of strings
    • Configuración regional de los nombres visibles: "en"
    • Máx. de resultados: -1
    • Umbral de puntuación: 0
    • Lista de categorías permitidas: vacía
    • Lista de bloqueo de la categoría: vacía

    Preparar los datos

    El Reconocedor de gestos puede reconocer gestos en imágenes en cualquier formato que admita la navegador del host. La tarea también maneja el procesamiento previo de la entrada de datos, lo que incluye cambio de tamaño, rotación y normalización de valores. Para reconocer gestos en videos, puedes puedes usar la API para procesar rápidamente un fotograma a la vez, con la marca de tiempo del fotograma para determinar cuándo ocurren los gestos en el video.

    Ejecuta la tarea

    El Reconocedor de gestos usa el recognize() (con el modo de ejecución 'image') y Métodos recognizeForVideo() (con el modo de ejecución 'video') para activar para hacer inferencias. La tarea procesa los datos y trata de reconocer la mano y, luego, informa los resultados.

    En el siguiente código, se muestra cómo ejecutar el procesamiento con el modelo de tareas:

    Imagen

    const image = document.getElementById("image") as HTMLImageElement;
const gestureRecognitionResult = gestureRecognizer.recognize(image);

    Video

    await gestureRecognizer.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video);
    processResult(gestureRecognitionResult);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

    Se ejecutan las llamadas a los métodos recognize() y recognizeForVideo() del reconocedor de gestos de forma síncrona y bloquea el subproceso de la interfaz de usuario. Si reconoces gestos en fotogramas de video provenientes de la cámara de un dispositivo, cada reconocimiento bloqueará el conversación. Para evitar esto, implementa trabajadores web para que ejecuten Los métodos recognize() y recognizeForVideo() en otro subproceso

    Para una implementación más completa de la ejecución de una tarea de Reconocedor de gestos, consulta el ejemplo de código de barras.

    Cómo controlar y mostrar resultados

    El Reconocedor de gestos genera un objeto de resultado de detección de gestos para cada reconocimiento. El objeto result contiene puntos de referencia de la mano en coordenadas de imágenes. puntos de referencia de la mano en coordenadas mundiales, mano(izquierda/derecha) y mano categorías de gestos de las manos detectadas.

    A continuación, se muestra un ejemplo de los datos de salida de esta tarea:

    El GestureRecognizerResult resultante contiene cuatro componentes, cada uno de los cuales es un array, en el que cada elemento contiene el resultado detectado de una sola mano detectada.

    • Mano dominante

      La Mano dominante representa si las manos detectadas son la izquierda o la derecha.

    • Gestos

      Las categorías de gestos reconocidas de las manos detectadas.

    • Puntos de referencia

      Hay 21 puntos de referencia de la mano, cada uno compuesto por coordenadas x, y y z. El Las coordenadas x y y se normalizan a [0.0, 1.0] por el ancho de la imagen y altura, respectivamente. La coordenada z representa la profundidad del punto de referencia, con y la profundidad en la muñeca es el origen. Cuanto menor sea el valor, más cerca punto de referencia a la cámara. La magnitud de z usa más o menos la misma escala que x

    • Monumentos universales

      Los 21 puntos de referencia de las manos también se presentan en coordenadas mundiales. Cada punto de referencia está compuesto por x, y y z, que representan coordenadas 3D del mundo real en metros con el origen en el centro geométrico de la mano.

    GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : -3.41E-7
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
    ... (21 landmarks for a hand)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
    ... (21 world landmarks for a hand)

    En las siguientes imágenes, se muestra una visualización del resultado de la tarea:

    Para ver una implementación más completa de la creación de una tarea de Reconocedor de gestos, consulta el ejemplo de código de barras.