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

Shape Detection API nedir?

navigator.mediaDevices.getUserMedia gibi API'lerle ve Android için Chrome fotoğraf seçici, Artık cihazdan resim veya canlı video verilerini yakalamak oldukça kolay hale geldi. fotoğraf makinelerini kullanabilir veya yerel görüntüler yükleyebilirsiniz. Şimdiye kadar, bu dinamik resim verileri ve bir sayfada yer alan statik resimler içerir; ancak bunlar kodla erişilemediğinde bile görseller; yüzler, fotoğraflar, barkodları ve metinleri kullanır.

Örneğin, geçmişte, geliştiriciler otomatik olarak bir QR kodu okuyucusu oluşturduysa, kullanma konusunda yardımcı olabilir. Bu hizmet, artırmak ve genel sayfa ağırlığını artırmaktır. Diğer Android, iOS ve macOS gibi işletim sistemlerinin yanı sıra kamera modüllerinde bulunan çiplerden genellikle yüksek performans gösteren ve Android ve iOS gibi optimize edilmiş özellik algılayıcıları FaceDetector iOS genel özellik algılayıcısı ise, CIDetector.

Şekil Algılama API'si, bu uygulamaları JavaScript arayüzleri kümesidir. Şu anda desteklenen özellikler FaceDetector arayüzü aracılığıyla barkod algılama, BarcodeDetector arayüzü ve metin algılama (Optik Karakter) TextDetector arayüzü aracılığıyla tanıma, (OCR) özelliğini açın.

Önerilen kullanım alanları

Yukarıda belirtildiği gibi, Shape Detection API şu anda algılamayı desteklemektedir her şeyi kapsıyor. Aşağıdaki madde işareti listesinde örnekler bulunur üç kullanım alanı da vardır.

Yüz algılama

  • Çevrimiçi sosyal ağ veya fotoğraf paylaşım siteleri, kullanıcılarına genellikle insanlara ek açıklama eklemek için de kullanılabilir. Algılanan yüzlerin sınırlarını vurgulayarak bu görev kolaylaştırılabilir.
  • İçerik siteleri, tespit edilen potansiyel unsurlara göre görselleri dinamik olarak kırpabilir. diğer bulgulara güvenmek yerine yüzleri veya algılanan yüzleri vurgulayın Ken Burns benzeri hikaye benzeri biçimlerde kaydırma ve yakınlaştırma efektleri.
  • Multimedya mesajlaşma siteleri, kullanıcılarının güneş gözlüğü veya bıyık dokunun.

Barkod algılama

  • QR kodlarını okuyan web uygulamaları, aşağıdakiler gibi ilginç kullanım alanlarının kilidini açabilir: web'de gezinme veya sosyal medya kurulumu için barkod kullanma Mesajlaşma uygulamalarındaki bağlantılar.
  • Alışveriş uygulamaları, kullanıcıların EAN veya UPC barkodları Fiziksel mağazadaki fiyatları online olarak karşılaştırabilirsiniz.
  • Havaalanlarında, yolcuların binişlerini tarayabilecekleri web kioskları sağlanabilir. kartlar Gösterilecek Aztec kodları uçuşlarıyla ilgili kişiselleştirilmiş bilgiler verir.

Metin algılama

  • Çevrimiçi sosyal ağ siteleri, erişilebilirliklerini algılanan metinleri alt özelliği olarak ekleyerek kullanıcı tarafından oluşturulan resim içeriği başka açıklama sağlanmadığında <img> etiketleri için.
  • İçerik siteleri, başlıkların üste yerleştirilmesini önlemek için metin algılama özelliğini kullanabilir metin içeren hero resimler.
  • Web uygulamaları aşağıdaki gibi metinleri çevirmek için metin algılamayı kullanabilir: örneğin restoran menüleri.

Mevcut durum

Step Durum
1. Açıklayıcı oluşturun Tamamlandı
2. İlk spesifikasyon taslağını oluşturun Tamamlandı
3. Geri bildirim toplama tasarımı yineleyin Devam ediyor
4. Kaynak denemesi Tamamlandı
5. Başlat Barkod algılama Tamamlandı
Yüz Algılama Devam Ediyor
Metin Algılama Devam Ediyor

Shape Detection API'yi kullanma

Shape Detection API ile yerel olarak deneme yapmak istiyorsanız #enable-experimental-web-platform-features cihazını etkinleştir about://flags işaretidir.

Üç algılayıcının (FaceDetector, BarcodeDetector ve) arayüzleri TextDetector, benzer. Hepsi tek bir eşzamansız yöntem sağlar adlı detect() ImageBitmapSource bir girdi olarak (yani CanvasImageSource, Blob veya ImageData) tıklayın.

FaceDetector ve BarcodeDetector için isteğe bağlı parametreler aktarılabilir için ipuçları sağlamaya olanak tanıyan ve oluşturucunun algılamanızı sağlar.

Lütfen açıklama metni bahsedeceğiz.

BarcodeDetector ile çalışma

BarcodeDetector, ImageBitmapSource ve sınırlayıcı kutular ile ve algılanan barkodların biçimlerini görebilirsiniz.

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 algıladığı yüzlerin sınırlayıcı kutularını döndürür ImageBitmapSource. Platforma bağlı olarak daha fazla bilgi göz, burun veya ağız gibi yüzle ilgili önemli noktalar mevcut olabilir. Bu API'nin yalnızca yüzleri algıladığını unutmayın. Bu, 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ı döndürür. ve bazı platformlarda tanınan karakterlerle tutarlıdı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

Saptamayı algılayacak kurucuların olup olmadığını Şekil Algılama API yeterli değil. Bir arayüzün varlığı, temel platformun özelliği destekleyip desteklemediğini göstermez. Bu özellik amaçlandığı şekilde çalışmaktadır. Bu nedenle, özellik algılamayı kullanarak savunma amaçlı programlama yaklaşımını öneririz. aşağıdaki gibidir:

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üncellendi ve ona benzer arayüzler önerilmiştir. FaceDetector için ve TextDetector için.

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) tespit etmenize olanak tanır:

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

Bu, arayüzlerin gizlenmesinden daha iyidir çünkü platformlar arasında bile özellikler değişiklik gösterebilir. Bu nedenle geliştiricilerin, Android'de bu özelliğin (ör. belirli bir barkod biçimi veya yüz işareti) kullanmaları gerekir.

İş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 ileti dizisi. Bu nedenle, gerçek zamanlı algılamaya güvenmeyin ve kullanıcıların biraz daha zamana ihtiyacınız olacak.

Şu sitenin hayranıysanız: Web Çalışanları, algılayıcıların orada da bulunduğunu bilmek sizi memnun edecektir. Algılama sonuçları serileştirilebilir ve böylece çalışandan iletilebilir postMessage() üzerinden ana uygulamaya. Demo bu işlemleri uygulamalı olarak gösterir.

Bazı platform uygulamaları tüm özellikleri desteklemez. Bu nedenle, uygulamanızın ve daha sonra, destek durumunu dikkatlice gözden geçirin ve geliştirmeyi deneyin. Örneğin, bazı platformlar yüz algılama özelliğini destekleyebilir tek başına ancak yüz önemli nokta algılaması (gözler, burun, ağız vb.) hariç; veya varlığı ve metnin konumu tanınabilir ancak metin içerikleri algılanamaz.

Geri bildirim

Chrome ekibi ve Web standartları topluluğu, deneyiminizle ilgili daha fazla bilgi edinin.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir şey mi var? Alternatif olarak: aklınıza kim geliyor? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz mu var?

Uygulamayla ilgili bir sorun mu var?

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa ve spesifikasyondan farklı mı?

  • https://new.crbug.com adresinden hata bildiriminde bulunun. E-postanızda mutlaka oluşturmaya ilişkin basit talimatlar ve dosyanın ne zaman Bileşenler'i Blink>ImageCapture konumuna getirin. Aksak hızlı ve kolay yeniden oluşturmalar paylaşmak için harika bir seçenektir.

API'yi kullanmayı mı planlıyorsunuz?

Sitenizde Shape Detection API'yi kullanmayı mı planlıyorsunuz? Herkese açık desteğiniz özellikleri önceliklendirmemize yardımcı olur ve diğer tarayıcı tedarikçilerine onu desteklemek çok önemli.

Faydalı bağlantılar