Guide de reconnaissance des gestes pour le Web

La tâche de reconnaissance de gestes MediaPipe vous permet de reconnaître des gestes de la main en temps réel. fournit les résultats du geste reconnu de la main et les points de repère de la main de détection des mains. Ces instructions vous expliquent comment utiliser la reconnaissance de gestes pour les applications Web et JavaScript.

Pour voir concrètement en quoi consiste cette tâche, consultez le demo. 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 la reconnaissance de gestes 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 vous avez commencé à créer votre propre application de reconnaissance gestuelle. Vous pouvez afficher, exécuter modifier l'exemple de code de la reconnaissance de gestes 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 la reconnaissance de gestes. 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 de reconnaissance de gestes 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 balise <head> de 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 de reconnaissance de gestes MediaPipe 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 la reconnaissance de gestes, consultez la section Modèles de la présentation des tâches.

Sélectionnez et téléchargez le 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...() de la reconnaissance de gestes 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 Outil de reconnaissance de gestes 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:

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

Options de configuration

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

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
num_hands Le nombre maximal de mains peut être détecté par le GestureRecognizer. Any integer > 0 1
min_hand_detection_confidence 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
min_hand_presence_confidence Score de confiance minimal du score de présence d'une main dans la main de détection de points de repère. En mode Vidéo et Diffusion en direct de l'outil de reconnaissance de gestes, si le score de confiance de présence de la main du modèle de repère de la main est inférieur à ce seuil déclenche le modèle de détection de la paume de la main. Sinon, un l'algorithme léger de suivi des mains est utilisé pour déterminer la position les mains pour la détection ultérieure des points de repère. 0.0 - 1.0 0.5
min_tracking_confidence 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 Outil de reconnaissance de gestes (en cas d'échec du suivi), il déclenche la reconnaissance de gestes la détection automatique. Sinon, la détection de la main est ignorée. 0.0 - 1.0 0.5
canned_gestures_classifier_options Options de configuration du comportement du classificateur de gestes prédéfinis. Les gestes standardisés sont ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]
  • Paramètres régionaux des noms à afficher: paramètres régionaux à utiliser pour les noms à afficher spécifiés via les métadonnées de modèle TFLite, le cas échéant.
  • Nombre maximal de résultats: nombre maximal de résultats de classification les mieux notés à renvoyer. Si < 0, tous les résultats disponibles sont renvoyés.
  • Seuil de score: score en dessous duquel les résultats sont rejetés. Si la valeur est définie sur 0, tous les résultats disponibles sont renvoyés.
  • Liste d'autorisation de catégories: liste d'autorisation des noms de catégories. Si cette valeur n'est pas vide, les résultats de classification dont la catégorie n'est pas dans cet ensemble seront filtrés. Exclusion mutuelle avec la liste de blocage.
  • Liste de blocage des catégories: liste de blocage des noms de catégories. Si cette valeur n'est pas vide, les résultats de classification dont la catégorie appartient à cet ensemble seront filtrés. Exclusion mutuelle avec la liste d'autorisation.
    		•
    • Paramètres régionaux pour les noms à afficher: any string
    • Nombre maximal de résultats: any integer
    • Seuil de score: 0.0-1.0
    • Liste d'autorisation de catégories: vector of strings
    • Liste de blocage de catégorie: vector of strings
    • Paramètres régionaux pour les noms à afficher: "en"
    • Nombre maximal de résultats: -1
    • Seuil de score: 0
    • Liste d'autorisation de catégories: vide
    • Liste de blocage de catégories: vide
    custom_gestures_classifier_options Options de configuration du comportement du classificateur de gestes personnalisés.
  • Paramètres régionaux des noms à afficher: paramètres régionaux à utiliser pour les noms à afficher spécifiés via les métadonnées de modèle TFLite, le cas échéant.
  • Nombre maximal de résultats: nombre maximal de résultats de classification les mieux notés à renvoyer. Si < 0, tous les résultats disponibles sont renvoyés.
  • Seuil de score: score en dessous duquel les résultats sont rejetés. Si la valeur est définie sur 0, tous les résultats disponibles sont renvoyés.
  • Liste d'autorisation de catégories: liste d'autorisation des noms de catégories. Si cette valeur n'est pas vide, les résultats de classification dont la catégorie n'est pas dans cet ensemble seront filtrés. Exclusion mutuelle avec la liste de blocage.
  • Liste de blocage des catégories: liste de blocage des noms de catégories. Si cette valeur n'est pas vide, les résultats de classification dont la catégorie appartient à cet ensemble seront filtrés. Exclusion mutuelle avec la liste d'autorisation.
    		•
    • Paramètres régionaux pour les noms à afficher: any string
    • Nombre maximal de résultats: any integer
    • Seuil de score: 0.0-1.0
    • Liste d'autorisation de catégories: vector of strings
    • Liste de blocage de catégorie: vector of strings
    • Paramètres régionaux pour les noms à afficher: "en"
    • Nombre maximal de résultats: -1
    • Seuil de score: 0
    • Liste d'autorisation de catégories: vide
    • Liste de blocage de catégories: vide

    Préparer les données

    L'outil de reconnaissance de gestes peut reconnaître des gestes dans des 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 reconnaître des gestes dans des vidéos, vous : vous pouvez utiliser l'API pour traiter rapidement une image à la fois, à l'aide du code temporel du pour déterminer quand les gestes se produisent dans la vidéo.

    Exécuter la tâche

    L'outil de reconnaissance de gestes utilise recognize() (avec le mode Course 'image') et recognizeForVideo() (avec le mode d'exécution 'video') pour déclencher les inférences. La tâche traite les données, tente de reconnaître la main des gestes, puis renvoie les résultats.

    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 gestureRecognitionResult = gestureRecognizer.recognize(image);

    Vidéo

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

    Les appels des méthodes recognize() et recognizeForVideo() de la reconnaissance de gestes s'exécutent de manière synchrone et bloquent le thread de l'interface utilisateur. Si vous reconnaissez des gestes dans d'images vidéo provenant de l'appareil photo d'un appareil, chaque reconnaissance bloque thread. Pour éviter cela, implémentez des nœuds de calcul Web afin d'exécuter Méthodes recognize() et recognizeForVideo() sur un autre thread.

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

    Gérer et afficher les résultats

    L'outil de reconnaissance de gestes génère un objet de résultat de la détection de gestes pour chaque de reconnaissance vocale. L'objet de résultat contient des points de repère de main dans les coordonnées de l'image, points de repère de la main en coordonnées mondiales, main gauche(main gauche/droite) et main dominante catégories de gestes des mains détectées.

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

    Le résultat GestureRecognizerResult contient quatre composants, chacun sous la forme d'un tableau, où chaque élément contient le résultat détecté par une seule main détectée.

    • Main dominante

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

    • Gestes

      Catégories de gestes reconnus par les mains détectées.

    • 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 se compose 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.

    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)

    Les images suivantes illustrent le résultat de la tâche:

    Pour une implémentation plus complète de la création d'une tâche de reconnaissance de gestes, consultez la exemple de code.