Przewodnik wykrywania punktów orientacyjnych pozycji w przeglądarce

Zadanie MediaPipe Pose Markuper umożliwia wykrywanie punktów orientacyjnych ludzkich ciał na zdjęciach lub film. Możesz użyć tego zadania, aby zidentyfikować kluczowe lokalizacje ciała, przeanalizować postawę i kategoryzować ruchy. W tym zadaniu używane są modele systemów uczących się, które z pojedynczymi obrazami lub filmami. Zadanie generuje na obrazie punkty orientacyjne w pozycji ciała i trójwymiarowych współrzędnych świata.

Te instrukcje pokazują, jak korzystać z punktu orientacyjnego Pose w internecie i języku JavaScript aplikacji. Więcej informacji o możliwościach, modelach i konfiguracji opcji tego zadania znajdziesz w artykule Omówienie.

Przykładowy kod

Przykładowy kod punktu orientacyjnego zawiera pełną implementację tego w JavaScripcie. Ten kod pomoże Ci przetestować to zadanie i uzyskać rozpoczął tworzenie własnej aplikacji do określania pozycji. Możesz wyświetlać, uruchamiać edytuj przykładowy kod punktu orientacyjnego Pozycja tylko za pomocą przeglądarki.

Konfiguracja

W tej sekcji znajdziesz najważniejsze czynności, które musisz wykonać, aby skonfigurować środowisko programistyczne. aby użyć punktu orientacyjnego pozy. Ogólne informacje na temat: konfigurację środowiska programistycznego strony internetowej i JavaScriptu, w tym wymagań wersji platformy, patrz Przewodnik po konfiguracji w kampaniach internetowych

Pakiety JavaScript

Kod punktu orientacyjnego jest dostępny w MediaPipe @mediapipe/tasks-vision Pakiet NPM. Dostępne opcje jak znaleźć i pobrać te biblioteki, postępując zgodnie z instrukcjami na platformie. Przewodnik po konfiguracji

Wymagane pakiety możesz zainstalować za pomocą NPM za pomocą tego polecenia:

npm install @mediapipe/tasks-vision

Jeśli chcesz zaimportować kod zadania przez sieć dostarczania treści (CDN) , dodaj następujący kod do sekcji <head> w pliku HTML:

<!-- 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>

Model

Zadanie MediaPipe Pose Commiter wymaga wytrenowanego modelu zgodnego z tym zadanie. Więcej informacji o dostępnych wytrenowanych modelach z punktu orientacyjnego pose znajdziesz tutaj zapoznaj się z omówieniem zadania sekcją Modele.

Wybierz i pobierz model, a następnie zapisz go w katalogu projektu:

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

Tworzenie zadania

Użyj jednej z funkcji punktu orientacyjnego Pozycja createFrom...(), aby: przygotować zadanie do uruchamiania wniosków. Użyj funkcji createFromModelPath() ze ścieżką względną lub bezwzględną do pliku wytrenowanego modelu. Jeśli model jest już załadowany do pamięci, możesz użyć funkcji Metoda createFromModelBuffer().

Poniższy przykładowy kod pokazuje użycie funkcji createFromOptions() do skonfigurować zadanie. Funkcja createFromOptions() umożliwia dostosowanie parametru Ustaw punkt orientacyjny z opcją konfiguracji. Więcej informacji o konfiguracji Więcej informacji znajdziesz w sekcji Opcje konfiguracji.

Poniższy kod pokazuje, jak utworzyć i skonfigurować zadanie z niestandardowym użyciem opcje:

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

Opcje konfiguracji

To zadanie zawiera poniższe opcje konfiguracji dla stron internetowych i JavaScriptu aplikacje:

Nazwa opcji Opis Zakres wartości Wartość domyślna
runningMode Ustawia tryb działania zadania. Dostępne są 2 tryby:

IMAGE: tryb wprowadzania pojedynczego obrazu.

WIDEO: tryb zdekodowanych klatek w filmie lub transmisji na żywo danych wejściowych, np. z kamery.		 {IMAGE, VIDEO} IMAGE
numPoses Maksymalna liczba pozycji, które może wykryć Punkt orientacyjny. Integer > 0 1
minPoseDetectionConfidence Minimalny wskaźnik ufności, z którego ustala się pozycję została uznana za udaną. Float [0.0,1.0] 0.5
minPosePresenceConfidence Minimalny wskaźnik ufności obecności pozycji podczas wykrywania punktów orientacyjnych. Float [0.0,1.0] 0.5
minTrackingConfidence Minimalny wynik ufności dla śledzenia pozycji można uznać za udany. Float [0.0,1.0] 0.5
outputSegmentationMasks Określa, czy punkt orientacyjny położenia wyświetla maskę segmentacji dla wykrytego w pozycji. Boolean False

Przygotuj dane

Punkt orientacyjny umiejscowienia może wykrywać późne zdjęcia w dowolnym formacie obsługiwanym przez przeglądarki hosta. Zadanie obsługuje również wstępne przetwarzanie danych wejściowych, w tym: zmiany rozmiaru, obrót i normalizację wartości. Aby znaleźć przełomowe momenty w filmach: możesz za pomocą interfejsu API szybko przetworzyć pojedynczą klatkę, wykorzystując sygnaturę czasową kadru, aby określić, w którym momencie filmu pojawiają się pozycje.

Uruchamianie zadania

Punkt orientacyjny pozycji używa: detect() (w trybie uruchamiania IMAGE) i Metody do aktywowania: detectForVideo() (z trybem uruchamiania VIDEO) danych. Zadanie przetworzy dane, spróbuje ustanowić punkty orientacyjne i ustalić pozycje i raportuje wyniki.

Uruchomione są wywołania punktów orientacyjnych pozycji detect() i detectForVideo() synchronicznie i blokować wątek interpunkcyjny przez użytkownika. Jeśli wykryjesz pozycje w przypadku klatek wideo z kamery urządzenia, każde wykrycie blokuje główny w wątku. Możesz temu zapobiec, implementując instancje internetowe do uruchamiania interfejsu detect() i detectForVideo() w innym wątku.

Ten kod pokazuje, jak wykonywać przetwarzanie za pomocą modelu zadań:

Obraz

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

Wideo

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

Pełną implementację uruchamiania zadania punktu orientacyjnego znajdziesz tutaj: przykładowego kodu.

Obsługa i wyświetlanie wyników

Punkt orientacyjny pozycji zwraca obiekt poseLandmarkerResult przy każdym wykryciu wykrycia bieganie. Obiekt wynikowy zawiera współrzędne każdego punktu orientacyjnego pozycji.

Poniżej znajdziesz przykładowe dane wyjściowe tego zadania:

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)

Dane wyjściowe zawierają zarówno znormalizowane współrzędne (Landmarks), jak i świat (WorldLandmarks) każdego punktu orientacyjnego.

Dane wyjściowe zawierają następujące znormalizowane współrzędne (Landmarks):

  • x i y: współrzędne punktu orientacyjnego znormalizowane między 0,0 a 1,0 przez szerokość (x) i wysokość (y) obrazu.

  • z: głębokość punktu orientacyjnego, której głębia znajduje się w połowie bioder pochodzeniu danych. Im mniejsza wartość, tym punkt orientacyjny jest bliżej kamery. magnituda wielkości z używa mniej więcej takiej samej skali jak funkcja x.

  • visibility: prawdopodobieństwo, że punkt orientacyjny jest widoczny na zdjęciu.

Dane wyjściowe zawierają następujące współrzędne świata (WorldLandmarks):

  • x, y i z: rzeczywiste, trójwymiarowe współrzędne w metrach, punktu środkowego bioder jako punktu początkowego.

  • visibility: prawdopodobieństwo, że punkt orientacyjny jest widoczny na zdjęciu.

Ten obraz przedstawia wizualizację danych wyjściowych zadania:

Opcjonalna maska segmentacji odpowiada prawdopodobieństwu przynależności każdego piksela wykrytej osobie. Na tej ilustracji widać maskę segmentacji wynik zadania:

Przykładowy kod elementu orientacyjnego umiejscowienia pokazuje, jak wyświetlić wyników zwróconych przez zadanie, patrz przykładowy kod