Panduan pengenalan gestur untuk Web

Tugas Pengenal Gestur MediaPipe memungkinkan Anda mengenali gestur tangan secara real time, dan memberikan hasil gestur tangan yang dikenali dan penanda tangan 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 terkait kemampuan, model, dan opsi konfigurasi. tugas ini, lihat Ringkasan.

Contoh kode

Kode contoh untuk Pengenal Gestur memberikan implementasi lengkap dari tugas di JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mendapatkan memulai dengan membangun aplikasi pengenalan {i>gesture <i}Anda sendiri. Anda dapat melihat, menjalankan, dan edit contoh kode Pengenal Gestur hanya dengan menggunakan {i>browser<i} web.

Penyiapan

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

Paket JavaScript

Kode Pengenal Gestur tersedia melalui MediaPipe @mediapipe/tasks-vision NPM. Anda dapat temukan dan download library ini dengan mengikuti petunjuk di platform Panduan penyiapan.

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

npm install @mediapipe/tasks-vision

Jika Anda ingin mengimpor kode tugas melalui jaringan penayangan konten (CDN) layanan, tambahkan kode berikut dalam tag <head> di 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.js"
    crossorigin="anonymous"></script>
</head>

Model

Tugas Pengenal Gestur MediaPipe memerlukan model terlatih yang kompatibel dengan tugas Anda. Untuk mengetahui informasi selengkapnya tentang model terlatih yang tersedia untuk Pengenal Gestur, lihat ringkasan tugas bagian Model.

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

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

Membuat tugas

Gunakan salah satu fungsi createFrom...() Pengenal Gestur untuk mempersiapkan tugas untuk menjalankan inferensi. Menggunakan createFromModelPath() dengan jalur relatif atau absolut ke file model terlatih. Jika model sudah dimuat ke dalam memori, Anda dapat menggunakan Metode createFromModelBuffer().

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

Kode berikut menunjukkan cara membangun dan mengonfigurasi tugas dengan opsi:

// 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 moda:

IMAGE: Mode untuk input gambar tunggal.

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

    Menyiapkan data

    Pengenal Gestur dapat mengenali {i>gesture <i}di gambar dalam format apa pun yang didukung oleh {i>host<i} di browser web Anda. Tugas ini juga menangani pra-pemrosesan input data, termasuk pengubahan ukuran, rotasi, dan normalisasi nilai. Untuk mengenali {i>gesture <i} dalam video, Anda dapat menggunakan API untuk memproses satu frame dengan cepat pada satu waktu, menggunakan untuk menentukan kapan {i>gesture <i}muncul dalam video.

    Menjalankan tugas

    Pengenal Gestur menggunakan recognize() (dengan mode berjalan 'image') dan Metode recognizeForVideo() (dengan mode berjalan 'video') yang akan dipicu inferensi. Tugas itu memproses data, mencoba mengenali tangan {i>gesture, <i}dan kemudian melaporkan hasilnya.

    Kode berikut menunjukkan cara mengeksekusi 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 Pengenal Gestur recognize() dan recognizeForVideo() berjalan secara sinkron dan memblokir thread antarmuka pengguna. Jika Anda mengenali {i>gesture <i}di frame video dari kamera perangkat, setiap pengenalan akan memblokir . Anda dapat mencegah hal ini dengan menerapkan pekerja web untuk menjalankan Metode recognize() dan recognizeForVideo() di thread lain.

    Untuk implementasi yang lebih lengkap dalam menjalankan tugas Pengenal Gestur, lihat contoh kode.

    Menangani dan menampilkan hasil

    Pengenal Gestur menghasilkan objek hasil deteksi gestur untuk setiap pengenalan objek. Objek hasil berisi penanda tangan dalam koordinat gambar, penanda tangan dalam koordinat dunia, tangan kiri(tangan kiri/kanan), dan tangan kategori {i>gesture <i}dari tangan yang terdeteksi.

    Berikut ini contoh data output dari tugas ini:

    GestureRecognizerResult yang dihasilkan berisi empat komponen, dan setiap komponen adalah array, dengan setiap elemen berisi hasil yang terdeteksi dari satu tangan yang terdeteksi.

    • Kecenderungan penggunaan tangan

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

    • Gestur

      Kategori gestur yang dikenali dari tangan yang terdeteksi.

    • Tempat terkenal

      Ada 21 penanda tangan, masing-masing terdiri dari koordinat x, y, dan z. Tujuan Koordinat x dan y dinormalkan ke [0,0, 1,0] berdasarkan lebar gambar dan tinggi masing-masing. Koordinat z mewakili kedalaman tempat terkenal, dengan kedalaman di pergelangan tangan menjadi asalnya. Semakin kecil nilainya, maka penanda ke kamera. Besarnya z menggunakan skala yang kurang lebih sama dengan x.

    • Landmark Dunia

      Landmark 21 tangan juga ditampilkan dalam koordinat dunia. Setiap tempat terkenal terdiri dari x, y, dan z, yang mewakili koordinat 3D dunia nyata di 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:

    Untuk implementasi yang lebih lengkap dari pembuatan tugas Pengenal Gestur, lihat contoh kode.