Anleitung zur Bewegungserkennung für das Web

Mit der Aufgabe „MediaPipe-Gestenerkennung“ können Sie Handgesten in Echtzeit erkennen zeigt die erkannten Handgesten-Ergebnisse und die Hand-Markierungen der Hände, die erkannt wurden. In dieser Anleitung erfahren Sie, wie Sie die Gestenerkennung verwenden. für Web- und JavaScript-Apps.

Sie können diese Aufgabe in Aktion sehen, indem Sie die Demo ansehen. Weitere Informationen zu Funktionen, Modellen und Konfigurationsoptionen Sehen Sie sich die Übersicht an.

Codebeispiel

Der Beispielcode für die Gestenerkennung bietet eine vollständige Implementierung dieses in JavaScript ausführen. Dieser Code hilft Ihnen, diese Aufgabe zu testen und mit der Entwicklung einer eigenen App zur Gestenerkennung begonnen. Sie können Daten abrufen, ausführen und den Beispielcode für die Bewegungserkennung bearbeiten ganz einfach in Ihrem Webbrowser.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung beschrieben. die Gestenerkennung nutzen. Allgemeine Informationen zu Ihre Web- und JavaScript-Entwicklungsumgebung einrichten, einschließlich Plattformversionsanforderungen finden Sie in der Einrichtungsleitfaden für das Web

JavaScript-Pakete

Der Code für die Gestenerkennung ist über MediaPipe @mediapipe/tasks-vision verfügbar NPM-Paket. Sie können Sie können diese Bibliotheken finden und herunterladen, indem Sie der Anleitung auf der Plattform folgen. Leitfaden für die Einrichtung

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

Sie können die erforderlichen Pakete über NPM installieren mit dem folgenden Befehl:

npm install @mediapipe/tasks-vision

Wenn Sie den Aufgabencode über ein Content Delivery Network (CDN) importieren möchten fügen Sie 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 für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für die Gestenerkennung finden Sie unter 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

Mit einer der createFrom...()-Funktionen der Gestenerkennung können Sie die Aufgabe für die Ausführung von Inferenzen vorbereiten. createFromModelPath() verwenden mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Wenn Ihr Modell bereits in den Arbeitsspeicher geladen wurde, können Sie den createFromModelBuffer()-Methode.

Im Codebeispiel unten wird gezeigt, wie Sie mit der Funktion createFromOptions() die Aufgabe eingerichtet haben. Mit der Funktion createFromOptions können Sie die Gestenerkennung mit Konfigurationsoptionen Weitere Informationen zur Konfiguration finden Sie unter Konfigurationsoptionen.

Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen:

// 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 einer Video oder in einem Livestream mit Eingabedaten, etwa von einer Kamera.		 {IMAGE, VIDEO} IMAGE
num_hands Die maximale Anzahl von Händen kann erkannt werden durch GestureRecognizer. Any integer > 0 1
min_hand_detection_confidence Der minimale Konfidenzwert für die Handerkennung im Handflächenerkennungsmodell als erfolgreich erachtet. 0.0 - 1.0 0.5
min_hand_presence_confidence Der minimale Konfidenzwert des Hand-Präsenz-Werts in der Hand Erkennung von Sehenswürdigkeiten. Im Video- und Livestreammodus der Bewegungserkennung wenn der Wert für die Konfidenz der Hand-Anwesenheit des Hand-Landmark-Modells unter dem folgenden Wert liegt: wird das Handflächenerkennungsmodell ausgelöst. Andernfalls wird ein mit einem leichten Hand-Tracking-Algorithmus die Position die Hand(n) für die anschließende Erkennung von Sehenswürdigkeiten. 0.0 - 1.0 0.5
min_tracking_confidence Der minimale Konfidenzwert für das Hand-Tracking, das berücksichtigt werden soll erfolgreich war. Dies ist der IoU-Grenzwert des Begrenzungsrahmens zwischen den Händen im den aktuellen und den letzten Frame. Im Video- und Stream-Modus von Gestenerkennung: Wenn das Tracking fehlschlägt, löst die Gestenerkennung die Hand aus. -Erkennung. 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. Die vorgefertigten Touch-Gesten sind ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]
  • Gebietsschema für Anzeigenamen: Das Gebietsschema, das für Anzeigenamen verwendet werden soll, die über die TFLite-Modellmetadaten angegeben werden, sofern vorhanden.
  • Max. Anzahl von Ergebnissen: die maximale Anzahl der am besten bewerteten Klassifizierungsergebnisse, die zurückgegeben werden sollen. Wenn < 0 setzen, werden alle verfügbaren Ergebnisse zurückgegeben.
  • Punktzahl-Schwellenwert: der Wert, unter dem Ergebnisse abgelehnt werden. Wenn dieser Wert auf 0 gesetzt ist, werden alle verfügbaren Ergebnisse zurückgegeben.
  • Kategorie-Zulassungsliste: Zulassungsliste der Kategorienamen. Ist dieses Feld nicht leer, werden Klassifizierungsergebnisse herausgefiltert, deren Kategorie nicht in diesem Satz enthalten ist. Gegenseitiges Ausschließen mit Sperrliste.
  • Kategorie-Sperrliste: Sperrliste der Kategorienamen. Ist dieses Feld nicht leer, werden Klassifizierungsergebnisse herausgefiltert, deren Kategorie in diesem Satz enthalten ist. Sich gegenseitig ausschließen mit Zulassungsliste.
    		•
    • Sprache für Anzeigenamen: any string
    • Max. Ergebnisse: any integer
    • Punktzahl-Schwellenwert: 0.0-1.0
    • Zulassungsliste für Kategorien: vector of strings
    • Kategorie-Sperrliste: vector of strings
    • Sprache für Anzeigenamen: "en"
    • Max. Ergebnisse: -1
    • Punktzahl-Schwellenwert: 0
    • Zulassungsliste für Kategorien: leer
    • Sperrliste für Kategorie: leer
    custom_gestures_classifier_options Optionen zum Konfigurieren des Verhaltens des benutzerdefinierten Gestenklassifikators.
  • Gebietsschema für Anzeigenamen: Das Gebietsschema, das für Anzeigenamen verwendet werden soll, die über die TFLite-Modellmetadaten angegeben werden, sofern vorhanden.
  • Max. Anzahl von Ergebnissen: die maximale Anzahl der am besten bewerteten Klassifizierungsergebnisse, die zurückgegeben werden sollen. Wenn < 0 setzen, werden alle verfügbaren Ergebnisse zurückgegeben.
  • Punktzahl-Schwellenwert: der Wert, unter dem Ergebnisse abgelehnt werden. Wenn dieser Wert auf 0 gesetzt ist, werden alle verfügbaren Ergebnisse zurückgegeben.
  • Kategorie-Zulassungsliste: Zulassungsliste der Kategorienamen. Ist dieses Feld nicht leer, werden Klassifizierungsergebnisse herausgefiltert, deren Kategorie nicht in diesem Satz enthalten ist. Gegenseitiges Ausschließen mit Sperrliste.
  • Kategorie-Sperrliste: Sperrliste der Kategorienamen. Ist dieses Feld nicht leer, werden Klassifizierungsergebnisse herausgefiltert, deren Kategorie in diesem Satz enthalten ist. Sich gegenseitig ausschließen mit Zulassungsliste.
    		•
    • Sprache für Anzeigenamen: any string
    • Max. Ergebnisse: any integer
    • Punktzahl-Schwellenwert: 0.0-1.0
    • Zulassungsliste für Kategorien: vector of strings
    • Kategorie-Sperrliste: vector of strings
    • Sprache für Anzeigenamen: "en"
    • Max. Ergebnisse: -1
    • Punktzahl-Schwellenwert: 0
    • Zulassungsliste für Kategorien: leer
    • Sperrliste für Kategorie: leer

    Daten vorbereiten

    Die Gestenerkennung kann Gesten in Bildern in jedem Format erkennen, das vom Host-Browser. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertnormalisierung. Um Gesten in Videos zu erkennen, kann mithilfe der API schnell einen Frame nach dem anderen verarbeiten. Dabei wird der Zeitstempel des um zu bestimmen, wann die Gesten im Video stattfinden.

    Aufgabe ausführen

    Die Gestenerkennung verwendet die recognize() (mit dem Laufmodus 'image') und recognizeForVideo() (mit Ausführungsmodus 'video') zum Auslösen von Methoden Rückschlüsse. Die Aufgabe verarbeitet die Daten und versucht, Hand 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 zur Gestenerkennung recognize() und recognizeForVideo() werden ausgeführt und den Benutzeroberflächen-Thread blockieren. Wenn Sie Gesten in Videoframes der Kamera eines Geräts zu sehen, blockiert jede Erkennung Diskussions-Thread. Sie können dies verhindern, indem Sie Web Worker zum Ausführen der Die Methoden recognize() und recognizeForVideo() in einem anderen Thread.

    Eine umfassendere Implementierung zum Ausführen einer Aufgabe zur Bewegungserkennung finden Sie in der Codebeispiel an.

    Ergebnisse verarbeiten und anzeigen

    Die Gestenerkennung generiert ein Ergebnisobjekt für die Gestenerkennung für jedes Erkennungsausführung ausführen. Das Ergebnisobjekt enthält Hand-Markierungen in Bildkoordinaten, Handsymbole in Weltkoordinaten, Händigkeit(links/rechts) und Hand die Kategorien der erkannten Hände.

    Im Folgenden sehen Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:

    Die resultierende GestureRecognizerResult enthält vier Komponenten, wobei jede Komponente ein Array ist, wobei jedes Element das erkannte Ergebnis einer einzelnen erkannten Hand enthält.

    • Händigkeit

      Die Händigkeit gibt an, ob es sich bei den erkannten Händen um linke oder rechte Hände handelt.

    • Touch-Gesten

      Die erkannten Gestenkategorien der erkannten Hände.

    • Landmarken

      Es gibt 21 Handmarkierungen, die jeweils aus den Koordinaten x, y und z bestehen. Die Die Koordinaten x und y werden durch die Bildbreite und Höhe. Die Koordinate z stellt die Tiefe der Sehenswürdigkeit dar, wobei Die Tiefe am Handgelenk ist der Ursprung. Je kleiner der Wert, desto näher Sehenswürdigkeit ist die Kamera. Die Größe von z hat ungefähr den gleichen Maßstab wie x.

    • Sehenswürdigkeiten der Welt

      Die 21 Handsymbole werden ebenfalls in Weltkoordinaten dargestellt. Jede Markierung besteht aus x, y und z, die reale 3D-Koordinaten in Meter mit dem Ursprung am geometrischen Mittelpunkt der Hand.

    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 in der Codebeispiel an.