Die Shape Detection API erkennt Gesichter, Barcodes und Text in Bildern.
Was ist die Shape Detection API?
Mit APIs wie navigator.mediaDevices.getUserMedia
und Chrome für Android
Bildauswahl,
ist es recht einfach geworden, Bilder oder Live-Videodaten mit dem Gerät zu erfassen.
oder lokale Bilder hochladen. Bisher haben diese dynamischen Bilddaten – sowie
statische Bilder auf einer Seite zu finden.
kann es viele interessante Merkmale geben, wie z. B. Gesichter,
Barcodes und Text.
Wenn Entwickler in der Vergangenheit solche Funktionen auf dem
QR-Code-Reader entwickelt.
auf externe JavaScript-Bibliotheken zurückgreifen. Das kann teuer werden,
Leistungsperspektive zu optimieren und die
Gesamtgröße der Seite zu erhöhen. Auf der anderen
und Betriebssysteme wie Android, iOS und macOS,
aber auch Hardware.
Chips, die in Kameramodulen zu finden sind, haben meist bereits leistungsstarke
optimierte Funktionsdetektoren wie die Android-
FaceDetector
oder den generischen iOS-Funktionsdetektor,
CIDetector
Die Shape Detection API stellt diese Implementierungen über
eine Reihe von JavaScript-Schnittstellen. Derzeit werden folgende Funktionen unterstützt:
über die FaceDetector
-Schnittstelle, Barcode-Erkennung über die
BarcodeDetector
-Oberfläche und Texterkennung (optisches Zeichen)
Erkennung (OCR) über die TextDetector
-Schnittstelle.
Empfohlene Anwendungsfälle
Wie oben beschrieben, unterstützt die Shape Detection API derzeit die Erkennung Gesichter, Barcodes und Text. Die folgende Aufzählungsliste enthält Beispiele für alle drei Funktionen.
Gesichtserkennung
- In sozialen Netzwerken und Foto-Sharing-Websites werden ihre Nutzer Personen auf Bildern mit Anmerkungen versehen. Durch Hervorheben der Grenzen erkannter Gesichter diese Aufgabe erleichtert werden kann.
- Content-Websites können Bilder dynamisch auf der Grundlage potenziell erkannter Gesichter zu erkennen, anstatt sich auf andere Heuristiken zu verlassen, oder erkannte Gesichter hervorzuheben. mit Ken Burns-ähnlicher Schwenk- und Zoomeffekte in Story-ähnlichen Formaten verwenden.
- Multimedia-Messaging-Websites können ihren Nutzern ermöglichen, lustige Objekte wie Sonnenbrille oder Schnurrbärte bei erkannten Gesichts-Landmarks.
Barcodeerkennung
- Webanwendungen, die QR-Codes lesen, können interessante Anwendungsfälle wie Online-Bezahlung oder Web-Navigation oder verwenden Barcodes zur Einrichtung sozialer Verbindungen in Messenger-Anwendungen.
- Shopping-Apps können ihren Nutzern das Scannen ermöglichen EAN oder UPC-Barcodes von Artikel in einem Geschäft, um die Preise online zu vergleichen.
- Flughäfen können Webkioske anbieten, damit Passagiere ihr Boarding scannen können Karten/Tickets Anzuzeigende Azteken-Codes personalisierte Informationen zu ihren Flügen.
Texterkennung
- Soziale Netzwerke im Internet können die Zugänglichkeit
von Nutzern erstellte Bildinhalte durch Hinzufügen erkannter Texte als
alt
-Attribute für<img>
-Tags, wenn keine anderen Beschreibungen vorhanden sind. - Content-Websites können mithilfe der Texterkennung verhindern, dass Überschriften über Hero-Images mit enthaltenem Text.
- Webanwendungen können Texterkennung verwenden, um Texte wie z. B. Speisekarten.
Aktueller Status
Schritt | Status |
---|---|
1. Erklärende Mitteilung erstellen | Abschließen |
2. Ersten Entwurf der Spezifikation erstellen | Abschließen |
3. Feedback einholen und Design iterieren | In Bearbeitung |
4. Ursprungstest | Abschließen |
5. Einführung | Barcodeerkennung Abgeschlossen |
Gesichtserkennung in Bearbeitung | |
Texterkennung in Bearbeitung |
So verwenden Sie die Shape Detection API
Wenn Sie die Shape Detection API lokal testen möchten,
#enable-experimental-web-platform-features
aktivieren
in about://flags
melden.
Die Schnittstellen aller drei Detektoren: FaceDetector
, BarcodeDetector
und
TextDetector
, sind ähnlich. Sie alle bieten eine einzige asynchrone Methode,
namens detect()
, bei dem ein
ImageBitmapSource
als Eingabe (entweder ein
CanvasImageSource
,
Blob
oder
ImageData
).
Für FaceDetector
und BarcodeDetector
können optionale Parameter übergeben werden.
an den Konstruktor des Detektors gesendet,
zugrunde liegende Detektoren.
Bitte überprüfen Sie die Supportmatrix in der Erklärung für ein einen Überblick über die verschiedenen Plattformen.
Mit BarcodeDetector
arbeiten
BarcodeDetector
gibt die Rohwerte des Barcodes zurück, die im
ImageBitmapSource
und die Begrenzungsrahmen sowie andere Informationen wie
die Formate der erkannten Barcodes.
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);
}
Mit FaceDetector
arbeiten
FaceDetector
gibt immer die Begrenzungsrahmen der Gesichter zurück, die erkannt wurden.
ImageBitmapSource
. Je nach Plattform werden weitere Informationen
in Bezug auf Gesichtsmerkmale wie Augen, Nase oder Mund können verfügbar sein.
Beachten Sie, dass diese API nur Gesichter erkennt.
Es wird nicht festgestellt, zu wem ein Gesicht gehört.
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);
}
Mit TextDetector
arbeiten
TextDetector
gibt immer die Begrenzungsrahmen der erkannten Texte zurück.
und auf einigen Plattformen auch die
erkannten Zeichen.
const textDetector = new TextDetector();
try {
const texts = await textDetector.detect(image);
texts.forEach(text => textToSpeech(text));
} catch (e) {
console.error('Text detection failed:', e);
}
Funktionserkennung
Reine Prüfung auf das Vorhandensein der Konstruktoren, um die Funktion zu erkennen Die Shape Detection API reicht nicht aus. Das Vorhandensein einer Schnittstelle sagt nichts darüber aus, ob die zugrunde liegende Plattform die Funktion unterstützt. Das funktioniert wie beabsichtigt. Aus diesem Grund empfehlen wir eine defensive Programmierung durch Featureerkennung. wie hier:
const supported = await (async () => 'FaceDetector' in window &&
await new FaceDetector().detect(document.createElement('canvas'))
.then(_ => true)
.catch(e => e.name === 'NotSupportedError' ? false : true))();
Die BarcodeDetector
-Oberfläche wurde aktualisiert und enthält jetzt die getSupportedFormats()
-Methode
und ähnliche Schnittstellen
für FaceDetector
und
für 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"
]
*/
So können Sie bestimmte Funktionen erkennen, die Sie benötigen, z. B. das Scannen eines QR-Codes:
if (('BarcodeDetector' in window) &&
((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
console.log('QR code scanning is supported.');
}
Das ist besser, als die Schnittstellen zu verstecken, da die Funktionen auch plattformübergreifend variieren können. Daher sollten Entwickler ermutigt werden, genau zu prüfen, z. B. ein bestimmtes Barcodeformat oder eine Gesichtsmarkierung.
Betriebssystemunterstützung
Die Barcodeerkennung ist für macOS, ChromeOS und Android verfügbar. Google Play-Dienste sind unter Android erforderlich.
Best Practices
Alle Detektoren funktionieren asynchron, sie blockieren also nicht den Haupt- Diskussions-Thread. Verlassen Sie sich also nicht auf die Echtzeiterkennung, sondern lassen Sie bis der Detektor wieder richtig funktioniert.
Wenn Sie ein Fan von
Web Worker
finden Sie auch dort Detektoren.
Erkennungsergebnisse sind serialisierbar und können daher vom Worker übergeben werden.
zur Haupt-App über postMessage()
. In der Demo ist das in Aktion zu sehen.
Nicht alle Plattformimplementierungen unterstützen alle Funktionen, daher sollten Sie prüfen, die Supportsituation sorgfältig zu prüfen, und verwenden Sie die API als progressives zu optimieren. Beispielsweise unterstützen einige Plattformen möglicherweise die Gesichtserkennung. per se, jedoch nicht zur Erkennung von Gesichtsmerkmalen (Augen, Nase, Mund usw.), oder die Existenz und Position des Textes werden möglicherweise erkannt, jedoch nicht der Textinhalt.
Feedback
Das Chrome-Team und die Webstandards-Community möchten mehr über Ihre mit der Shape Detection API.
Informationen zum API-Design
Funktioniert die API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie Idee? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?
- Reichen Sie ein Spezifikationsproblem im GitHub-Repository für die Shape Detection API ein. oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.
Probleme bei der Implementierung?
Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder ist die Implementierung von der Spezifikation abweichen?
- Melden Sie den Fehler unter https://new.crbug.com. Achten Sie darauf,
wie möglich, einfache Anweisungen für die Reproduktion
Components in
Blink>ImageCapture
ändern Störung eignet sich gut, um schnelle und einfache Reproduktionen zu teilen.
Möchten Sie die API verwenden?
Möchten Sie die Shape Detection API auf Ihrer Website verwenden? Deine öffentliche Unterstützung hilft uns dabei, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, ist es wichtig, sie zu unterstützen.
- Im WICG Discourse-Thread können Sie uns mitteilen, wie Sie den Dienst verwenden möchten.
- Sende einen Tweet mit dem Hashtag an @ChromiumDev
#ShapeDetection
und teilen Sie uns mit, wo und wie Sie sie nutzen.
Nützliche Links
- Öffentliche Erläuterung
- API-Demo | API-Demo-Quelle
- Tracking-Fehler
- ChromeStatus.com-Eintrag
- Blink-Komponente:
Blink>ImageCapture