Shape Detection API: Ein Bild sagt mehr als tausend Worte: Gesichter und Barcodes

Die Shape Detection API erkennt Gesichter, Barcodes und Text in Bildern.

Steiner

Was ist die Shape Detection API?

Mit APIs wie navigator.mediaDevices.getUserMedia und der Bildauswahl von Chrome für Android ist es recht einfach, Bilder oder Live-Videodaten von Gerätekameras aufzunehmen oder lokale Bilder hochzuladen. Bisher waren diese dynamischen Bilddaten – ebenso wie statische Bilder auf einer Seite – über Code nicht zugänglich, obwohl die Bilder tatsächlich viele interessante Merkmale wie Gesichter, Barcodes und Text enthalten.

Wenn Entwickler beispielsweise in der Vergangenheit solche Funktionen auf dem Client extrahieren wollten, um einen QR-Code-Reader zu erstellen, mussten sie externe JavaScript-Bibliotheken verwenden. Dies könnte unter Leistungsgesichtspunkten teuer werden und die Gesamtgewichtung der Seite erhöhen. Auf der anderen Seite haben Betriebssysteme, einschließlich Android, iOS und macOS, aber auch Hardwarechips in Kameramodulen, in der Regel bereits leistungsstarke und hochoptimierte Funktionsdetektoren wie Android FaceDetector oder den generischen Funktionsdetektor für iOS CIDetector.

Die Shape Detection API stellt diese Implementierungen über eine Reihe von JavaScript-Schnittstellen zur Verfügung. Derzeit werden die Gesichtserkennung über die FaceDetector-Oberfläche, die Barcodeerkennung über die BarcodeDetector-Oberfläche und die Texterkennung (optische Zeichenerkennung, OCR) über die TextDetector-Oberfläche unterstützt.

Empfohlene Anwendungsfälle

Wie oben beschrieben, unterstützt die Shape Detection API derzeit die Erkennung von Gesichtern, Barcodes und Text. Die folgende Aufzählungsliste enthält Beispiele für Anwendungsfälle für alle drei Funktionen.

Gesichtserkennung

  • Soziale Netzwerke oder Foto-Sharing-Websites ermöglichen ihren Nutzern häufig, Personen auf Bildern mit Anmerkungen zu versehen. Diese Aufgabe kann dadurch erleichtert werden, dass die Grenzen der erkannten Gesichter hervorgehoben werden.
  • Inhaltswebsites können Bilder anhand potenziell erkannter Gesichter dynamisch zuschneiden, anstatt sich auf andere Heuristiken zu verlassen, oder erkannte Gesichter mit Ken Burns-ähnlichen Schwenk- und Zoomeffekten in geschichtenähnlichen Formaten hervorheben.
  • Auf Websites für Multimedia-Nachrichten können Nutzer lustige Objekte wie Sonnenbrille oder Schnurrbart über erkannte Gesichtsmerkmale einblenden.

Barcodeerkennung

  • Webanwendungen, die QR-Codes lesen, können interessante Anwendungsfälle wie Onlinezahlungen oder die Webnavigation entsperren oder Barcodes verwenden, um in Messenger-Anwendungen soziale Verbindungen herzustellen.
  • In Shopping-Apps können Nutzer EAN- oder UPC-Barcodes von Artikeln in einem Geschäft scannen, um Preise online zu vergleichen.
  • Flughäfen können Webkioske bereitstellen, an denen Fahrgäste die Aztec-Codes ihrer Bordkarten scannen können, um personalisierte Informationen zu ihren Flügen anzuzeigen.

Texterkennung

  • Online-Websites sozialer Netzwerke können die Zugänglichkeit von nutzergenerierten Bildinhalten verbessern, indem erkannte Texte als alt-Attribute für <img>-Tags hinzugefügt werden, wenn keine anderen Beschreibungen angegeben sind.
  • Inhaltswebsites können die Texterkennung verwenden, um zu vermeiden, dass Überschriften auf Hero-Images mit enthaltenem Text platziert werden.
  • Webanwendungen können die Texterkennung verwenden, um Texte zu übersetzen, z. B. Speisekarten von Restaurants.

Aktueller Status

Step Status
1. Erklärende Erklärung erstellen Abschließen
2. Ersten Entwurf der Spezifikation erstellen Abschließen
3. Feedback einholen und Design iterieren In Bearbeitung
4. Ursprungstest Abschließen
5. Starten Barcodeerkennung Abgeschlossen
Gesichtserkennung wird ausgeführt
Texterkennung wird ausgeführt

Shape Detection API verwenden

Wenn Sie die Shape Detection API lokal testen möchten, aktivieren Sie in about://flags das Flag #enable-experimental-web-platform-features.

Die Schnittstellen aller drei Detektoren FaceDetector, BarcodeDetector und TextDetector sind ähnlich. Alle bieten eine einzelne asynchrone Methode namens detect(), die ein ImageBitmapSource als Eingabe annimmt (d. h. entweder CanvasImageSource, Blob oder ImageData).

Für FaceDetector und BarcodeDetector können optionale Parameter an den Konstruktor des Detektors übergeben werden, mit denen Hinweise für die zugrunde liegenden Detektoren bereitgestellt werden können.

Sehen Sie sich in der Erklärung die Supportmatrix an, um einen Überblick über die verschiedenen Plattformen zu erhalten.

Mit dem BarcodeDetector arbeiten

Der BarcodeDetector gibt die in ImageBitmapSource und den Begrenzungsrahmen gefundenen Barcode-Rohwerte sowie andere Informationen wie die Formate der erkannten Barcodes zurück.

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 dem FaceDetector arbeiten

Der FaceDetector gibt immer die Begrenzungsrahmen der Gesichter zurück, die im ImageBitmapSource erkannt werden. Je nach Plattform können auch weitere Informationen zu Gesichtspunkten wie Augen, Nase oder Mund verfügbar sein. Beachten Sie, dass diese API nur Gesichter erkennt. Sie kann nicht ermitteln, 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 dem TextDetector arbeiten

TextDetector gibt immer die Begrenzungsrahmen der erkannten Texte und auf einigen Plattformen die erkannten Zeichen zurück.

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

Es reicht nicht aus, nur zu prüfen, ob Konstruktoren vorhanden sind, um die Shape Detection API zu erkennen. Das Vorhandensein einer Benutzeroberfläche sagt nichts darüber aus, ob die zugrunde liegende Plattform die Funktion unterstützt. Das funktioniert wie beabsichtigt. Wir empfehlen daher einen defensiven Programmieransatz mit einer Featureerkennung wie der folgenden:

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

Die Schnittstelle BarcodeDetector wurde aktualisiert und enthält nun eine getSupportedFormats()-Methode. Es wurden ähnliche Schnittstellen für FaceDetector und für TextDetector vorgeschlagen.

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 die jeweils benötigte Funktion erkennen, z. B. das Scannen des QR-Codes:

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

Dies ist besser, als die Schnittstellen zu verstecken, da die Funktionen selbst auf verschiedenen Plattformen variieren können. Daher sollten Entwickler ermutigt werden, genau die Funktionen zu prüfen (z. B. ein bestimmtes Barcodeformat oder Gesichtsmerkmale), die sie benötigen.

Betriebssystemunterstützung

Die Barcodeerkennung ist unter macOS, ChromeOS und Android verfügbar. Unter Android sind Google Play-Dienste erforderlich.

Best Practices

Alle Detektoren arbeiten asynchron, d. h. sie blockieren nicht den Hauptthread. Verlassen Sie sich also nicht auf die Echtzeiterkennung, sondern lassen Sie dem Detektor etwas Zeit für seine Arbeit.

Wenn Sie ein Fan von Web Workers sind, wird es Sie freuen, dass auch dort Detektoren verfügbar sind. Die Erkennungsergebnisse sind seriell und können somit vom Worker über postMessage() an die Hauptanwendung übergeben werden. Die Demo zeigt dies in Aktion.

Nicht alle Plattformimplementierungen unterstützen alle Funktionen. Prüfen Sie daher die Supportsituation sorgfältig und verwenden Sie die API schrittweise. Einige Plattformen unterstützen beispielsweise die Gesichtserkennung an sich, aber nicht die Erkennung von Sehenswürdigkeiten (Augen, Nase, Mund usw.). Oder die Existenz und die Position von Text werden möglicherweise erkannt, aber nicht von Textinhalten.

Feedback

Das Chrome-Team und die Webstandards-Community möchten gern mehr über Ihre Erfahrungen mit der Shape Detection API erfahren.

Informationen zum API-Design

Gibt es etwas an der API, das nicht so funktioniert, wie Sie es erwartet hatten? Oder fehlen Methoden oder Eigenschaften, die Sie zum Implementieren Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?

Probleme bei der Implementierung?

Haben Sie einen Fehler bei der Implementierung in Chrome gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation?

  • Melden Sie einen Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Setzen Sie Components (Komponenten) auf Blink>ImageCapture. Glitch eignet sich hervorragend zum Teilen von schnellen und einfachen Reproduktionen.

Möchten Sie die API verwenden?

Möchten Sie die Shape Detection API auf Ihrer Website verwenden? Ihre öffentliche Unterstützung hilft uns bei der Priorisierung von Funktionen und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Nützliche Links