Ş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?
- Shape Detection API GitHub deposunda bir spesifikasyon sorunu bildirin. veya düşüncelerinizi mevcut bir soruna ekleyebilirsiniz.
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.
- Bu özelliği nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın.
- Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin
#ShapeDetection
ve nerede ve nasıl kullandığınızı bize bildirin.
Faydalı bağlantılar
- Herkese açık açıklayıcı
- API Demosu | API demo kaynağı
- Hata izleme
- ChromeStatus.com girişi
- Blink Bileşeni:
Blink>ImageCapture