Leitfaden zur Erkennung von Positionsmarkierungen im Web

Mit der Aufgabe „MediaPipe Pose Landmarker“ können Sie Sehenswürdigkeiten menschlicher Körpers in einem Bild oder Video. Sie können diese Aufgabe nutzen, um wichtige Körperregionen zu identifizieren, und kategorisieren Sie Bewegungen. Bei dieser Aufgabe werden Modelle für maschinelles Lernen (ML) verwendet, mit einzelnen Bildern oder Videos arbeiten. Die Aufgabe gibt Body-Pose-Markierungen im Bild aus und in dreidimensionalen Weltkoordinaten angegeben werden.

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

Codebeispiel

Der Beispielcode für Pose 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 Pose-Landschafts-App begonnen. Sie können Daten abrufen, ausführen und Bearbeiten Sie den Beispielcode für Pose Landmarker. ganz einfach in Ihrem Webbrowser.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung beschrieben. Pose Landmarker zu verwenden. 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 Pose Landmarker 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 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 -->
<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, für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für Pose Landmarker findest du 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 für Pose-Markierungen 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 Pose 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 poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

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
numPoses Die maximale Anzahl der Posen, die vom Pose-Markierung Integer > 0 1
minPoseDetectionConfidence Der minimale Konfidenzwert für die Pose-Erkennung als erfolgreich angesehen wird. Float [0.0,1.0] 0.5
minPosePresenceConfidence Der minimale Konfidenzwert für die Präsenz in Posen bei der Erkennung von Orientierungspunkten für Posen. Float [0.0,1.0] 0.5
minTrackingConfidence Der minimale Konfidenzwert für das Positions-Tracking um als erfolgreich zu gelten. Float [0.0,1.0] 0.5
outputSegmentationMasks Legt fest, ob Pose Landmarker eine Segmentierungsmaske für die erkannte Pose. Boolean False

Daten vorbereiten

Pose Landmarker kann Posen 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. Für markante Posen in Videos können Sie mit der API schnell einen Frame nach dem anderen verarbeiten, indem Sie den Zeitstempel des Frames, um zu bestimmen, wann die Posen im Video vorkommen.

Aufgabe ausführen

Für die Pose-Markierung werden die 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, Sehenswürdigkeiten zu Posen zu erstellen, und und meldet dann die Ergebnisse.

Aufrufe der Methoden „Pose Landmarker“ detect() und detectForVideo() werden ausgeführt und den Nutzer-Zwischenthread blockieren. Wenn du Posen entdeckst 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 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 ausführlichere Implementierung der Ausführung einer Pose-Markierungsaufgabe findest du in der Codebeispiel an.

Ergebnisse verarbeiten und anzeigen

Die Pose-Markierung gibt für jede Erkennung ein poseLandmarkerResult-Objekt zurück. ausführen. Das Ergebnisobjekt enthält Koordinaten für jede Pose-Markierung.

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 Koordinaten (WorldLandmarks) für jede Sehenswürdigkeit.

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

  • x und y: Sehenswürdigkeiten-Koordinaten, normalisiert zwischen 0,0 und 1,0 durch das Bildbreite (x) und -höhe (y).

  • z: die charakteristische Tiefe, wobei die Tiefe in der Mitte der Hüfte Ursprung. Je kleiner der Wert, desto näher befindet sich der Orientierungspunkt an der Kamera. Die Die Größe von z hat ungefähr den gleichen Maßstab wie x.

  • visibility: gibt an, wie wahrscheinlich es ist, dass die Sehenswürdigkeit im Bild zu sehen ist.

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

  • x, y und z: Reale dreidimensionale Koordinaten in Metern mit dem Attribut der Hüftmitte als Ursprung.

  • visibility: gibt an, wie wahrscheinlich es ist, dass die Sehenswürdigkeit im Bild zu sehen ist.

Die folgende Abbildung zeigt eine Visualisierung der Aufgabenausgabe:

Die optionale Segmentierungsmaske gibt an, wie wahrscheinlich es ist, dass jedes Pixel an eine erkannte Person gesendet. Das folgende Bild zeigt eine Segmentierungsmaske des Aufgabenausgabe:

Der Beispielcode für Pose Landmarker zeigt, wie die der Aufgabe zurückgegebene Ergebnisse finden Sie in der Codebeispiel