Leitfaden zur Erkennung von Positionsmarkierungen im Web

Mit der Aufgabe „MediaPipe Pose Landmarker“ können Sie Sehenswürdigkeiten menschlicher Körper in einem Bild oder Video erkennen. Sie können diese Aufgabe verwenden, um wichtige Körperstellen zu identifizieren, die Körperhaltung zu analysieren und Bewegungen zu kategorisieren. Bei dieser Aufgabe werden Modelle für maschinelles Lernen (ML) verwendet, die mit einzelnen Bildern oder Videos arbeiten. Die Aufgabe gibt Körperpositionsmarkierungen in Bildkoordinaten und in dreidimensionalen Weltkoordinaten aus.

In dieser Anleitung erfährst du, wie du den Pose Landmarker für Web- und JavaScript-Apps verwendest. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.

Codebeispiel

Der Beispielcode für Pose Landmarker bietet eine vollständige JavaScript-Implementierung dieser Aufgabe. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen Pose Landmarker-App beginnen. Sie können den Beispielcode für Pose Landmarker nur mit Ihrem Webbrowser aufrufen, ausführen und bearbeiten.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung speziell für die Verwendung von Pose Landmarker 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 Pose Landmarker-Code ist über das MediaPipe-@mediapipe/tasks-vision NPM-Paket 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 -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modell

Für die Aufgabe „MediaPipe Pose Landmarker“ ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für Pose Landmarker finden Sie 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

Verwenden Sie eine der createFrom...()-Funktionen von Pose Landmarker, 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 Play Points 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:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

Konfigurationsoptionen

Diese Aufgabe bietet 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 eines Videos oder in einem Livestream mit Eingabedaten, z. B. von einer Kamera.
{IMAGE, VIDEO} IMAGE
numPoses Die maximale Anzahl von Posen, die vom Pose-Markierungspunkt erkannt werden können. Integer > 0 1
minPoseDetectionConfidence Der minimale Konfidenzwert, damit die Posenerkennung als erfolgreich gilt. Float [0.0,1.0] 0.5
minPosePresenceConfidence Der minimale Konfidenzwert der Posenpräsenz bei der Erkennung von Posen-Markierungen. Float [0.0,1.0] 0.5
minTrackingConfidence Der minimale Konfidenzwert, damit das Posen-Tracking als erfolgreich gilt. Float [0.0,1.0] 0.5
outputSegmentationMasks Gibt an, ob der Pose Landmarker eine Segmentierungsmaske für die erkannte Pose ausgibt. Boolean False

Daten vorbereiten

Pose Landmarker kann Posen 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 Posen in Videos mit einer Markierung zu versehen, kannst du die API nutzen, um einen Frame nach dem anderen schnell zu verarbeiten. Verwende dabei den Zeitstempel des Frames, um zu bestimmen, wann die Posen im Video auftreten.

Task ausführen

Der Pose Landmarker verwendet die Methoden detect() (mit dem Ausführungsmodus IMAGE) und detectForVideo() (mit dem Ausführungsmodus VIDEO), um Inferenzen auszulösen. Die Aufgabe verarbeitet die Daten, versucht, Posen mit Orientierungspunkten zu identifizieren und meldet dann die Ergebnisse.

Aufrufe der Methoden detect() und detectForVideo() von Pose Landmarker werden synchron ausgeführt und blockieren den zwischengeschalteten Thread des Nutzers. Wenn Sie Posen 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 detect() und detectForVideo() in einem anderen Thread auszuführen.

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

Bild

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

Video

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const poseLandmarkerResult = poseLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Eine vollständigere Implementierung der Ausführung einer Aufgabe für Pose-Markierungen finden Sie im Code-Beispiel.

Ergebnisse verarbeiten und anzeigen

Der Pose Landmarker gibt für jeden Erkennungslauf ein poseLandmarkerResult-Objekt zurück. Das Ergebnisobjekt enthält Koordinaten für jede Positionsmarkierung.

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

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

Die Ausgabe enthält für jede Sehenswürdigkeit sowohl normalisierte Koordinaten (Landmarks) als auch Weltkoordinaten (WorldLandmarks).

Die Ausgabe enthält die folgenden normalisierten Koordinaten (Landmarks):

  • x und y: Koordinaten der Markierung, normalisiert zwischen 0,0 und 1,0 nach der Bildbreite (x) und der Höhe (y).

  • z: Die Tiefe der Sehenswürdigkeit, wobei die Tiefe im Mittelpunkt der Hüften als Ausgangspunkt dient. Je kleiner der Wert, desto näher liegt die Sehenswürdigkeit an der Kamera. Die Größe von Z wird ungefähr gleich groß wie bei x verwendet.

  • visibility: Die Wahrscheinlichkeit, dass die Sehenswürdigkeit im Bild sichtbar ist.

Die Ausgabe enthält die folgenden Weltkoordinaten (WorldLandmarks):

  • x, y und z: reale dreidimensionale Koordinaten in Metern, wobei der Mittelpunkt der Hüfte als Ausgangspunkt dient.

  • visibility: Die Wahrscheinlichkeit, dass die Sehenswürdigkeit im Bild sichtbar ist.

Die folgende Abbildung zeigt eine Visualisierung der Aufgabenausgabe:

Die optionale Segmentierungsmaske gibt die Wahrscheinlichkeit an, mit der jedes Pixel zu einer erkannten Person gehört. Die folgende Abbildung zeigt eine Segmentierungsmaske der Aufgabenausgabe:

Der Beispielcode für Pose Landmarker zeigt, wie die von der Aufgabe zurückgegebenen Ergebnisse angezeigt werden (siehe Codebeispiel).