Przewodnik po wykrywaniu punktów orientacyjnych dłoni w przeglądarce

Zadanie MediaPipe Ręka umożliwia wykrywanie punktów orientacyjnych rąk na zdjęciu. Te instrukcje pokazują, jak korzystać z ręcznie punktowego punktu orientacyjnego dla aplikacji internetowych i JavaScriptu.

Więcej informacji o funkcjach, modelach i opcjach konfiguracji zapoznaj się z Przeglądem.

Przykładowy kod

Przykładowy kod punktu orientacyjnego Handel zawiera pełną implementację w JavaScripcie. Ten kod pomoże Ci przetestować to zadanie i uzyskać zaczęliśmy tworzyć własną aplikację do wykrywania punktów orientacyjnych „dłoń”. Możesz wyświetlać, uruchamiać edytuj przykładowy kod punktu orientacyjnego Ręka 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ć narzędzia ręcznie zakreślającego dłoń. 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 ręcznie 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 to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Model

Zadanie MediaPipe Hand Pointer wymaga wytrenowanego modelu zgodnego z tym zadanie. Więcej informacji na temat dostępnych wytrenowanych modeli dla punktu orientacyjnego w dłoni 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 ręki 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 Ręczny punkt orientacyjny z opcjami 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 handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

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
numHands Maksymalna liczba rąk wykrytych przez wykrywacz punktów orientacyjnych „Dłoń”. Any integer > 0 1
minHandDetectionConfidence Minimalny wskaźnik ufności, jaki musi osiągnąć wykrywanie ręki uznane za udane w modelu wykrywania dłoni. 0.0 - 1.0 0.5
minHandPresenceConfidence Minimalny wskaźnik ufności dla wyniku obecności dłoni na ręce model wykrywania punktów orientacyjnych. W trybie wideo i transmisji na żywo jeśli wskaźnik ufności obecności dłoni z modelu punktu orientacyjnego dłoni jest poniżej po osiągnięciu tego progu, aplikacja Rąka wyzwala model wykrywania dłoni. W przeciwnym razie łatwy algorytm śledzenia dłoni określa lokalizację ręce do późniejszego wykrywania punktu orientacyjnego. 0.0 - 1.0 0.5
minTrackingConfidence Minimalny wskaźnik ufności, z którego można korzystać podczas śledzenia dłoni udało się. Jest to wartość progowa współczynnika podobieństwa między dłońmi bieżącej i ostatniej klatki. W trybie wideo i w trybie strumienia Ręczny punkt orientacyjny, jeśli śledzenie nie powiedzie się, aktywuje punkt orientacyjny ręcznie wykrywaniem zagrożeń. W przeciwnym razie pomija wykrywanie rąk. 0.0 - 1.0 0.5

Przygotuj dane

Ręczny punkt orientacyjny może wykrywać punkty orientacyjne na zdjęciach 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 wykrywać w filmach punkty orientacyjne z ręki: możesz za pomocą interfejsu API szybko przetworzyć pojedynczą klatkę, wykorzystując sygnaturę czasową ramki, aby określić, w którym miejscu w filmie pojawiają się ręczne punkty orientacyjne.

Uruchamianie zadania

Punkt orientacyjny w dłoni używa: detect() (w trybie biegania image) i Metody do aktywowania: detectForVideo() (z trybem uruchamiania video) danych. Zadanie przetwarza dane, próbuje wykryć punkty orientacyjne z ręki i raportuje wyniki.

Uruchomione są wywołania metody punktu orientacyjnego Handel detect() i detectForVideo() synchronicznie i zablokować wątek interfejsu użytkownika. Jeśli wykryjesz punkty orientacyjne z ręką 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 handLandmarkerResult = handLandmarker.detect(image);

Wideo

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

Pełną implementację uruchamiania zadania punktu orientacyjnego dłoni znajdziesz w przykładowego kodu.

Obsługa i wyświetlanie wyników

Ręka zakreślacza generuje obiekt wynikowy narzędzia do punktów orientacyjnych „ręka” dla każdego wykrycia bieganie. Obiekt wynikowy zawiera punkty orientacyjne we współrzędnych obrazu, ręka punkty orientacyjne we współrzędnych świata i określonej orientacji(lewa/prawa ręka) wykrytego obiektu ręce.

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

Dane wyjściowe HandLandmarkerResult zawierają 3 komponenty. Każdy komponent to tablica, w której każdy element zawiera następujące wyniki dla 1 wykrytej ręki:

  • Ręka dominująca

    Ręka wskazuje, czy wykryte ręce są lewe czy prawa.

  • Punkty orientacyjne

    Dostępnych jest 21 punktów orientacyjnych rozmieszczonych na dłoni, a każdy z nich składa się ze współrzędnych x, y i z. Współrzędne x i y są normalizowane do wartości [0,0, 1,0] przez szerokość obrazu i wysokości. Współrzędna z reprezentuje głębokość punktu orientacyjnego, a przy tym jest ich głębia na nadgarstku. Im mniejsza wartość, tym bliższa jest punktem orientacyjnym. z – magnituda ma mniej więcej taką samą skalę jak x

  • Punkty orientacyjne na świecie

    Współrzędne świata przedstawiają również 21 ręcznych punktów orientacyjnych. Każdy punkt orientacyjny składa się z elementów x, y i z, reprezentujących rzeczywiste współrzędne 3D w m, którego punkt początkowy znajduje się w środku geometrycznym dłoni.

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)

Ten obraz przedstawia wizualizację danych wyjściowych zadania:

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