Panduan pengenalan gestur untuk Web

Dengan tugas Pengenal Gestur MediaPipe, Anda dapat mengenali gestur tangan secara real time, dan memberikan hasil gestur tangan yang dikenali dan penanda tangan dari tangan yang terdeteksi. Petunjuk ini menunjukkan cara menggunakan Pengenal Gestur untuk aplikasi web dan JavaScript.

Anda dapat melihat cara kerja tugas ini dengan melihat demo. Untuk mengetahui informasi selengkapnya tentang kemampuan, model, dan opsi konfigurasi tugas ini, lihat Ringkasan.

Contoh kode

Kode contoh untuk Pengenal Gestur memberikan implementasi lengkap tugas ini di JavaScript sebagai referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membangun aplikasi pengenalan gestur Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit contoh Pengenal Gestur di sini hanya menggunakan browser web Anda.

Penyiapan

Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan Anda, khususnya untuk menggunakan Pengenal Gestur. Untuk mengetahui informasi umum tentang cara menyiapkan lingkungan pengembangan web dan JavaScript, termasuk persyaratan versi platform, lihat Panduan penyiapan untuk web.

Paket JavaScript

Kode Gesture Recognizer tersedia melalui paket @mediapipe/tasks-vision NPM MediaPipe. Anda dapat menemukan dan mendownload library ini dengan mengikuti petunjuk di Panduan penyiapan platform.

Anda dapat menginstal paket yang diperlukan melalui NPM menggunakan perintah berikut:

npm install @mediapipe/tasks-vision

Jika Anda ingin mengimpor kode tugas melalui layanan jaringan penayangan konten (CDN), tambahkan kode berikut di tag <head> dalam file HTML Anda:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

Model

Tugas MediaPipe Gesture Recognizer memerlukan model terlatih yang kompatibel dengan tugas ini. Untuk mengetahui informasi selengkapnya tentang model terlatih yang tersedia untuk Gesture Recognizer, lihat bagian Model di ringkasan tugas.

Pilih dan download model, lalu simpan dalam direktori project Anda:

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

Buat tugas

Gunakan salah satu fungsi createFrom...() Gesture Recognizer untuk menyiapkan tugas untuk menjalankan inferensi. Gunakan fungsi createFromModelPath() dengan jalur relatif atau absolut ke file model terlatih. Jika model Anda sudah dimuat ke dalam memori, Anda dapat menggunakan metode createFromModelBuffer().

Contoh kode di bawah menunjukkan penggunaan fungsi createFromOptions() untuk menyiapkan tugas. Fungsi createFromOptions memungkinkan Anda menyesuaikan Gesture Recognizer dengan opsi konfigurasi. Untuk mengetahui informasi selengkapnya tentang opsi konfigurasi, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara membuat dan mengonfigurasi tugas dengan opsi kustom:

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

Opsi konfigurasi

Tugas ini memiliki opsi konfigurasi berikut untuk aplikasi Web:

Nama Opsi Deskripsi Rentang Nilai Nilai Default
runningMode Menetapkan mode berjalan untuk tugas. Ada dua mode:

GAMBAR: Mode untuk input gambar tunggal.

VIDEO: Mode untuk frame yang didekode dari video atau di livestream data input, seperti dari kamera.		 {IMAGE, VIDEO} IMAGE
num_hands Jumlah maksimum tangan yang dapat dideteksi oleh GestureRecognizer. Any integer > 0 1
min_hand_detection_confidence Skor keyakinan minimum agar deteksi tangan dianggap berhasil dalam model deteksi telapak tangan. 0.0 - 1.0 0.5
min_hand_presence_confidence Skor keyakinan minimum skor kehadiran tangan dalam model deteksi penanda tangan. Dalam mode Video dan mode Live stream Gesture Recognizer, jika skor keyakinan kehadiran tangan dari model penanda tangan di bawah nilai minimum ini, model deteksi telapak tangan akan dipicu. Jika tidak, algoritma pelacakan tangan ringan digunakan untuk menentukan lokasi tangan untuk deteksi titik penting berikutnya. 0.0 - 1.0 0.5
min_tracking_confidence Skor keyakinan minimum agar pelacakan tangan dianggap berhasil. Ini adalah nilai minimum IoU kotak pembatas antara tangan dalam frame saat ini dan frame terakhir. Dalam mode Video dan mode Streaming Gesture Recognizer, jika pelacakan gagal, Gesture Recognizer akan memicu deteksi tangan. Jika tidak, deteksi tangan akan dilewati. 0.0 - 1.0 0.5
canned_gestures_classifier_options Opsi untuk mengonfigurasi perilaku pengklasifikasi gestur bawaan. Gestur tersimpan adalah ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]
  • Lokalitas nama tampilan: lokalitas yang akan digunakan untuk nama tampilan yang ditentukan melalui Metadata Model TFLite, jika ada.
  • Hasil maks: jumlah maksimum hasil klasifikasi dengan skor tertinggi yang akan ditampilkan. Jika < 0, semua hasil yang tersedia akan ditampilkan.
  • Nilai minimum skor: skor di bawahnya hasil ditolak. Jika ditetapkan ke 0, semua hasil yang tersedia akan ditampilkan.
  • Daftar yang diberi akses ke kategori: daftar nama kategori yang diberi akses. Jika tidak kosong, hasil klasifikasi yang kategorinya tidak ada dalam set ini akan difilter. Tidak dapat muncul bersamaan dengan daftar yang ditolak.
  • Daftar tolak kategori: daftar tolak nama kategori. Jika tidak kosong, hasil klasifikasi yang kategorinya ada dalam set ini akan difilter. Tidak dapat muncul bersamaan dengan daftar yang diizinkan.
    		•
    • Lokalitas nama tampilan: any string
    • Hasil maks: any integer
    • Nilai minimum skor: 0.0-1.0
    • Daftar yang diizinkan kategori: vector of strings
    • Daftar tolak kategori: vector of strings
    • Lokalitas nama tampilan: "en"
    • Hasil maks: -1
    • Nilai minimum skor: 0
    • Daftar yang diberi akses ke kategori: kosong
    • Daftar tolak kategori: kosong
    custom_gestures_classifier_options Opsi untuk mengonfigurasi perilaku pengklasifikasi gestur kustom.
  • Lokalitas nama tampilan: lokalitas yang akan digunakan untuk nama tampilan yang ditentukan melalui Metadata Model TFLite, jika ada.
  • Hasil maks: jumlah maksimum hasil klasifikasi dengan skor tertinggi yang akan ditampilkan. Jika < 0, semua hasil yang tersedia akan ditampilkan.
  • Nilai minimum skor: skor di bawahnya hasil ditolak. Jika ditetapkan ke 0, semua hasil yang tersedia akan ditampilkan.
  • Daftar yang diberi akses ke kategori: daftar nama kategori yang diberi akses. Jika tidak kosong, hasil klasifikasi yang kategorinya tidak ada dalam set ini akan difilter. Tidak dapat muncul bersamaan dengan daftar yang ditolak.
  • Daftar tolak kategori: daftar tolak nama kategori. Jika tidak kosong, hasil klasifikasi yang kategorinya ada dalam set ini akan difilter. Tidak dapat muncul bersamaan dengan daftar yang diizinkan.
    		•
    • Lokalitas nama tampilan: any string
    • Hasil maks: any integer
    • Nilai minimum skor: 0.0-1.0
    • Daftar yang diizinkan kategori: vector of strings
    • Daftar tolak kategori: vector of strings
    • Lokalitas nama tampilan: "en"
    • Hasil maks: -1
    • Nilai minimum skor: 0
    • Daftar yang diberi akses ke kategori: kosong
    • Daftar tolak kategori: kosong

    Menyiapkan data

    Gesture Recognizer dapat mengenali gestur dalam gambar dalam format apa pun yang didukung oleh browser host. Tugas ini juga menangani pra-pemrosesan input data, termasuk pengubahan ukuran, rotasi, dan normalisasi nilai. Untuk mengenali gestur dalam video, Anda dapat menggunakan API untuk memproses satu frame dalam satu waktu dengan cepat, menggunakan stempel waktu frame untuk menentukan kapan gestur terjadi dalam video.

    Jalankan tugas

    Pengenal Gestur menggunakan metode recognize() (dengan mode berjalan 'image') dan recognizeForVideo() (dengan mode berjalan 'video') untuk memicu inferensi. Tugas memproses data, mencoba mengenali gestur tangan, lalu melaporkan hasilnya.

    Kode berikut menunjukkan cara menjalankan pemrosesan dengan model tugas:

    Gambar

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

    Video

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

    Panggilan ke metode recognize() dan recognizeForVideo() Gesture Recognizer berjalan secara sinkron dan memblokir thread antarmuka pengguna. Jika Anda mengenali gestur dalam frame video dari kamera perangkat, setiap pengenalan akan memblokir thread utama. Anda dapat mencegah hal ini dengan menerapkan pekerja web untuk menjalankan metode recognize() dan recognizeForVideo() di thread lain.

    Untuk mengetahui penerapan yang lebih lengkap dalam menjalankan tugas Pengenal Gestur, lihat contoh.

    Menangani dan menampilkan hasil

    Pengenal Gestur menghasilkan objek hasil deteksi gestur untuk setiap jalannya pengenalan. Objek hasil berisi penanda tangan dalam koordinat gambar, penanda tangan dalam koordinat dunia, dominasi tangan(tangan kiri/kanan), dan kategori gestur tangan dari tangan yang terdeteksi.

    Berikut adalah contoh data output dari tugas ini:

    GestureRecognizerResult yang dihasilkan berisi empat komponen, dan setiap komponen adalah array, di mana setiap elemen berisi hasil deteksi tunggal tangan yang terdeteksi.

    • Preferensi tangan

      Tangan yang digunakan menunjukkan apakah tangan yang terdeteksi adalah tangan kiri atau kanan.

    • Gestur

      Kategori gestur yang dikenali dari tangan yang terdeteksi.

    • Tempat terkenal

      Ada 21 titik penting tangan, yang masing-masing terdiri dari koordinat x, y, dan z. Koordinat x dan y dinormalisasi ke [0.0, 1.0] masing-masing berdasarkan lebar dan tinggi gambar. Koordinat z merepresentasikan kedalaman tempat terkenal, dengan kedalaman di pergelangan tangan sebagai titik asal. Semakin kecil nilainya, semakin dekat landmark dengan kamera. Besarnya z menggunakan skala yang hampir sama dengan x.

    • Landmark Dunia

      21 penanda tangan juga ditampilkan dalam koordinat dunia. Setiap penanda lokasi terdiri dari x, y, dan z, yang merepresentasikan koordinat 3D dunia nyata dalam meter dengan titik asal di pusat geometris tangan.

    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)

    Gambar berikut menunjukkan visualisasi output tugas:

    Tangan dalam gerakan jempol ke atas dengan struktur kerangka tangan yang dipetakan

    Untuk penerapan yang lebih lengkap dalam membuat tugas Pengenal Gestur, lihat contoh.