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

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

Apa itu Shape Detection API?

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

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

Shape Detection API mengekspos implementasi ini melalui kumpulan 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 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

  • Jaringan sosial online atau situs berbagi foto biasanya memungkinkan pengguna membuat anotasi orang-orang dalam gambar. Dengan menandai batas-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 penggeser dan zoom seperti Ken Burns dalam format seperti cerita.
  • Situs pesan multimedia dapat memungkinkan penggunanya untuk 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 menarik seperti pembayaran online atau navigasi web, atau menggunakan kode batang untuk membangun hubungan sosial di aplikasi messenger.
  • Aplikasi belanja dapat memungkinkan penggunanya memindai kode batang EAN atau UPC pada item di toko fisik untuk membandingkan harga secara online.
  • Bandara dapat menyediakan kios web tempat penumpang dapat memindai kode Aztec boarding pass 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 utama dengan teks yang dimuat.
  • Aplikasi web dapat menggunakan deteksi teks untuk menerjemahkan teks seperti, misalnya, menu restoran.

Status saat ini

Langkah Status
1. Buat pesan penjelasan Selesai
2. Membuat draf awal spesifikasi Selesai
3. Kumpulkan masukan & lakukan iterasi pada desain Dalam proses
4. Uji coba origin Selesai
5. Luncurkan Deteksi kode batang Selesai
Deteksi Wajah Dalam Proses
Deteksi Teks Dalam Proses

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 pendeteksi yang memungkinkan pemberian petunjuk ke detektor dasar.

Periksa matriks dukungan dengan cermat dalam penjelasan untuk melihat ringkasan tentang berbagai platform.

Bekerja dengan BarcodeDetector

BarcodeDetector menampilkan nilai mentah kode batang yang ditemukannya di ImageBitmapSource dan kotak pembatas, serta informasi lain 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 terkait penanda wajah seperti mata, hidung, atau mulut mungkin tersedia. Perlu diperhatikan bahwa API ini hanya mendeteksi wajah. Data ini tidak mengidentifikasi milik siapa 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 dari 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

Memeriksa secara murni keberadaan konstruktor untuk menampilkan fitur deteksi Shape Detection API tidaklah 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"
  ]
*/

Tindakan ini memungkinkan Anda mendeteksi fitur tertentu yang Anda perlukan, 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 meskipun di seluruh platform, kemampuan dapat bervariasi sehingga developer sebaiknya memeriksa kemampuan secara akurat (seperti format kode batang atau struktur wajah tertentu) yang diperlukan.

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, artinya, detektor tersebut tidak memblokir thread utama. Jadi, jangan mengandalkan deteksi realtime, tetapi tunggu beberapa saat agar detektor melakukan tugasnya.

Jika Anda adalah penggemar Pekerja Web, Anda akan senang mengetahui bahwa pendeteksi juga terekspos di sana. Hasil deteksi dapat diserialisasi dan dengan demikian dapat diteruskan dari pekerja ke aplikasi utama melalui postMessage(). Demo menunjukkan penerapannya.

Tidak semua implementasi platform mendukung semua fitur, jadi pastikan untuk memeriksa situasi dukungan dengan cermat dan gunakan API sebagai peningkatan progresif. Misalnya, beberapa platform mungkin mendukung deteksi wajah per sesi, tetapi tidak mendukung deteksi struktur wajah (mata, hidung, mulut, dll.); atau keberadaan dan lokasi teks dapat dikenali, tetapi konten teks tidak dapat dikenali.

Masukan

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

Beri tahu kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang Anda butuhkan untuk mengimplementasikan ide? Punya pertanyaan atau komentar tentang model keamanan?

Ada masalah dengan penerapan?

Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah implementasinya berbeda dengan spesifikasi?

  • Laporkan bug di https://new.crbug.com. Pastikan Anda menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan setel Komponen ke Blink>ImageCapture. Glitch sangat cocok untuk berbagi repro yang cepat dan mudah.

Berencana 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