Guide de détection des points de repère de position pour le Web

La tâche MediaPipe Pose Marker vous permet de détecter les points de repère de corps humains dans une image ou une vidéo. Vous pouvez utiliser cette tâche pour identifier des emplacements clés du corps, analyser la posture et classer les mouvements. Cette tâche utilise des modèles de machine learning (ML) fonctionnant avec des images ou des vidéos uniques. La tâche génère des points de repère de pose du corps sous forme de coordonnées d'image et en coordonnées mondiales en 3D.

Ces instructions vous expliquent comment utiliser le composant Pose Marker pour les applications Web et JavaScript. Pour en savoir plus sur les fonctionnalités, les modèles et les options de configuration de cette tâche, consultez la présentation.

Exemple de code

L'exemple de code pour Pose Markerer fournit une implémentation complète de cette tâche en JavaScript à titre de référence. Ce code vous aide à tester cette tâche et à créer votre propre application de repère de postures. Vous pouvez afficher, exécuter et modifier l'exemple de code Pose Repèreer à l'aide de votre navigateur Web.

Préparation

Cette section décrit les étapes clés pour configurer votre environnement de développement de manière spécifique afin d'utiliser le composant Pose Markerer. Pour obtenir des informations générales sur la configuration de votre environnement de développement Web et JavaScript, y compris les exigences de version de la plate-forme, consultez le guide de configuration pour le Web.

Packages JavaScript

Le code Pose Marker est disponible via le package MediaPipe @mediapipe/tasks-vision NPM. Vous pouvez trouver et télécharger ces bibliothèques en suivant les instructions du guide de configuration de la plate-forme.

Vous pouvez installer les packages requis via NPM à l'aide de la commande suivante:

npm install @mediapipe/tasks-vision

Si vous souhaitez importer le code de la tâche via un service de réseau de diffusion de contenu (CDN), ajoutez le code suivant dans la balise <head> de votre fichier 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>

Modèle

La tâche MediaPipe Pose Marker nécessite un modèle entraîné compatible avec cette tâche. Pour en savoir plus sur les modèles entraînés disponibles pour le repère de posture, consultez la section Modèles de la présentation des tâches.

Sélectionnez et téléchargez un modèle, puis stockez-le dans le répertoire de votre projet:

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

Créer la tâche

Utilisez l'une des fonctions createFrom...() du repère de posture pour préparer la tâche à l'exécution des inférences. Utilisez la fonction createFromModelPath() avec un chemin d'accès relatif ou absolu au fichier du modèle entraîné. Si votre modèle est déjà chargé en mémoire, vous pouvez utiliser la méthode createFromModelBuffer().

L'exemple de code ci-dessous montre comment utiliser la fonction createFromOptions() pour configurer la tâche. La fonction createFromOptions() vous permet de personnaliser le composant Pose Marker à l'aide d'options de configuration. Pour en savoir plus sur les options de configuration, consultez la section Options de configuration.

Le code suivant montre comment créer et configurer la tâche avec des options personnalisées:

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
    });

Options de configuration

Cette tâche dispose des options de configuration suivantes pour les applications Web et JavaScript:

Nom de l'option Description Plage de valeurs Valeur par défaut
runningMode Définit le mode d'exécution de la tâche. Il existe deux modes:

IMAGE: mode pour les entrées d'une seule image.

VIDEO: mode pour les images décodées d'une vidéo ou d'une diffusion en direct de données d'entrée, par exemple depuis une caméra.
{IMAGE, VIDEO} IMAGE
numPoses Nombre maximal de postures pouvant être détectées par le repère de posture. Integer > 0 1
minPoseDetectionConfidence Score de confiance minimal pour que la détection de poses soit considérée comme réussie. Float [0.0,1.0] 0.5
minPosePresenceConfidence Score de confiance minimal du score de présence de posture dans la détection des points de repère de pose. Float [0.0,1.0] 0.5
minTrackingConfidence Score de confiance minimal pour que le suivi des postures soit considéré comme une réussite. Float [0.0,1.0] 0.5
outputSegmentationMasks Indique si le repère de posture génère un masque de segmentation pour la posture détectée. Boolean False

Préparation des données

Cette fonctionnalité peut détecter les postures dans les images dans n'importe quel format compatible avec le navigateur hôte. Cette tâche gère également le prétraitement de l'entrée des données, y compris le redimensionnement, la rotation et la normalisation des valeurs. Pour marquer des poses dans des vidéos, vous pouvez utiliser l'API afin de traiter rapidement une image à la fois, en utilisant l'horodatage de l'image pour déterminer à quel moment les poses se produisent dans la vidéo.

Exécuter la tâche

Le repère de pose utilise les méthodes detect() (avec le mode d'exécution IMAGE) et detectForVideo() (avec le mode d'exécution VIDEO) pour déclencher des inférences. La tâche traite les données, tente de marquer les poses, puis consigne les résultats.

Les appels aux méthodes detect() et detectForVideo() de Pose Marker s'exécutent de manière synchrone et bloquent le thread d'interposition de l'utilisateur. Si vous détectez des postures dans les images vidéo de l'appareil photo d'un appareil, chaque détection bloque le thread principal. Vous pouvez empêcher cela en implémentant des nœuds de calcul Web pour exécuter les méthodes detect() et detectForVideo() sur un autre thread.

Le code suivant montre comment exécuter le traitement avec le modèle de tâche:

Images

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

Vidéo

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();
  });
}

Pour une implémentation plus complète de l'exécution d'une tâche de repère de posture, consultez l'exemple de code.

Gérer et afficher les résultats

L'outil de repère de position renvoie un objet poseLandmarkerResult pour chaque exécution de détection. L'objet de résultat contient les coordonnées de chaque point de repère de la pose.

Voici un exemple des données de sortie de cette tâche:

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)

La sortie contient à la fois des coordonnées normalisées (Landmarks) et des coordonnées mondiales (WorldLandmarks) pour chaque point de repère.

La sortie contient les coordonnées normalisées suivantes (Landmarks):

  • x et y: coordonnées du point de repère normalisées entre 0,0 et 1,0 en fonction de la largeur (x) et de la hauteur (y) de l'image.

  • z: profondeur du point de repère, avec la profondeur au milieu des hanches comme point de départ. Plus la valeur est faible, plus le point de repère est proche de la caméra. La magnitude de z est à peu près identique à celle de x.

  • visibility: probabilité que le point de repère soit visible dans l'image.

Le résultat contient les coordonnées mondiales suivantes (WorldLandmarks):

  • x, y et z: coordonnées tridimensionnelles réelles en mètres, avec le point médian des hanches comme point de départ.

  • visibility: probabilité que le point de repère soit visible dans l'image.

L'image suivante montre une visualisation du résultat de la tâche:

Le masque de segmentation facultatif représente la probabilité que chaque pixel appartienne à une personne détectée. L'image suivante montre un masque de segmentation du résultat de la tâche:

L'exemple de code Pose Markerer montre comment afficher les résultats renvoyés par la tâche. Consultez l'exemple de code.