Jetzt neu: LiteRT: Die leistungsstarke Laufzeit von Google für On-Device-KI, ehemals TensorFlow Lite.

Diese Seite wurde von der Cloud Translation API übersetzt.

Leitfaden zur Erkennung von Handmarken im Web

Mit der Aufgabe „MediaPipe Hand Landmarker“ können Sie die Orientierungspunkte der Hände in einem Bild erkennen. In dieser Anleitung erfahren Sie, wie Sie den Hand Landmarker verwenden für Web- und JavaScript-Apps.

Weitere Informationen zu Funktionen, Modellen und Konfigurationsoptionen Sehen Sie sich die Übersicht an.

Codebeispiel

Der Beispielcode für Hand Landmarker 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 Erkennung von Sehenswürdigkeiten begonnen. Sie können Daten abrufen, ausführen und den Beispielcode von Hand Landmarker bearbeiten ganz einfach in Ihrem Webbrowser.

Einrichtung

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

JavaScript-Pakete

Der Hand Landmark-Code 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

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 Dienst hinzufügen, fügen Sie den folgenden Code in den <head>-Abschnitt Tag in Ihrer HTML-Datei:

<!-- 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 Hand Landmarker“ ist ein trainiertes Modell erforderlich, das mit diesem für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für Hand Landmarker finden Sie unter in der Aufgabenübersicht im Abschnitt „Modelle“.

Wählen Sie ein 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 von Hand Landmarker 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 Hand Landmarker mit Konfigurationsoptionen Weitere Informationen zur Konfiguration finden Sie unter Konfigurationsoptionen.

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

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

Konfigurationsoptionen

Diese Aufgabe hat die folgenden Konfigurationsoptionen für Web und JavaScript Anwendungen:

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`
`numHands`	Die maximale Anzahl der vom Hand-Landmark-Detektor erkannten Hände.	`Any integer > 0`	`1`
`minHandDetectionConfidence`	Der minimale Konfidenzwert für die Handerkennung im Handflächenerkennungsmodell als erfolgreich erachtet.	`0.0 - 1.0`	`0.5`
`minHandPresenceConfidence`	Der minimale Konfidenzwert für den Wert der Hand-Anwesenheit in der Hand Erkennung von Sehenswürdigkeiten. Im Video- und Livestreammodus wenn der Konfidenzwert für die Hand-Anwesenheit des Hand-Landmark-Modells unter dem Wert liegt erreicht, löst Hand Landmarker das Handflächenerkennungsmodell aus. Andernfalls wird ein einen leichten Hand-Tracking-Algorithmus, die Hand(n) für die nachfolgende Erkennung von Sehenswürdigkeiten.	`0.0 - 1.0`	`0.5`
`minTrackingConfidence`	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 Hand Landmarker, wenn das Tracking fehlschlägt, wird Hand Landmarker ausgelöst -Erkennung. Andernfalls wird die Handerkennung übersprungen.	`0.0 - 1.0`	`0.5`

Daten vorbereiten

Hand Landmarker kann Orientierungspunkte 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 Handmarkierungen in Videos zu erkennen, können Sie mit der API schnell einen Frame nach dem anderen verarbeiten, indem Sie den Zeitstempel des Frames, um zu bestimmen, wann die Hand-Markierungen im Video vorkommen.

Aufgabe ausführen

Die Hand Landmarker verwendet das detect() (mit dem Laufmodus image) und detectForVideo() (mit Ausführungsmodus video) zum Auslösen von Methoden Rückschlüsse. Die Aufgabe verarbeitet die Daten, versucht, Hand-Landmarks zu erkennen und und meldet dann die Ergebnisse.

Aufrufe der Hand Landmarker-Methoden detect() und detectForVideo() und den Benutzeroberflächen-Thread blockieren. Wenn Sie Handmarkierungen erkennen in Videoframes der Kamera eines Geräts blockieren, blockiert jede Erkennung die wichtigsten Diskussions-Thread. Sie können dies verhindern, indem Sie Web Worker zur Ausführung von detect() implementieren und detectForVideo() in einem anderen Thread.

Der folgende Code zeigt, wie die Verarbeitung mit dem Aufgabenmodell ausgeführt wird:

Bild

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

Video

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

Eine vollständigere Implementierung der Ausführung einer Hand Landmarker-Aufgabe finden Sie in der Codebeispiel an.

Ergebnisse verarbeiten und anzeigen

Der Hand Landmarker generiert für jede Erkennung ein Hand-Landmarker-Ergebnisobjekt. ausführen. Das Ergebnisobjekt enthält Hand-Markierungen in Bildkoordinaten, Hand Orientierungspunkte in Weltkoordinaten und Händigkeit(links/rechts) der erkannten Hände.

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

Die Ausgabe von HandLandmarkerResult enthält drei Komponenten. Jede Komponente ist ein Array, wobei jedes Element die folgenden Ergebnisse für eine einzelne erkannte 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.
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.

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)

Die folgende Abbildung zeigt eine Visualisierung der Aufgabenausgabe:

Der Beispielcode von Hand Landmarker zeigt, wie der der Aufgabe zurückgegebene Ergebnisse finden Sie in der Codebeispiel