Leitfaden zur Erkennung von Positionsmarkierungen im Web

Mit der MediaPipe Pose Landmarker-Aufgabe können Sie Landmarken von menschlichen Körpern in einem Bild oder Video erkennen. Mit dieser Aufgabe können Sie wichtige Körperstellen identifizieren, die Körperhaltung analysieren und Bewegungen kategorisieren. Für diese Aufgabe werden ML-Modelle verwendet, die mit einzelnen Bildern oder Videos funktionieren. Die Aufgabe gibt Landmarken für die Körperhaltung in Bildkoordinaten und in dreidimensionalen Weltkoordinaten aus.

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

Codebeispiel

Der Beispielcode für Pose Landmarker enthält eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung Ihrer eigenen Pose Landmarker-App beginnen. Sie können das Pose Landmarker-Beispiel einfach in Ihrem Webbrowser aufrufen, ausführen und bearbeiten.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung für die Verwendung von Pose Landmarker beschrieben. Allgemeine Informationen zum Einrichten Ihrer Web- und JavaScript-Entwicklungsumgebung, einschließlich der Anforderungen an die Plattformversion, 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. Sie können diese Bibliotheken gemäß der Anleitung im Einrichtungsleitfaden der Plattform suchen und herunterladen.

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

npm install @mediapipe/tasks-vision

Wenn Sie den Aufgaben-Code über einen CDN-Dienst (Content Delivery Network) importieren möchten, fügen Sie den folgenden Code in das <head>-Tag in 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.mjs"
    crossorigin="anonymous"></script>
</head>

Modell

Für die MediaPipe Pose Landmarker-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu den verfügbaren trainierten Modellen für Pose Landmarker finden Sie im Abschnitt „Modelle“ der Aufgabenübersicht.

Wählen Sie ein Modell aus, laden Sie es herunter und speichern Sie es in Ihrem Projektverzeichnis:

<dev-project-root>/app/shared/models/

Aufgabe erstellen

Verwenden Sie eine der Pose Landmarker-createFrom...()-Funktionen, um die Aufgabe für die Ausführung von Inferenz zu vorbereiten. Verwenden Sie die createFromModelPath()-Funktion mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Wenn Ihr Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden.

Im folgenden Codebeispiel wird die Verwendung der Funktion createFromOptions() zum Einrichten der Aufgabe veranschaulicht. Mit der Funktion createFromOptions() können Sie den Pose Landmarker 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

Für diese Aufgabe sind die folgenden Konfigurationsoptionen für Web- und JavaScript-Anwendungen verfügbar:

Option Beschreibung Wertebereich Standardwert
runningMode Legt den Ausführungsmodus für die Aufgabe fest. Es gibt zwei Modi:

IMAGE: Der Modus für einzelne Bildeingaben.

VIDEO: Der Modus für decodierte Frames eines Videos oder eines Livestreams von Eingabedaten, z. B. von einer Kamera.
{IMAGE, VIDEO} IMAGE
numPoses Die maximale Anzahl von Posen, die vom Pose Landmarker erkannt werden können. Integer > 0 1
minPoseDetectionConfidence Der Mindestkonfidenzwert, damit die Posenerkennung als erfolgreich gilt. Float [0.0,1.0] 0.5
minPosePresenceConfidence Der Mindestkonfidenzwert für die Erkennung von Posen. Float [0.0,1.0] 0.5
minTrackingConfidence Der Mindestkonfidenzwert für das Posentracking, damit es als erfolgreich gilt. Float [0.0,1.0] 0.5
outputSegmentationMasks Gibt an, ob Pose Landmarker eine Segmentierungsmaske für die erkannte Pose ausgibt. Boolean False

Daten vorbereiten

Mit Pose Landmarker können Posen in Bildern in jedem Format erkannt werden, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Drehung und Wertnormalisierung. Um Posen in Videos zu erkennen, können Sie die API verwenden, um jeweils einen Frame schnell zu verarbeiten. Anhand des Zeitstempels des Frames lässt sich ermitteln, wann die Posen im Video auftreten.

Aufgabe ausführen

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

Aufrufe der Pose Landmarker-Methoden detect() und detectForVideo() werden synchron ausgeführt und blockieren den User-Interpose-Thread. 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 zum Ausführen einer Pose Landmarker-Aufgabe finden Sie im 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 Landmarke der Pose.

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 sowohl normalisierte Koordinaten (Landmarks) als auch Weltkoordinaten (WorldLandmarks) für jedes Landmark.

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

  • x und y: Landmark-Koordinaten, die durch die Bildbreite (x) und -höhe (y) zwischen 0,0 und 1,0 normalisiert werden.

  • z: Die Tiefe des Orientierungspunkts, wobei die Tiefe in der Mitte der Hüften als Ursprung dient. Je kleiner der Wert, desto näher ist das Landmark an der Kamera. Die Größenordnung von z entspricht in etwa der von x.

  • visibility: Die Wahrscheinlichkeit, dass das Wahrzeichen auf dem Bild zu sehen ist.

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

  • x, y und z: Dreidimensionale Koordinaten in Metern, wobei der Mittelpunkt der Hüfte als Ursprung dient.

  • visibility: Die Wahrscheinlichkeit, dass das Wahrzeichen auf dem Bild zu sehen ist.

Das folgende Bild zeigt eine Visualisierung der Aufgabenausgabe:

Eine Frau in einer Meditationspose. Ihre Pose wird mit einem Drahtmodell hervorgehoben, das die Positionierung ihrer Gliedmaßen und ihres Oberkörpers angibt.

Die optionale Segmentierungsmaske gibt die Wahrscheinlichkeit an, dass jedes Pixel zu einer erkannten Person gehört. Das folgende Bild zeigt eine Segmentierungsmaske der Aufgaben-Ausgabe:

Segmentierungsmaske des vorherigen Bildes, die die Form der Frau umreißt

Der Beispielcode für Pose Landmarker zeigt, wie die von der Aufgabe zurückgegebenen Ergebnisse angezeigt werden. Beispiel ansehen