Przewodnik po rozpoznawaniu gestów w przeglądarce

Narzędzie do rozpoznawania gestów MediaPipe umożliwia rozpoznawanie gestów w czasie rzeczywistym. udostępnia rozpoznane gesty i punkty orientacyjne dłoni wykryte ręce. Te instrukcje pokazują, jak korzystać z rozpoznawania gestów dla aplikacji internetowych i JavaScriptu.

Aby zobaczyć, jak działa to zadanie, wyświetl demo. Więcej informacji o funkcjach, modelach i opcjach konfiguracji zapoznaj się z Przeglądem.

Przykładowy kod

Przykładowy kod aplikacji do rozpoznawania gestów zapewnia pełną implementację tego interfejsu w JavaScripcie. Ten kod pomoże Ci przetestować to zadanie i uzyskać zaczęliśmy tworzyć własną aplikację do rozpoznawania gestów. Możesz wyświetlać, uruchamiać edytuj przykładowy kod modułu do rozpoznawania gestów tylko za pomocą przeglądarki.

Konfiguracja

W tej sekcji znajdziesz najważniejsze czynności, które musisz wykonać, aby skonfigurować środowisko programistyczne. specjalnie do rozpoznawania gestów. 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 rozpoznawania gestów jest dostępny przez 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) w tagu <head> w pliku HTML dodaj ten kod:

<!-- 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 rozpoznawania gestów MediaPipe wymaga wytrenowanego modelu zgodnego z tym zadanie. Więcej informacji na temat dostępnych wytrenowanych modeli rozpoznawania gestów 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 rozpoznawania gestów 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 Rozpoznawanie gestów 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:

// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
  },
  numHands: 2
});

Opcje konfiguracji

To zadanie zawiera te opcje konfiguracji aplikacji internetowych:

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
num_hands Maksymalną liczbę rąk może wykryć GestureRecognizer. Any integer > 0 1
min_hand_detection_confidence 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
min_hand_presence_confidence Minimalny wynik ufności dłoni na ręce model wykrywania punktów orientacyjnych. W trybie wideo i trybie transmisji na żywo modułu rozpoznawania gestów jeśli wynik pewności obecności ręki z modelu punktu orientacyjnego ręki jest poniżej ten próg aktywuje model wykrywania dłoni. W przeciwnym razie lekki algorytm śledzenia dłoni jest używany do określania lokalizacji ręce do późniejszego wykrycia punktu orientacyjnego. 0.0 - 1.0 0.5
min_tracking_confidence 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 Moduł rozpoznawania gestów, jeśli śledzenie nie działa, moduł rozpoznawania gestów uruchamia dłoń wykrywaniem zagrożeń. W przeciwnym razie wykrywanie ręki zostanie pominięte. 0.0 - 1.0 0.5
canned_gestures_classifier_options Opcje konfiguracji działania klasyfikatora gestów bazujących na szablonach. Gotowe gesty: ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]
  • Wyświetlane nazwy – język: język używany na potrzeby wyświetlanych nazw określonych za pomocą metadanych modelu TFLite (jeśli występują).
  • Maksymalna liczba wyników: maksymalna liczba najwyżej punktowanych wyników klasyfikacji do zwrócenia. Jeśli < 0 – zostaną zwrócone wszystkie dostępne wyniki.
  • Próg wyniku: wynik, poniżej którego wyniki są odrzucane. Jeśli ma wartość 0, zwracane są wszystkie dostępne wyniki.
  • Lista dozwolonych kategorii: lista dozwolonych nazw kategorii. Jeśli pole nie jest puste, wyniki klasyfikacji, których kategoria nie należy do tego zbioru, zostaną odfiltrowane. Wzajemnie wyklucza się z listą odrzuconych.
  • Lista odrzuconych kategorii: lista odrzuconych nazw kategorii. Jeśli pole nie jest puste, wyniki klasyfikacji, które należą do tego zbioru, zostaną odfiltrowane. Wzajemne wykluczanie z listy dozwolonych.
    		•
    • Język wyświetlanych nazw: any string
    • Maksymalna liczba wyników: any integer
    • Próg wyniku: 0.0-1.0
    • Lista dozwolonych kategorii: vector of strings
    • Lista odrzuconych kategorii: vector of strings
    • Język wyświetlanych nazw: "en"
    • Maksymalna liczba wyników: -1
    • Próg wyniku: 0
    • Lista dozwolonych kategorii: pusta
    • Lista odrzuconych kategorii: pusta
    custom_gestures_classifier_options Opcje konfigurowania działania klasyfikatora gestów niestandardowych.
  • Wyświetlane nazwy – język: język używany na potrzeby wyświetlanych nazw określonych za pomocą metadanych modelu TFLite (jeśli występują).
  • Maksymalna liczba wyników: maksymalna liczba najwyżej punktowanych wyników klasyfikacji do zwrócenia. Jeśli < 0 – zostaną zwrócone wszystkie dostępne wyniki.
  • Próg wyniku: wynik, poniżej którego wyniki są odrzucane. Jeśli ma wartość 0, zwracane są wszystkie dostępne wyniki.
  • Lista dozwolonych kategorii: lista dozwolonych nazw kategorii. Jeśli pole nie jest puste, wyniki klasyfikacji, których kategoria nie należy do tego zbioru, zostaną odfiltrowane. Wzajemnie wyklucza się z listą odrzuconych.
  • Lista odrzuconych kategorii: lista odrzuconych nazw kategorii. Jeśli pole nie jest puste, wyniki klasyfikacji, które należą do tego zbioru, zostaną odfiltrowane. Wzajemne wykluczanie z listy dozwolonych.
    		•
    • Język wyświetlanych nazw: any string
    • Maksymalna liczba wyników: any integer
    • Próg wyniku: 0.0-1.0
    • Lista dozwolonych kategorii: vector of strings
    • Lista odrzuconych kategorii: vector of strings
    • Język wyświetlanych nazw: "en"
    • Maksymalna liczba wyników: -1
    • Próg wyniku: 0
    • Lista dozwolonych kategorii: pusta
    • Lista odrzuconych kategorii: pusta

    Przygotuj dane

    Rozpoznawanie gestów rozpoznaje gesty na obrazach 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 rozpoznawać gesty w filmach: mogą użyć interfejsu API, aby szybko przetworzyć pojedynczą klatkę, wykorzystując sygnaturę czasową aby określić, w którym momencie filmu są wykonywane gesty.

    Uruchamianie zadania

    Moduł rozpoznawania gestów używa interfejsu recognize() (w trybie uruchamiania 'image') i Metody do aktywowania: recognizeForVideo() (z trybem uruchamiania 'video') danych. Zadanie przetwarza dane, próbuje rozpoznać rękę i raportuje wyniki.

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

    Obraz

    const image = document.getElementById("image") as HTMLImageElement;
const gestureRecognitionResult = gestureRecognizer.recognize(image);

    Wideo

    await gestureRecognizer.setOptions({ runningMode: "video" });

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

  if (video.currentTime !== lastVideoTime) {
    const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video);
    processResult(gestureRecognitionResult);
    lastVideoTime = video.currentTime;
  }

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

    Uruchomione wywołania metody rozpoznawania gestów recognize() i recognizeForVideo() synchronicznie i zablokować wątek interfejsu użytkownika. Jeśli rozpoznajesz gesty w klatek wideo z kamery urządzenia, każde rozpoznawanie zablokuje główny w wątku. Możesz temu zapobiec, implementując instancje internetowe do uruchamiania Metody recognize() i recognizeForVideo() w innym wątku.

    Bardziej wyczerpującą implementację zadania Rozpoznawanie gestów znajdziesz w przykładowego kodu.

    Obsługa i wyświetlanie wyników

    Moduł rozpoznawania gestów generuje obiekt wyniku wykrywania gestów dla każdego podczas rozpoznawania. Obiekt wynikowy zawiera punkty orientacyjne we współrzędnych obrazu, punkty orientacyjne we współrzędnych świata, leworęczność(lewa/prawa ręka) i ręka kategorie gestów wykrytych rąk.

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

    Wynik GestureRecognizerResult zawiera 4 komponenty, a każdy z nich to tablica, w której każdy element zawiera wykryty wynik 1 wykrytej dłoni.

    • Ręka dominująca

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

    • Gesty

      Kategorie rozpoznanych gestów wykrytych rąk.

    • 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.

    GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  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)

    Te obrazy przedstawiają wizualizację danych wyjściowych zadania:

    Bardziej wyczerpujące instrukcje tworzenia zadania Rozpoznawanie gestów znajdziesz w tych artykułach: przykładowego kodu.