Ş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.

Thomas Steiner

Shape Detection API nedir?

navigator.mediaDevices.getUserMedia gibi API'ler ve Android için Chrome'un fotoğraf seçicisi sayesinde, cihaz kameralarından resim veya canlı video verileri çekmek ya da yerel resimler yüklemek oldukça kolay hale geldi. Resimler yüzler, barkodlar ve metin gibi birçok ilginç özellik içerse de bu dinamik resim verilerine ve sayfadaki statik resimlere bugüne kadar kodla erişilememiştir.

Örneğin, geçmişte geliştiriciler QR kodu okuyucu oluşturmak için istemcide bu tür özellikleri ayıklamak istiyorsa harici JavaScript kitaplıklarına başvurmak zorunda kalıyordu. Bu, performans açısından pahalı olabilir ve genel 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 çiplerinde genellikle Android FaceDetector veya iOS genel özellik algılayıcısı CIDetector gibi yüksek performanslı ve son derece optimize edilmiş özellik algılayıcılar bulunur.

Shape Detection API, bu uygulamaları bir dizi JavaScript arayüzü aracılığıyla gösterir. Şu anda desteklenen özellikler 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)) şeklindedir.

Önerilen kullanım alanları

Yukarıda belirtildiği gibi, Şekil Algılama API'si şu anda yüz, barkod ve metin algılamayı desteklemektedir. Aşağıdaki madde listesinde, üç özelliğin de kullanım alanlarıyla ilgili örnekler verilmiştir.

Yüz algılama

  • Online sosyal ağlar veya fotoğraf paylaşım siteleri genellikle kullanıcılarının resimlerdeki kişilere not eklemesine izin verir. Algılanan yüzlerin sınırlarını vurgulayarak bu görevi kolaylaştırabilirsiniz.
  • İçerik siteleri, diğer sezgisel yöntemlere güvenmek yerine, olası olarak algılanan yüzlere göre resimleri dinamik olarak kırpabilir veya hikaye benzeri biçimlerde Ken Burns benzeri kaydırma ve yakınlaştırma efektleriyle algılanan yüzleri vurgulayabilir.
  • Multimedya mesajlaşma siteleri, kullanıcılarının algılanan yüz yer işaretlerine güneş gözlüğü veya bıyık gibi komik nesneler yerleştirmesine izin verebilir.

Barkod algılama

  • QR kodlarını okuyan web uygulamaları, online ödemeler veya web'de gezinme gibi ilginç kullanım alanlarına olanak tanıyabilir ya da mesajlaşma uygulamalarında sosyal bağlantılar kurmak için barkodları kullanabilir.
  • Alışveriş uygulamaları, kullanıcılarının internetteki fiyatları karşılaştırmak için fiziksel bir mağazadaki ürünlerin EAN veya UPC barkodlarını taramasına izin verebilir.
  • Havaalanları, yolcuların uçuşlarıyla ilgili kişiselleştirilmiş bilgileri görmek için biniş kartlarının Aztec kodlarını tarayabilecekleri web kioskları sağlayabilir.

Metin algılama

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

Mevcut durum

Step Durum
1. Açıklayıcı oluşturma Tamamlandı
2. Spesifikasyonun ilk taslağını oluşturma Tamamlandı
3. Geri bildirim toplama ve tasarımda iterasyon yapma Devam ediyor
4. Kaynak denemesi Tamamlandı
5. Lansman Barkod algılama Tamamlandı
Yüz Algılama Devam Ediyor
Metin Algılama Devam Ediyor

Shape Detection API'yi kullanma

Shape Detection API'yi yerel olarak denemek istiyorsanız about://flags'te #enable-experimental-web-platform-features işaretini etkinleştirin.

FaceDetector, BarcodeDetector ve TextDetector olmak üzere üç algılayıcının arayüzleri benzerdir. Hepsi, giriş olarak ImageBitmapSource (yani CanvasImageSource, Blob veya ImageData) alan detect() adlı tek bir eşzamansız yöntem sağlar.

FaceDetector ve BarcodeDetector için, temel algılayıcılara ipucu sağlamaya olanak tanıyan isteğe bağlı parametreler algılayıcının oluşturucusuna iletilebilir.

Farklı platformlara genel bakış için lütfen açıklayıcı makaledeki destek matrisini dikkatlice inceleyin.

BarcodeDetector ile çalışma

BarcodeDetector, ImageBitmapSource ve sınırlayıcı kutularda bulduğu barkod ham değerlerinin yanı sıra algılanan barkodların biçimleri gibi diğer bilgileri 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ır kutularını döndürür. Platforma bağlı olarak, yüzünüzdeki göz, burun veya ağız gibi önemli noktalarla ilgili daha fazla bilgi edinebilirsiniz. Bu API'nin yalnızca yüzleri algıladığını unutmayın. 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ır 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 kurucuların varlığını kontrol etmek yeterli değildir. Bir arayüzün varlığı, temel platformun özelliği destekleyip desteklemediğini belirtmez. Bu işlev beklenen şekilde çalışmaktadır. Bu nedenle, aşağıdaki gibi özellik algılama yaparak koruyucu 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öntemi içerecek şekilde güncellendi ve FaceDetector ile TextDetector için benzer arayüzler önerildi.

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 sayede, ihtiyacınız olan belirli bir özelliği (ör. QR kodu taraması) algılayabilirsiniz:

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

Bu, platformlar arasında bile özellikler değişebileceğinden arayüzleri gizlemek yerine daha iyidir. Bu nedenle, geliştiricilerin tam olarak ihtiyaç duydukları özelliği (ör. belirli bir barkod biçimi veya yüz noktası) kontrol etmeleri teşvik edilmelidir.

İşletim sistemi desteği

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

En iyi uygulamalar

Tüm algılayıcılar eşzamansız olarak çalışır. Yani ana iş parçacısını engellemezler. Bu nedenle, gerçek zamanlı algılamaya güvenmek yerine, algılayıcının işini yapması için biraz zaman tanıyın.

Web İşleyiciler'i seviyorsanız algılayıcıların burada da kullanılabildiğini bilmek sizi mutlu edecektir. Tespit sonuçları serileştirilebilir olduğundan postMessage() aracılığıyla çalışandan ana uygulamaya aktarılabilir. Demo, bu özelliğin nasıl kullanıldığını gösterir.

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

Geri bildirim

Chrome ekibi ve web standartları topluluğu, Şekil Algılama API'siyle ilgili deneyimleriniz hakkında bilgi edinmek istiyor.

API tasarımı hakkında bilgi verin

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

Uygulamayla ilgili sorun mu yaşıyorsunuz?

Chrome&#39;un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı?

  • https://new.crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ekleyin, sorunun yeniden üretilmesiyle ilgili basit talimatlar verin ve Bileşenler'i Blink>ImageCapture olarak ayarlayın. Glitch, hızlı ve kolay yeniden oluşturma işlemlerini paylaşmak için mükemmel bir araçtır.

API'yi kullanmayı planlıyor musunuz?

Sitenizde Şekil Algılama API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, özelliklere öncelik vermemize yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

Faydalı bağlantılar