Şekil Algılama API'si: Bir resim bin kelimeye, yüze ve barkoda bedeldir

Şekil Algılama API'si resimlerdeki yüzleri, barkodları ve metinleri algılar.

Şekil Algılama API'sı nedir?

navigator.mediaDevices.getUserMedia ve Android için Chrome fotoğraf seçici gibi API'ler sayesinde, cihaz kameralarından resim veya canlı video verisi yakalamak ya da yerel resimler yüklemek çok kolay hale geldi. Resimler aslında yüzler, barkodlar ve metin gibi birçok ilgi çekici özellik içerse de bu dinamik resim verileri ve bir sayfadaki statik resimler şu ana kadar kod üzerinden erişilebilir durumda değildi.

Örneğin, geçmişte QR kodu okuyucu oluşturmak için bu tür özellikleri istemcide ayıklamak isteyen geliştiriciler, harici JavaScript kitaplıklarından yararlanmak zorundaydılar. Performans açısından pahalı olabilir ve toplam sayfa ağırlığını artırabilir. Öte yandan, Android, iOS ve macOS gibi işletim sistemlerinin yanı sıra kamera modüllerinde bulunan donanım çipleri de genellikle Android FaceDetector veya iOS genel özellik algılayıcı CIDetector gibi yüksek performanslı ve yüksek düzeyde optimize edilmiş özellik algılayıcılarına sahiptir.

Shape Detection API, bu uygulamaları bir dizi JavaScript arayüzü aracılığıyla sunar. Şu anda FaceDetector arayüzü üzerinden yüz algılama, BarcodeDetector arayüzü üzerinden barkod algılama ve TextDetector arayüzü üzerinden metin algılama (Optik Karakter Tanıma, (OCR)) özellikleri desteklenmektedir.

Önerilen kullanım alanları

Yukarıda belirtildiği gibi Şekil Algılama API şu anda yüzlerin, barkodların ve metinlerin algılanmasını desteklemektedir. Aşağıdaki madde işaretli listede, her üç özelliğin de kullanım alanlarına örnekler verilmiştir.

Yüz algılama

  • Çevrimiçi sosyal ağ veya fotoğraf paylaşım siteleri genellikle kullanıcılarının resimlere kişilere ek açıklama eklemesine izin verir. Algılanan yüzlerin sınırlarını vurgulayarak bu görev kolaylaştırılabilir.
  • İçerik siteleri, diğer buluşsal yöntemlere başvurmak yerine, resimleri potansiyel olarak algılanan yüzlere göre dinamik olarak kırpabilir veya Ken Burns benzeri kaydırma ve yakınlaştırma efektleriyle algılanan yüzleri hikaye benzeri biçimlerde vurgulayabilir.
  • Multimedya mesajlaşma siteleri, kullanıcıların algılanan önemli noktaların üzerine güneş gözlüğü veya bıyık gibi komik nesneleri yerleştirmelerine olanak tanıyabilir.

Barkod algılama

  • QR kodlarını okuyan web uygulamaları, online ödemeler veya web'de gezinme gibi ilginç kullanım alanlarının kilidini açabilir ya da mesajlaşma uygulamalarında sosyal bağlantılar kurmak için barkodları kullanabilir.
  • Alışveriş uygulamaları, kullanıcıların fiziksel bir mağazadaki ürünlerin EAN veya UPC barkodlarını tarayıp fiyatları internette karşılaştırmasına olanak tanıyabilir.
  • Havaalanları, yolcuların biniş kartlarının Aztek kodlarını tarayarak uçuşlarıyla ilgili kişiselleştirilmiş bilgiler gösterebilecekleri web kioskları sağlayabilir.

Metin algılama

  • Çevrimiçi sosyal ağ siteleri, başka açıklama sağlanmadığında algılanan metinleri <img> etiketleri için alt özelliği olarak ekleyerek kullanıcı tarafından oluşturulan resim içeriğinin erişilebilirliğini artırabilir.
  • İçerik siteleri, içerilen metin bulunan hero resimlerin üzerine başlık yerleştirmekten kaçınmak için metin algılamayı kullanabilir.
  • Web uygulamaları, restoran menüleri gibi metinleri çevirmek için metin algılama özelliğini kullanabilir.

Mevcut durum

Adım Durum
1. Açıklayıcı oluşturun Tamamlandı
2. İlk spesifikasyon taslağını oluşturma Tamamlandı
3. Geri bildirim alma ve tasarımı yineleme Devam ediyor
4. Kaynak denemesi Tamamlandı
5. Lansman Barkod algılama Tamamlandı
Yüz Algılama Devam Ediyor
Metin Algılama Devam Ediyor

Şekil Algılama API'si nasıl kullanılır?

Şekil Algılama API'sini yerel olarak denemek istiyorsanız about://flags öğesinde #enable-experimental-web-platform-features işaretini etkinleştirin.

FaceDetector, BarcodeDetector ve TextDetector algılayıcılarının üçü de benzerdir. Hepsi, giriş olarak ImageBitmapSource (CanvasImageSource, Blob veya ImageData) alan, detect() adında tek bir eşzamansız yöntem sunar.

FaceDetector ve BarcodeDetector için algılayıcının oluşturucusuna, temel algılayıcılara ipuçları sağlamak amacıyla isteğe bağlı parametreler iletilebilir.

Farklı platformlar hakkında genel bir bakış için lütfen açıklama aracındaki destek matrisini dikkatlice inceleyin.

BarcodeDetector ile çalışma

BarcodeDetector, ImageBitmapSource ve sınırlayıcı kutularda bulduğu ham barkod değerlerinin yanı sıra algılanan barkodların biçimleri gibi diğer bilgileri de döndürür.

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

FaceDetector ile çalışma

FaceDetector, her zaman ImageBitmapSource içinde algıladığı yüzlerin sınırlayıcı kutularını döndürür. Platforma bağlı olarak göz, burun veya ağız gibi yüzdeki önemli noktalar hakkında daha fazla bilgi edinilebilir. Bu API'nin yalnızca yüzleri algıladığı unutulmamalıdır. Bir yüzün kime ait olduğunu tanımlamaz.

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

TextDetector ile çalışma

TextDetector her zaman algılanan metinlerin sınırlayıcı kutularını ve bazı platformlarda tanınan karakterleri döndürür.

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

Özellik algılama

Şekil Algılama API'sini algılamak için yalnızca özellik oluşturucularının olup olmadığını kontrol etmek yeterli olmaz. Arayüzün varlığı, temel platformun söz konusu özelliği destekleyip desteklemediğini göstermez. Bu işlev amaçlandığı gibi çalışmaktadır. Bu nedenle, aşağıdaki gibi özellik algılama yoluyla defansif programlama yaklaşımını öneririz:

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

BarcodeDetector arayüzü, getSupportedFormats() yöntemini içerecek şekilde güncellenmiştir ve FaceDetector ve TextDetector için benzer arayüzler önerilmiştir.

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"
  ]
*/

Bu, ihtiyacınız olan belirli bir özelliği (ör. QR kodu tarama) algılamanıza olanak tanır:

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

Bu, arayüzleri gizlemekten daha iyidir çünkü platformlar arasında bile özellikler değişebilir ve bu nedenle geliştiriciler, gereken özellikleri (belirli bir barkod biçimi veya yüz işareti gibi) tam olarak kontrol etmeleri için teşvik edilmelidir.

İşletim sistemi desteği

Barkod algılama özelliği macOS, ChromeOS ve Android'de kullanılabilir. Google Play Hizmetleri Android'de gereklidir.

En iyi uygulamalar

Tüm algılayıcılar eşzamansız olarak çalışır. Yani ana iş parçacığını engellemez. Bu nedenle, gerçek zamanlı algılamaya güvenmeyin. Bunun yerine dedektörün çalışmasını sağlamak için biraz zaman tanıyın.

Web Çalışanları hayranıysanız algılayıcıların orada da açığa çıktığını bilmekten mutluluk duyacaksınız. Algılama sonuçları seri hale getirilebilir ve böylece, postMessage() aracılığıyla çalışandan ana uygulamaya geçirilebilir. Demoda bunu uygulamalı olarak görebilirsiniz.

Tüm platform uygulamaları tüm özellikleri desteklemez. Bu nedenle, destek durumunu dikkatlice kontrol ettiğinizden ve API'yi aşamalı geliştirme olarak kullandığınızdan emin olun. Örneğin, bazı platformlar yüz algılamayı destekleyip yüz işareti algılamayı (gözler, burun, ağız vb.) desteklemeyebilir ya da metnin varlığı ve konumu tanınabilir ancak metin içerikleri tanınabilir.

Geri bildirim

Chrome ekibi ve web standartları topluluğu, Shape Detection API ile ilgili deneyimlerinizi öğrenmek ister.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir durum mu var? Yoksa fikrinizi uygulamak için ihtiyaç duyduğunuz eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz mu var?

Uygulamayla ilgili bir sorun mu var?

Chrome'un uygulamasında bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?

  • https://new.crbug.com adresinden hata bildiriminde bulunun. Mümkün olduğunca fazla ayrıntı eklediğinizden, yeniden oluşturmaya ilişkin basit talimatları eklediğinizden ve Bileşenler'i Blink>ImageCapture olarak ayarladığınızdan emin olun. Glitch hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

API'yi kullanmayı mı planlıyorsunuz?

Sitenizde Şekil Algılama API'sini kullanmayı mı planlıyorsunuz? Herkese açık desteğiniz, özellikleri önceliklendirmemize yardımcı olur ve diğer tarayıcı satıcılarına onları desteklemenin ne kadar kritik olduğunu gösterir.

Faydalı bağlantılar