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 video. Puedes usar esta tarea para identificar las ubicaciones clave del cuerpo, analizar la postura, y categorizar los movimientos. En esta tarea, se usan modelos de aprendizaje automático (AA) que trabajar con imágenes o videos individuales. La tarea muestra los puntos de referencia de la postura corporal en una imagen y en coordenadas mundiales tridimensionales.

Estas instrucciones te muestran cómo usar el marcador de posición de posición para la Web y JavaScript de Google Chat. Para obtener más información sobre las capacidades, los modelos y la configuración para realizar esta tarea, consulta la Descripción general.

Ejemplo de código

El código de ejemplo para Pose Landmarker brinda una implementación completa de este en JavaScript para tu referencia. Este código te ayuda a probar esta tarea y obtener y comenzaste a crear tu app para crear puntos de referencia. Puedes ver, ejecutar y editar el código de ejemplo del marcador de posición de posición 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 Pose Landmarker. 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 de marcador de posición de posición está disponible a través de MediaPipe @mediapipe/tasks-vision. 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 en la sección <head> etiqueta en 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 MediaPipe Pose Landmarker requiere un modelo entrenado que sea compatible con esta tarea. Para obtener más información sobre los modelos entrenados disponibles para Pose Landmarker, consulta la sección Modelos de la descripción general de la tarea.

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

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

Crea la tarea

Usa una de las funciones createFrom...() de Landmarker de Pose para hacer lo siguiente: 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 Pose Landmarker 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:

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 la Web y JavaScript aplicaciones:

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
numPoses La cantidad máxima de poses que puede detectar el Pose aterrizaje. Integer > 0 1
minPoseDetectionConfidence La puntuación de confianza mínima para la detección de poses correctamente. Float [0.0,1.0] 0.5
minPosePresenceConfidence La puntuación de confianza mínima de la presencia en poses en la detección de puntos de referencia de poses. Float [0.0,1.0] 0.5
minTrackingConfidence La puntuación de confianza mínima para el seguimiento de poses para ser considerada exitosa. Float [0.0,1.0] 0.5
outputSegmentationMasks Establece si el marcador de posición de la postura genera una máscara de segmentación para el elemento detectado la pose. Boolean False

Preparar los datos

El marcador de posición puede detectar poses en imágenes en cualquier formato compatible con el 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. Hasta poses emblemáticas en los videos puedes usar la API para procesar rápidamente un fotograma a la vez, con la marca de tiempo del fotograma para determinar el momento en que ocurren las poses en el video.

Ejecuta la tarea

El marcador de posición de la posición usa el objeto detect() (con el modo de ejecución IMAGE) y Métodos detectForVideo() (con el modo de ejecución VIDEO) para activar para hacer inferencias. La tarea procesa los datos, intenta marcar poses como punto de referencia y, luego, informa los resultados.

Se ejecutan las llamadas a los métodos de Pose Landmarker detect() y detectForVideo(). de forma síncrona y bloquearás el subproceso de interposición del usuario. Si detectas poses en fotogramas de video desde la cámara de un dispositivo, cada detección bloquea la principal conversación. Para evitar esto, implementa trabajadores web para ejecutar detect(). y detectForVideo() en otro subproceso.

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 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 pose de Landmarker, consulta la ejemplo de código de barras.

Cómo controlar y mostrar resultados

El marcador de posición de poses muestra un objeto poseLandmarkerResult para cada detección cuando se ejecute. El objeto de 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 de imágenes coordenadas (WorldLandmarks) de cada punto de referencia.

El resultado contiene las siguientes coordenadas normalizadas (Landmarks):

  • x y y: coordenadas de puntos de referencia normalizadas entre 0.0 y 1.0 por el ancho (x) y alto (y) de la imagen.

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

  • visibility: Indica 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: Indica 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:

El código de ejemplo de Pose Landmarker demuestra cómo mostrar el resultados que devolvió la tarea, consulta la ejemplo de código