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 Chrome untuk Android pemilih foto, menjadi cukup mudah untuk mengambil gambar atau data video langsung dari perangkat kamera, atau untuk mengunggah gambar lokal. 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 membuat pembaca kode QR, mereka harus untuk mengandalkan library JavaScript eksternal. Biayanya bisa mahal dari meningkatkan sudut pandang performa dan meningkatkan bobot halaman secara keseluruhan. Di sisi lain tangan, sistem operasi termasuk Android, iOS, dan macOS, tetapi juga perangkat keras yang ditemukan di modul kamera, biasanya sudah memiliki performa dan pendeteksi fitur yang dioptimalkan seperti Android FaceDetector atau detektor fitur generik iOS, CIDetector.

Shape Detection API mengekspos implementasi ini melalui satu set antarmuka JavaScript. Saat ini, fitur yang didukung adalah melalui antarmuka FaceDetector, deteksi kode batang melalui Antarmuka BarcodeDetector, dan deteksi teks (Karakter Optik Pengenalan, (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

  • Situs jejaring sosial atau berbagi foto online biasanya memungkinkan penggunanya memberikan anotasi pada orang dalam gambar. Dengan menyoroti batas wajah yang terdeteksi, untuk memudahkan tugas ini.
  • Situs konten dapat memangkas gambar secara dinamis berdasarkan kategori yang berpotensi terdeteksi wajah, alih-alih mengandalkan heuristik lain, atau menyoroti wajah yang terdeteksi dengan efek seperti Ken Burns efek geser dan zoom 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 koneksi di aplikasi messenger.
  • Aplikasi belanja memungkinkan pengguna untuk memindai EAN atau Kode batang UPC dari item di toko fisik untuk membandingkan harga secara {i>online<i}.
  • Bandara dapat menyediakan kios web tempat penumpang dapat memindai boarding pass mereka kartu Kode Aztec yang akan ditampilkan 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 {i>hero images<i} dengan teks yang ditampung.
  • Aplikasi web dapat menggunakan deteksi teks untuk menerjemahkan teks seperti, misalnya, menu restoran.

Status saat ini

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

Cara menggunakan Shape Detection API

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

Antarmuka ketiga detektor, FaceDetector, BarcodeDetector, dan TextDetector serupa. Semuanya menyediakan satu metode asinkron bernama 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 pendeteksi yang mendasarinya.

Harap periksa matriks dukungan dengan cermat di penjelasan untuk 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 ImageBitmapSource. Bergantung pada platformnya, lebih banyak informasi terkait tanda wajah seperti mata, hidung, atau mulut mungkin tersedia. Penting untuk diperhatikan bahwa API ini hanya mendeteksi wajah. Bagian ini tidak mengidentifikasi 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 dari teks yang terdeteksi, dan di 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

Murni memeriksa keberadaan konstruktor untuk mendeteksi fitur Shape Detection API tidak cukup. Keberadaan antarmuka tidak memberi tahu Anda apakah platform dasar mendukung fitur tersebut atau tidak. Tindakan ini berfungsi sebagaimana mestinya. Itu 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 diupdate 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 diperlukan, misalnya, pemindaian kode QR:

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

Ini lebih baik daripada menyembunyikan antarmuka karena bahkan di seluruh platform, kemampuan dapat bervariasi sehingga developer harus dianjurkan untuk memeriksa kemampuan (seperti format kode batang atau tanda 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, yaitu tidak memblokir jaringan . Jadi, jangan mengandalkan pendeteksian waktu nyata, tetapi izinkan beberapa waktu bagi detektor untuk melakukan pekerjaannya.

Jika Anda adalah penggemar Pekerja Web, Anda juga akan senang mengetahui bahwa detektor juga terekspos di sana. Hasil deteksi dapat diserialisasi dan dapat diteruskan dari worker ke aplikasi utama melalui postMessage(). Demo menunjukkan cara kerjanya.

Tidak semua implementasi platform mendukung semua fitur, jadi pastikan untuk memeriksa situasi dukungan secara hati-hati dan menggunakan API sebagai peningkatan performa. Misalnya, beberapa platform mungkin mendukung deteksi wajah per se, tetapi tidak mendeteksi struktur wajah (mata, hidung, mulut, dll.); atau eksistensi dan lokasi teks dapat dikenali, namun bukan konten teks.

Masukan

Tim Chrome dan komunitas standar web ingin mengetahui dengan 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? Ada pertanyaan atau komentar tentang model keamanan?

Ada masalah dengan implementasinya?

Apakah Anda menemukan bug pada implementasi Chrome? Ataukah implementasi berbeda dengan spesifikasi?

  • Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan sebagai sedetail mungkin, instruksi sederhana untuk mereproduksi, dan mengatur Komponen ke Blink>ImageCapture. Glitch bekerja dengan sangat baik untuk berbagi laporan dengan cepat dan mudah.

Anda berencana menggunakan API?

Anda berencana menggunakan Shape Detection API di situs Anda? Dukungan publik Anda membantu kami untuk memprioritaskan fitur, dan menunjukkan kepada vendor browser lainnya pentingnya mendukung mereka.

Link bermanfaat