Panduan deteksi penanda tangan untuk Web

Tugas MediaPipe Hand Landmarker memungkinkan Anda mendeteksi tanda tangan dalam sebuah gambar. Petunjuk ini menunjukkan cara menggunakan Penanda Tangan untuk aplikasi web dan JavaScript.

Untuk mengetahui informasi selengkapnya terkait kemampuan, model, dan opsi konfigurasi. tugas ini, lihat Ringkasan.

Contoh kode

Kode contoh untuk Hand Landmarker menyediakan implementasi lengkap dari tugas di JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mendapatkan mulai membangun aplikasi deteksi penanda tangan Anda sendiri. Anda dapat melihat, menjalankan, dan edit kode contoh Penanda Tangan hanya dengan menggunakan {i>browser<i} web.

Penyiapan

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

Paket JavaScript

Kode Landmarker Tangan 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) tambahkan kode berikut di kolom <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 MediaPipe Hand Landmarker memerlukan model terlatih yang kompatibel dengan tugas Anda. Untuk informasi selengkapnya tentang model terlatih yang tersedia untuk Hand Landmarker, 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...() Hand Landmarker 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 Penanda Tangan dengan opsi konfigurasi. Untuk informasi selengkapnya tentang konfigurasi opsi, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara membangun dan mengonfigurasi tugas dengan opsi:

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

Opsi konfigurasi

Tugas ini memiliki opsi konfigurasi berikut untuk Web dan JavaScript aplikasi:

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
numHands Jumlah maksimum tangan yang terdeteksi oleh detektor penanda Tangan. Any integer > 0 1
minHandDetectionConfidence Skor kepercayaan minimum untuk deteksi tangan dianggap berhasil dalam model deteksi telapak tangan. 0.0 - 1.0 0.5
minHandPresenceConfidence Skor keyakinan minimum untuk skor kehadiran tangan di tangan model deteksi landmark. Dalam mode Video dan mode Live stream, jika skor keyakinan kehadiran tangan dari model penanda tangan di bawah ambang batas ini, Hand Landmarker akan memicu model deteksi telapak tangan. Jika tidak, algoritma pelacakan tangan ringan menentukan lokasi tangan untuk deteksi penanda berikutnya. 0.0 - 1.0 0.5
minTrackingConfidence 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 Tangan Landmarker, jika pelacakan gagal, Tangan Landmarker memicu tangan deteksi. Jika tidak, deteksi tangan akan dilewati. 0.0 - 1.0 0.5

Menyiapkan data

Hand Landmarker dapat mendeteksi penanda tangan dalam gambar dalam format apa pun yang didukung {i>host<i} di browser web Anda. Tugas ini juga menangani pra-pemrosesan input data, termasuk pengubahan ukuran, rotasi, dan normalisasi nilai. Untuk mendeteksi tanda tangan dalam video, Anda dapat menggunakan API untuk memproses satu frame dalam satu waktu dengan cepat, menggunakan stempel waktu {i>frame<i} untuk menentukan kapan munculnya penanda tangan dalam video.

Menjalankan tugas

Penanda Tangan menggunakan detect() (dengan mode lari image) dan Metode detectForVideo() (dengan mode berjalan video) yang akan dipicu inferensi. Tugas itu memproses data, mencoba mendeteksi tanda tangan, dan kemudian melaporkan hasilnya.

Panggilan ke metode detect() dan detectForVideo() Hand Landmarker berjalan secara sinkron dan memblokir thread antarmuka pengguna. Jika Anda mendeteksi tanda tangan dalam bingkai video dari kamera perangkat, setiap deteksi memblokir . Anda dapat mencegah hal ini dengan menerapkan pekerja web untuk menjalankan detect() dan detectForVideo() pada thread lain.

Kode berikut menunjukkan cara mengeksekusi pemrosesan dengan model tugas:

Gambar

const image = document.getElementById("image") as HTMLImageElement;
const handLandmarkerResult = handLandmarker.detect(image);

Video

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

Untuk implementasi yang lebih lengkap dalam menjalankan tugas Hand Landmarker, lihat contoh kode.

Menangani dan menampilkan hasil

Hand Landmarker menghasilkan objek hasil penanda tangan untuk setiap deteksi akan dijalankan. Objek hasil berisi penanda tangan dalam koordinat gambar, tangan penanda dalam koordinat dunia dan kecenderungan penggunaan tangan(kiri/kanan) yang terdeteksi tangan.

Berikut ini contoh data output dari tugas ini:

Output HandLandmarkerResult berisi tiga komponen. Setiap komponen merupakan array, dengan setiap elemen berisi hasil berikut untuk satu tangan yang terdeteksi:

  • Kecenderungan penggunaan tangan

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

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

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)

Gambar berikut menunjukkan visualisasi output tugas:

Kode contoh Hand Landmarker menunjukkan cara menampilkan hasil yang ditampilkan dari tugas, lihat contoh kode