Guía para la detección de puntos de referencia de posiciones en la Web

La tarea MediaPipe Pose Landmarker te permite detectar puntos de referencia de cuerpos humanos en una imagen o un video. Puedes usar esta tarea para identificar ubicaciones clave del cuerpo, analizar la postura y categorizar los movimientos. En esta tarea, se usan modelos de aprendizaje automático (AA) que funcionan con imágenes o videos individuales. La tarea muestra los puntos de referencia de las posturas del cuerpo en coordenadas de imágenes y en coordenadas mundiales tridimensionales.

En estas instrucciones, se muestra cómo usar Pose Landmarker en apps web y de JavaScript. Para obtener más información sobre las capacidades, los modelos y las opciones de configuración de esta tarea, consulta la Descripción general.

Ejemplo de código

El código de ejemplo de Pose Landmarker proporciona una implementación completa de esta tarea en JavaScript para tu referencia. Este código te ayuda a probar esta tarea y comenzar a compilar tu propia app de punto de referencia de posturas. Puedes ver, ejecutar y editar el código de ejemplo de Pose Landmarker solo con tu navegador web.

Configuración

En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo específicamente para usar Pose Landmarker. Para obtener información general sobre cómo configurar tu entorno de desarrollo web y de JavaScript, incluidos los requisitos de la versión de la plataforma, consulta la Guía de configuración para la Web.

Paquetes de JavaScript

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

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

npm install @mediapipe/tasks-vision

Si deseas importar el código de la tarea a través de un servicio de 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 -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modelo

La tarea de marcador de posición de MediaPipe requiere un modelo entrenado que sea compatible con esta tarea. Si deseas obtener más información sobre los modelos entrenados disponibles para el marcador de posición, consulta la sección Modelos de la descripción general de la tarea.

Selecciona y descarga un modelo, y almacénalo en el directorio del proyecto:

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

Crea la tarea

Usa una de las funciones createFrom...() de marcador de posición en modo de preparación de la tarea para ejecutar inferencias. Usa la función createFromModelPath() con una ruta relativa o absoluta al archivo del modelo entrenado. Si tu modelo ya está cargado en la memoria, puedes usar el método createFromModelBuffer().

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

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

Opciones de configuración

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

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

IMAGE: El modo para entradas de una sola imagen.

VIDEO: Es el modo para los fotogramas decodificados de un video o en una transmisión en vivo de datos de entrada, como los de una cámara.
{IMAGE, VIDEO} IMAGE
numPoses La cantidad máxima de poses que puede detectar el marcador de posiciones. Integer > 0 1
minPoseDetectionConfidence La puntuación de confianza mínima para que la detección de poses se considere exitosa. Float [0.0,1.0] 0.5
minPosePresenceConfidence La puntuación de confianza mínima de la puntuación de presencia de pose en la detección de puntos de referencia de pose. Float [0.0,1.0] 0.5
minTrackingConfidence La puntuación de confianza mínima para que se considere exitoso el seguimiento de la postura. Float [0.0,1.0] 0.5
outputSegmentationMasks Si Pose Landmarker genera una máscara de segmentación para la posición detectada. Boolean False

Preparar los datos

El marcador de posición puede detectar poses en imágenes en cualquier formato que admita el navegador del host. La tarea también controla el procesamiento previo de entrada de datos, incluido el cambio de tamaño, la rotación y la normalización de valores. Para marcar las poses en los videos, puedes usar la API para procesar rápidamente un fotograma a la vez y usar la marca de tiempo del fotograma para determinar cuándo se producen las poses en el video.

Ejecuta la tarea

El marcador de posición usa los métodos detect() (con el modo de ejecución IMAGE) y detectForVideo() (con el modo de carrera VIDEO) para activar las inferencias. La tarea procesa los datos, intenta establecer posturas de punto de referencia y, luego, informa los resultados.

Las llamadas a los métodos detect() y detectForVideo() del marcador de posición de Pose se ejecutan de forma síncrona y bloquean el subproceso de interposición del usuario. Si detectas poses en fotogramas de video de la cámara de un dispositivo, cada detección bloquea el subproceso principal. Puedes evitarlo implementando trabajadores web para que ejecuten los métodos detect() y detectForVideo() en otro subproceso.

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

De imagen

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

Video

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

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

  if (video.currentTime !== lastVideoTime) {
    const poseLandmarkerResult = poseLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

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

Para obtener una implementación más completa de la ejecución de una tarea de marcador de posición, consulta el ejemplo de código.

Cómo controlar y mostrar los resultados

El marcador de posición muestra un objeto poseLandmarkerResult para cada ejecución de detección. El objeto Resultado contiene coordenadas para cada punto de referencia de la pose.

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

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

El resultado contiene coordenadas normalizadas (Landmarks) y coordenadas mundiales (WorldLandmarks) para cada punto de referencia.

El resultado contiene las siguientes coordenadas normalizadas (Landmarks):

  • x y y: Coordenadas del punto de referencia normalizadas entre 0.0 y 1.0 por el ancho (x) y la altura (y) de la imagen.

  • z: Es la profundidad del punto de referencia, con la profundidad en el punto medio de las caderas como origen. Cuanto menor sea el valor, más cerca estará el punto de referencia de la cámara. La magnitud de z usa más o menos la misma escala que x.

  • visibility: Es la probabilidad de que el punto de referencia sea visible dentro de la imagen.

El resultado contiene las siguientes coordenadas mundiales (WorldLandmarks):

  • x, y y z: Coordenadas tridimensionales del mundo real en metros, con el punto medio de las caderas como origen.

  • visibility: Es la probabilidad de que el punto de referencia sea visible dentro de la imagen.

En la siguiente imagen, se muestra una visualización del resultado de la tarea:

La máscara de segmentación opcional representa la probabilidad de que cada píxel pertenezca a una persona detectada. La siguiente imagen es una máscara de segmentación del resultado de la tarea:

En el código de ejemplo de Pose Landmarker, se muestra cómo mostrar los resultados que muestra la tarea; consulta el ejemplo de código.