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?
- Ajukan masalah spesifikasi di repo GitHub Shape Detection API, atau sampaikan pendapat Anda tentang masalah yang sudah ada.
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.
- Bagikan rencana Anda untuk menggunakannya di thread Discourse WICG.
- Kirim tweet ke @ChromiumDev menggunakan hashtag
#ShapeDetection
dan beri tahu kami tempat serta cara Anda menggunakannya.
Link bermanfaat
- Penjelasan untuk publik
- Demo API | Sumber Demo API
- Bug pelacakan
- Entri ChromeStatus.com
- Komponen Kedipan:
Blink>ImageCapture