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

La tâche MediaPipe Hand Markerer vous permet de détecter les points de repère des mains dans une image. Ces instructions vous expliquent comment utiliser le Hand Markerer. 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 section Présentation.

Exemple de code

L'exemple de code pour Hand Markerer fournit une implémentation complète de cette en JavaScript à titre de référence. Ce code vous aide à tester cette tâche et à obtenir a commencé à créer votre propre application de détection des points de repère de la main. Vous pouvez afficher, exécuter Modifier l'exemple de code Hand Markerer en utilisant uniquement votre navigateur Web.

Configuration

Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement spécifiquement pour utiliser Hand Markerer. Pour obtenir des informations générales sur à configurer votre environnement de développement Web et JavaScript, y compris versions de la plate-forme requises, consultez la Guide de configuration pour le Web

Packages JavaScript

Le code Hand Markerer est disponible via MediaPipe @mediapipe/tasks-vision. NPM. Vous pouvez recherchez et téléchargez ces bibliothèques en suivant les instructions Guide de configuration

<ph type="x-smartling-placeholder">

Vous pouvez installer les packages requis via NPM en exécutant la commande suivante:

npm install @mediapipe/tasks-vision

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

Modèle

La tâche MediaPipe Hand Markerer nécessite un modèle entraîné et compatible avec cette tâche. Pour en savoir plus sur les modèles entraînés disponibles pour Hand Markerer, 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...() Hand Markerer pour : préparer la tâche à exécuter des inférences. Utiliser le createFromModelPath() avec un chemin d'accès relatif ou absolu vers le fichier de modèle entraîné. Si votre modèle est déjà chargé en mémoire, vous pouvez utiliser la 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 Repère de main avec options de configuration Pour en savoir plus sur la configuration consultez la section Options de configuration.

Le code suivant montre comment compiler et configurer la tâche avec des options:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

Options de configuration

Cette tâche comporte les options de configuration suivantes pour le Web et JavaScript applications:

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 y a deux modes:

IMAGE: mode utilisé pour la saisie d'une seule image.

VIDÉO: mode utilisé pour les images décodées d'une image vidéo ou sur un flux en direct de données d'entrée, comme celles d'une caméra.		 {IMAGE, VIDEO} IMAGE
numHands Nombre maximal de mains détectées par le détecteur de points de repère Main. Any integer > 0 1
minHandDetectionConfidence Score de confiance minimal pour que la détection de la main soit considéré comme efficace dans le modèle de détection de paume de la main. 0.0 - 1.0 0.5
minHandPresenceConfidence Score de confiance minimal pour le score de présence de la main dans la main de détection de points de repère. En mode Vidéo et Diffusion en direct : si le score de confiance de présence de la main du modèle des points de repère de la main est inférieur ce seuil, Hand Markerer déclenche le modèle de détection de la paume de la main. Sinon, un l'algorithme léger de suivi des mains détermine l'emplacement les mains pour les détections de points de repère ultérieures. 0.0 - 1.0 0.5
minTrackingConfidence Score de confiance minimal pour que le suivi de la main soit pris en compte réussi. Il s'agit du seuil IoU du cadre de délimitation entre les mains dans le l’image actuelle et la dernière image. Lorsque les modes Vidéo et Flux de Hand Markerer : en cas d'échec du suivi, Hand Markerer déclenche la main. la détection automatique. Dans le cas contraire, il ignore la détection de la main. 0.0 - 1.0 0.5

Préparer les données

Hand Markerer peut détecter les points de repère de la main dans les images dans n'importe quel format compatible avec le navigateur hôte. Elle gère également le prétraitement des entrées de données, le redimensionnement, la rotation et la normalisation des valeurs. Pour détecter les points de repère des mains dans les vidéos, vous pouvez utiliser l'API pour traiter rapidement une image à la fois, à l'aide du code temporel du cadre pour déterminer à quel moment les points de repère de la main apparaissent dans la vidéo.

Exécuter la tâche

Hand Markerer utilise le detect() (avec le mode de course image) et detectForVideo() (avec le mode d'exécution video) pour déclencher les inférences. La tâche traite les données, tente de détecter les points de repère de la main et puis génère un rapport présentant les résultats.

Les appels vers les méthodes detect() et detectForVideo() de Hand Markers sont exécutés. de manière synchrone et bloquent le thread de l'interface utilisateur. Si vous détectez des repères de main dans les images vidéo de la caméra d'un appareil, chaque détection bloque thread. Pour éviter cela, implémentez des nœuds de calcul Web afin d'exécuter detect(). et detectForVideo() sur un autre thread.

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

Image

const image = document.getElementById("image") as HTMLImageElement;
const handLandmarkerResult = handLandmarker.detect(image);

Vidéo

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

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

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

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

Pour une implémentation plus complète de l'exécution d'une tâche Hand Markerer, consultez la exemple de code.

Gérer et afficher les résultats

Pour chaque détection, le Hand Markerer génère un objet permettant de marquer une main. exécuter. L'objet résultant contient des points de repère "main" dans les coordonnées de l'image, "main" points de repère en coordonnées mondiales et main dominante(main gauche/droite) du mains libres.

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

La sortie HandLandmarkerResult contient trois composants. Chaque composant est un tableau, où chaque élément contient les résultats suivants pour une seule main détectée:

  • Main dominante

    La main dominante indique si les mains détectées sont des mains gauches ou droites.

  • Points de repère

    Il y a 21 points de repère de main, chacun composé des coordonnées x, y et z. La Les coordonnées x et y sont normalisées à [0,0, 1,0] par la largeur de l'image et et leur hauteur. La coordonnée z représente la profondeur du point de repère, avec la profondeur au poignet étant l'origine. Plus la valeur est faible, plus la à l'objectif de l'appareil photo. L'amplitude de z utilise à peu près la même échelle que x

  • Monuments mondiaux

    Les 21 points de repère sont également représentés par des coordonnées mondiales. Chaque point de repère est composé de x, y et z, qui représentent des coordonnées 3D réelles dans mètres avec l'origine au centre géométrique de la main.

HandLandmarkerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  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)

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

L'exemple de code Hand Markerer montre comment afficher le renvoyés par la tâche, consultez la exemple de code