Mit der Aufgabe „MediaPipe-Gestenerkennung“ können Sie Handgesten in Echtzeit erkennen. Sie erhalten dann die Ergebnisse der erkannten Gesten und die Handmarkierungen der erkannten Hände. In dieser Anleitung erfahren Sie, wie Sie die Bewegungserkennung für Web- und JavaScript-Apps verwenden.
In der Demo können Sie sich diese Aufgabe in Aktion ansehen. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für die Gestenerkennung enthält eine vollständige JavaScript-Implementierung dieser Aufgabe. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen App zur Gestenerkennung beginnen. Sie können den Beispielcode für die Gestenerkennung in Ihrem Webbrowser aufrufen, ausführen und bearbeiten.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zur Einrichtung der Entwicklungsumgebung speziell für die Verwendung der Bewegungserkennung beschrieben. Allgemeine Informationen zum Einrichten der Web- und JavaScript-Entwicklungsumgebung, einschließlich der Plattformversionsanforderungen, finden Sie im Einrichtungsleitfaden für das Web.
JavaScript-Pakete
Der Code für die Gestenerkennung ist im MediaPipe-Paket @mediapipe/tasks-vision
NPM verfügbar. Folgen Sie der Anleitung im Einrichtungsleitfaden für die Plattform, um diese Bibliotheken zu suchen und herunterzuladen.
Mit dem folgenden Befehl können Sie die erforderlichen Pakete über NPM installieren:
npm install @mediapipe/tasks-vision
Wenn Sie den Aufgabencode über einen Content Delivery Network-Dienst (CDN) importieren möchten, fügen Sie den folgenden Code in das <head>-Tag Ihrer HTML-Datei ein:
<!-- 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>
Modell
Für die Aufgabe „MediaPipe-Gestenerkennung“ ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für die Gestenerkennung finden Sie in der Aufgabenübersicht im Abschnitt „Modelle“.
Wählen Sie das Modell aus, laden Sie es herunter und speichern Sie es dann in Ihrem Projektverzeichnis:
<dev-project-root>/app/shared/models/
Aufgabe erstellen
Verwenden Sie eine der createFrom...()-Funktionen der Gestenerkennung, um die Aufgabe zum Ausführen von Inferenzen vorzubereiten. Verwenden Sie die Funktion createFromModelPath() mit einem relativen oder absoluten Pfad zur trainierten Modelldatei.
Wenn das Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden.
Das folgende Codebeispiel zeigt, wie Sie die Aufgabe mit der Funktion createFromOptions() einrichten. Mit der Funktion createFromOptions können Sie die Bewegungserkennung mit Konfigurationsoptionen anpassen. Weitere Informationen zu Konfigurationsoptionen finden Sie unter Konfigurationsoptionen.
Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen erstellen und konfigurieren:
// 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
});
Konfigurationsoptionen
Diese Aufgabe bietet die folgenden Konfigurationsoptionen für Webanwendungen:
| Option | Beschreibung | Wertebereich | Standardwert |
|---|---|---|---|
runningMode |
Legt den Ausführungsmodus für die Task fest. Es gibt zwei Modi: IMAGE: Der Modus für Einzelbildeingaben. VIDEO: Der Modus für decodierte Frames eines Videos oder in einem Livestream mit Eingabedaten, z. B. von einer Kamera. |
{IMAGE, VIDEO} |
IMAGE |
num_hands |
Die maximale Anzahl von Händen kann von GestureRecognizer erkannt werden.
|
Any integer > 0 |
1 |
min_hand_detection_confidence |
Der Mindestkonfidenzwert für die Handerkennung, um im Handflächenerkennungsmodell als erfolgreich zu gelten. | 0.0 - 1.0 |
0.5 |
min_hand_presence_confidence |
Der minimale Konfidenzwert für die Handpräsenz im Modell zur Erkennung von Handmarkierungen. Wenn im Video- und Livestream-Modus der Bewegungserkennung der Konfidenzwert für die Anwesenheitserkennung vom Modell für Handmarkierungen unter diesem Grenzwert liegt, wird das Handflächenerkennungsmodell ausgelöst. Andernfalls wird ein leichter Algorithmus zur Handverfolgung verwendet, um die Position der Hand(en) für die nachfolgende Erkennung von Sehenswürdigkeiten zu bestimmen. | 0.0 - 1.0 |
0.5 |
min_tracking_confidence |
Der Mindestkonfidenzwert, der für eine erfolgreiche Verfolgung der Handzeichen erforderlich ist. Dies ist der IoU-Grenzwert des Begrenzungsrahmens zwischen Händen im aktuellen und im letzten Frame. Wenn im Video- und Streammodus der Bewegungserkennung die Bewegungserkennung fehlschlägt, löst die Bewegungserkennung die Handerkennung aus, wenn das Tracking fehlschlägt. Andernfalls wird die Handerkennung übersprungen. | 0.0 - 1.0 |
0.5 |
canned_gestures_classifier_options |
Optionen zum Konfigurieren des Verhaltens des Klassifikators für gespeicherte Gesten. Vordefinierte Touch-Gesten sind ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"] |
|
|
custom_gestures_classifier_options |
Optionen zum Konfigurieren des Verhaltens des benutzerdefinierten Gestenklassifikators. |
|
|
Daten vorbereiten
Die Bewegungserkennung kann Gesten in Bildern in jedem Format erkennen, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertenormalisierung. Um Gesten in Videos zu erkennen, können Sie die API verwenden, um einen Frame nach dem anderen schnell zu verarbeiten. Verwenden Sie dabei den Zeitstempel des Frames, um zu bestimmen, wann die Gesten im Video auftreten.
Task ausführen
Die Bewegungserkennung verwendet die Methoden recognize() (im Laufmodus 'image') und recognizeForVideo() (im Laufmodus 'video'), um Inferenzen auszulösen. Die Aufgabe verarbeitet die Daten, versucht, Handbewegungen zu erkennen, und meldet dann die Ergebnisse.
Der folgende Code zeigt, wie die Verarbeitung mit dem Aufgabenmodell ausgeführt wird:
Bild
const image = document.getElementById("image") as HTMLImageElement;
const gestureRecognitionResult = gestureRecognizer.recognize(image);
Video
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();
});
}
Aufrufe der Methoden recognize() und recognizeForVideo() der Gestenerkennung werden synchron ausgeführt und blockieren den Thread der Benutzeroberfläche. Wenn Sie Gesten in Videoframes von der Kamera eines Geräts erkennen, blockiert jede Erkennung den Hauptthread. Sie können dies verhindern, indem Sie Web-Worker implementieren, um die Methoden recognize() und recognizeForVideo() in einem anderen Thread auszuführen.
Eine umfassendere Implementierung zum Ausführen einer Aufgabe zur Bewegungserkennung finden Sie im Codebeispiel.
Ergebnisse verarbeiten und anzeigen
Die Bewegungserkennung generiert für jeden Erkennungsdurchlauf ein Ergebnisobjekt für die Gestenerkennung. Das Ergebnisobjekt enthält Handmarkierungen in Bildkoordinaten, Handmarkierungen in Weltkoordinaten, Händigkeit(links/rechts) und Handgestenkategorien der erkannten Hände.
Im Folgenden sehen Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:
Das Ergebnis-GestureRecognizerResult enthält vier Komponenten, wobei jede Komponente ein Array ist, in dem jedes Element das erkannte Ergebnis einer einzelnen erkannten Hand enthält.
Händigkeit
Die Händigkeit gibt an, ob die erkannten Hände Links- oder Rechtshänder sind.
Gesten
Die erkannten Gestenkategorien der erkannten Hände.
Landmarken
Es gibt 21 Landschaftsmarkierungen, die jeweils aus
x-,y- undz-Koordinaten bestehen. Die Koordinatenxundywerden entsprechend der Bildbreite bzw. -höhe auf [0,0, 1,0] normalisiert. Diez-Koordinate stellt die Tiefe der Sehenswürdigkeit dar, wobei die Tiefe am Handgelenk als Ausgangspunkt dient. Je kleiner der Wert, desto näher liegt das Denkmal an der Kamera. Die Größe vonzwird ungefähr gleich groß wie beixverwendet.Sehenswürdigkeiten der Welt
Die 21 Sehenswürdigkeiten sind ebenfalls in Weltkoordinaten dargestellt. Jede Sehenswürdigkeit besteht aus
x,yundz. Diese stellen reale 3D-Koordinaten in Metern mit dem Ursprung im geometrischen Mittelpunkt des Hand dar.
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)
Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe:
Eine umfassendere Implementierung zum Erstellen einer Aufgabe zur Bewegungserkennung finden Sie im Codebeispiel.