La tâche de reconnaissance de gestes MediaPipe vous permet de reconnaître des gestes de la main en temps réel et fournit les résultats des gestes reconnus et les points de repère des mains détectées. Ces instructions vous expliquent comment utiliser l'outil de reconnaissance de gestes pour les applications Web et JavaScript.
Pour voir cette tâche en action, regardez la démonstration. 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 de la reconnaissance de gestes 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 reconnaissance des gestes. Vous pouvez afficher, exécuter et modifier l'exemple de code de la reconnaissance de gestes à 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 à utiliser la reconnaissance de gestes. 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 de la reconnaissance de gestes 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 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 de reconnaissance de gestes 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 à 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 la reconnaissance de gestes à 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:
// 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 dispose des 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 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 |
num_hands |
Le GestureRecognizer peut détecter le nombre maximal d'aiguilles.
|
Any integer > 0 |
1 |
min_hand_detection_confidence |
Score de confiance minimal pour que la détection de la main soit considérée comme réussie dans le modèle de détection de la paume de la main. | 0.0 - 1.0 |
0.5 |
min_hand_presence_confidence |
Score de confiance minimal du score de présence de la main dans le modèle de détection de points de repère de la main. En mode vidéo et en mode diffusion en direct de la reconnaissance de gestes, si le score de confiance de présence de la main du modèle de point de repère de la main est inférieur à ce seuil, le modèle de détection de la paume de la main est déclenché. Sinon, un algorithme léger de suivi de la main est utilisé pour déterminer la position des 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 manuel soit considéré comme réussi. Il s'agit du seuil IoU du cadre de délimitation entre les aiguilles de la trame actuelle et de la dernière image. En mode Vidéo et en mode Flux de la reconnaissance de gestes, en cas d'échec du suivi, l'outil de reconnaissance de gestes déclenche la détection des mains. 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 prédéfinis sont les suivants : ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"] |
|
|
custom_gestures_classifier_options |
Options de configuration du comportement du classificateur de gestes personnalisés. |
|
|
Préparation des données
La reconnaissance de gestes peut reconnaître les gestes 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 reconnaître des gestes dans des vidéos, vous pouvez utiliser l'API pour traiter rapidement une image à la fois, en utilisant l'horodatage de l'image pour déterminer à quel moment les gestes se produisent dans la vidéo.
Exécuter la tâche
L'outil de reconnaissance de gestes utilise les méthodes recognize()
(avec le mode d'exécution 'image'
) et recognizeForVideo()
(avec le mode d'exécution 'video'
) pour déclencher des inférences. La tâche traite les données, tente de reconnaître les gestes de la main, puis consigne les résultats.
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 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 aux 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 les images vidéo de l'appareil photo d'un appareil, chaque reconnaissance bloque le thread principal. Vous pouvez empêcher cela en implémentant des nœuds de calcul Web pour exécuter les 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 l'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 détection de gestes pour chaque exécution de reconnaissance. L'objet de résultat contient des points de repère de la main en coordonnées d'image, des points de repère de la main en coordonnées mondiales, des catégories de main dominante(main gauche/droite) et de gestes de la main des mains détectées.
Voici un exemple des données de sortie de cette tâche:
Le GestureRecognizerResult
obtenu contient quatre composants, chacun étant un tableau, où chaque élément contient le résultat détecté d'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 pour les mains détectées.
Points de repère
Il y a 21 points de repère pour les mains, chacun composé des coordonnées
x
,y
etz
. Les coordonnéesx
ety
sont normalisées à [0,0, 1,0] en fonction de la largeur et de la hauteur de l'image, respectivement. La coordonnéez
représente la profondeur du point de repère, la profondeur au niveau du poignet correspondant à l'origine. Plus la valeur est faible, plus le point de repère est proche de la caméra. La magnitude dez
utilise à peu près la même échelle quex
.Monuments internationaux
Les points de repère des 21 mains sont également indiqués en coordonnées mondiales. Chaque point de repère est composé de
x
,y
etz
, représentant des coordonnées 3D réelles en mètres avec le point de départ 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 montrent une visualisation du 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 l'exemple de code.