Shape Detection API: sebuah gambar bernilai ribuan kata, wajah, dan kode batang

Shape Detection API mendeteksi wajah, kode batang, dan teks dalam gambar.

Thomas Steiner

Apa yang dimaksud dengan Shape Detection API?

Dengan API seperti navigator.mediaDevices.getUserMedia dan pemilih foto Chrome untuk Android, pengambilan gambar atau data video live dari kamera perangkat, atau mengupload gambar lokal menjadi cukup mudah. Sejauh ini, data gambar dinamis ini—serta gambar statis di halaman—belum dapat diakses oleh kode, meskipun gambar sebenarnya dapat berisi banyak fitur menarik seperti wajah, kode batang, dan teks.

Misalnya, sebelumnya, jika developer ingin mengekstrak fitur tersebut di klien untuk mem-build pembaca kode QR, mereka harus mengandalkan library JavaScript eksternal. Hal ini dapat menjadi mahal dari sudut pandang performa dan meningkatkan keseluruhan bobot halaman. Di sisi lain, sistem operasi termasuk Android, iOS, dan macOS, tetapi juga chip hardware yang ditemukan di modul kamera, biasanya sudah memiliki detektor fitur yang berperforma tinggi dan sangat dioptimalkan seperti Android FaceDetector atau detektor fitur umum iOS, CIDetector.

Shape Detection API mengekspos implementasi ini melalui serangkaian antarmuka JavaScript. Saat ini, fitur yang didukung adalah deteksi wajah melalui antarmuka FaceDetector, deteksi kode batang melalui antarmuka BarcodeDetector, dan deteksi teks (Pengenalan Karakter Optik, (OCR)) melalui antarmuka TextDetector.

Kasus penggunaan yang disarankan

Seperti yang diuraikan di atas, Shape Detection API saat ini mendukung deteksi wajah, kode batang, dan teks. Daftar berbutir berikut berisi contoh kasus penggunaan untuk ketiga fitur tersebut.

Deteksi wajah

  • Situs jejaring sosial atau berbagi foto online biasanya mengizinkan penggunanya menambahkan anotasi pada orang dalam gambar. Dengan menandai batas wajah yang terdeteksi, tugas ini dapat difasilitasi.
  • Situs konten dapat memangkas gambar secara dinamis berdasarkan wajah yang berpotensi terdeteksi, bukan mengandalkan heuristik lainnya, atau menandai wajah yang terdeteksi dengan efek geser dan zoom seperti Ken Burns dalam format seperti cerita.
  • Situs pesan multimedia dapat mengizinkan penggunanya menempatkan objek lucu seperti kacamata hitam atau kumis pada penanda wajah yang terdeteksi.

Deteksi kode batang

  • Aplikasi web yang membaca kode QR dapat membuka kasus penggunaan yang menarik seperti pembayaran online atau navigasi web, atau menggunakan kode batang untuk membuat koneksi sosial di aplikasi pesan.
  • Aplikasi belanja dapat mengizinkan penggunanya memindai kode batang EAN atau UPC item di toko fisik untuk membandingkan harga secara online.
  • Bandara dapat menyediakan kios web tempat penumpang dapat memindai kode Aztec kartu boarding mereka untuk menampilkan informasi yang dipersonalisasi terkait penerbangan mereka.

Deteksi teks

  • Situs jejaring sosial online dapat meningkatkan aksesibilitas konten gambar buatan pengguna dengan menambahkan teks yang terdeteksi sebagai atribut alt untuk tag <img> jika tidak ada deskripsi lain yang diberikan.
  • Situs konten dapat menggunakan deteksi teks untuk menghindari penempatan judul di atas gambar hero dengan teks yang dimuat.
  • Aplikasi web dapat menggunakan deteksi teks untuk menerjemahkan teks seperti, misalnya, menu restoran.

Status saat ini

Langkah Status
1. Membuat penjelasan Selesai
2. Membuat draf awal spesifikasi Selesai
3. Mengumpulkan masukan & melakukan iterasi pada desain Sedang berlangsung
4. Uji coba origin Selesai
5. Luncurkan Deteksi kode batang Selesai
Deteksi Wajah Sedang Berlangsung
Deteksi Teks Sedang Berlangsung

Cara menggunakan Shape Detection API

Jika Anda ingin bereksperimen dengan Shape Detection API secara lokal, aktifkan tanda #enable-experimental-web-platform-features di about://flags.

Antarmuka ketiga detektor, FaceDetector, BarcodeDetector, dan TextDetector, serupa. Semuanya menyediakan satu metode asinkron yang disebut detect() yang menggunakan ImageBitmapSource sebagai input (yaitu, CanvasImageSource, Blob, atau ImageData).

Untuk FaceDetector dan BarcodeDetector, parameter opsional dapat diteruskan ke konstruktor detektor yang memungkinkan pemberian petunjuk ke detektor yang mendasarinya.

Periksa matriks dukungan di penjelasan dengan cermat untuk mengetahui ringkasan berbagai platform.

Bekerja dengan BarcodeDetector

BarcodeDetector menampilkan nilai mentah kode batang yang ditemukan di ImageBitmapSource dan kotak pembatas, serta informasi lainnya seperti format kode batang yang terdeteksi.

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

Bekerja dengan FaceDetector

FaceDetector selalu menampilkan kotak pembatas wajah yang terdeteksi di ImageBitmapSource. Bergantung pada platform, informasi selengkapnya tentang penanda wajah seperti mata, hidung, atau mulut mungkin tersedia. Perlu diperhatikan bahwa API ini hanya mendeteksi wajah. Fitur ini tidak mengidentifikasi siapa pemilik wajah.

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

Bekerja dengan TextDetector

TextDetector selalu menampilkan kotak pembatas teks yang terdeteksi, dan pada beberapa platform, karakter yang dikenali.

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

Deteksi fitur

Hanya memeriksa keberadaan konstruktor untuk mendeteksi fitur Shape Detection API saja tidak cukup. Kehadiran antarmuka tidak memberi tahu Anda apakah platform yang mendasarinya mendukung fitur tersebut. Tindakan ini berfungsi sebagaimana mestinya. Itulah sebabnya kami merekomendasikan pendekatan pemrograman defensif dengan melakukan deteksi fitur seperti ini:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

Antarmuka BarcodeDetector telah diperbarui untuk menyertakan metode getSupportedFormats() dan antarmuka serupa telah diusulkan untuk FaceDetector dan untuk TextDetector.

await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

Hal ini memungkinkan Anda mendeteksi fitur tertentu yang Anda butuhkan, misalnya, pemindaian kode QR:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

Hal ini lebih baik daripada menyembunyikan antarmuka karena kemampuan dapat bervariasi bahkan di seluruh platform, sehingga developer harus didorong untuk memeriksa dengan tepat kemampuan (seperti format kode batang atau penanda wajah tertentu) yang mereka perlukan.

Dukungan sistem operasi

Deteksi kode batang tersedia di macOS, ChromeOS, dan Android. Layanan Google Play diperlukan di Android.

Praktik terbaik

Semua detektor bekerja secara asinkron, yaitu tidak memblokir thread utama. Jadi, jangan mengandalkan deteksi real-time, tetapi beri waktu kepada detektor untuk melakukan tugasnya.

Jika Anda penggemar Web Worker, Anda akan senang mengetahui bahwa detektor juga ditampilkan di sana. Hasil deteksi dapat diserialisasi sehingga dapat diteruskan dari pekerja ke aplikasi utama melalui postMessage(). Demo menunjukkan cara kerjanya.

Tidak semua implementasi platform mendukung semua fitur, jadi pastikan untuk memeriksa situasi dukungan dengan cermat dan menggunakan API sebagai peningkatan progresif. Misalnya, beberapa platform mungkin mendukung deteksi wajah secara umum, tetapi tidak mendukung deteksi penanda wajah (mata, hidung, mulut, dll.); atau eksistensi dan lokasi teks dapat dikenali, tetapi tidak dapat mengenali konten teks.

Masukan

Tim Chrome dan komunitas standar web ingin mengetahui pengalaman Anda dengan Shape Detection API.

Ceritakan kepada kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau adakah metode atau properti yang hilang yang Anda perlukan untuk menerapkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan?

Mengalami masalah dengan penerapan?

Apakah Anda menemukan bug pada penerapan Chrome? Atau apakah penerapannya berbeda dengan spesifikasinya?

  • Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan tetapkan Components ke Blink>ImageCapture. Glitch sangat cocok untuk membagikan rekaman ulang yang cepat dan mudah.

Berencana untuk menggunakan API?

Berencana menggunakan Shape Detection API di situs Anda? Dukungan publik Anda membantu kami memprioritaskan fitur, dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut.

Link bermanfaat