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

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

Thomas Steiner

Was ist die Shape Detection API?

Mit APIs wie navigator.mediaDevices.getUserMedia und der Fotoauswahl von Chrome für Android ist es ziemlich einfach geworden, Bilder oder Live-Videodaten von Gerätekameras aufzunehmen oder lokale Bilder hochzuladen. Bisher war der Zugriff auf diese dynamischen Bilddaten – ebenso wie auf statische Bilder auf einer Seite – nicht per Code möglich, obwohl Bilder viele interessante Merkmale wie Gesichter, Barcodes und Text enthalten können.

Wenn Entwickler in der Vergangenheit beispielsweise solche Funktionen auf dem Client extrahieren wollten, um einen QR-Code-Reader zu erstellen, mussten sie auf externe JavaScript-Bibliotheken zurückgreifen. Das kann sich aus Leistungsgründen negativ auswirken und das Gesamtgewicht der Seite erhöhen. Betriebssysteme wie Android, iOS und macOS, aber auch Hardwarechips in Kameramodulen, verfügen in der Regel bereits über leistungsstarke und hochoptimierte Merkmalsdetektoren wie den Android-Merkmalsdetektor FaceDetector oder den generischen Merkmalsdetektor von iOS CIDetector.

Die Shape Detection API stellt diese Implementierungen über eine Reihe von JavaScript-Schnittstellen bereit. Derzeit werden die Gesichtserkennung über die FaceDetector-Benutzeroberfläche, die Barcodeerkennung über die BarcodeDetector-Benutzeroberfläche und die Texterkennung (Optische Zeichenerkennung, OCR) über die TextDetector-Benutzeroberflä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ählung enthält Beispiele für Anwendungsfälle für alle drei Funktionen.

Gesichtserkennung

  • In Online-Sozialen Netzwerken oder auf Foto-Teilen-Websites können Nutzer häufig Personen in Bildern annotieren. Durch das Markieren der Grenzen der erkannten Gesichter kann diese Aufgabe erleichtert werden.
  • Anbieter von Content-Websites können Bilder dynamisch anhand potenziell erkannter Gesichter zuschneiden, anstatt sich auf andere Heuristiken zu verlassen. Außerdem können sie erkannte Gesichter in storyähnlichen Formaten mit Ken-Burns-Effekten wie Schwenken und Zoomen hervorheben.
  • Auf Multimedia-Messaging-Websites können Nutzer lustige Objekte wie Sonnenbrillen oder Schnurrbärte auf erkannte Gesichtsmerkmale legen.

Barcodeerkennung

  • Webanwendungen, die QR-Codes lesen, können interessante Anwendungsfälle wie Onlinezahlungen oder Webnavigation ermöglichen oder Barcodes zum Aufbau sozialer Verbindungen in Messenger-Anwendungen verwenden.
  • Shopping-Apps können Nutzern die Möglichkeit bieten, EAN- oder UPC-Barcodes von Artikeln in einem Geschäft zu scannen, um Preise online zu vergleichen.
  • Flughäfen können Webkioske bereitstellen, an denen Passagiere die Aztec-Codes ihrer Bordkarten scannen können, um personalisierte Informationen zu ihren Flügen aufzurufen.

Texterkennung

  • Online-Plattformen für soziale Netzwerke können die Barrierefreiheit von von Nutzern erstellten Bildinhalten verbessern, indem sie erkannten Text als alt-Attribute für <img>-Tags hinzufügen, wenn keine anderen Beschreibungen angegeben werden.
  • Mit der Texterkennung können Content-Websites verhindern, dass Überschriften auf Hero-Bildern mit Text platziert werden.
  • Webanwendungen können die Texterkennung verwenden, um Texte wie Speisekarten zu übersetzen.

Aktueller Status

Schritt Status
1. Erläuternde 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. Starten Barcodeerkennung Abgeschlossen
Gesichtserkennung In Bearbeitung
Texterkennung In Arbeit

Shape Detection API verwenden

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

Die Benutzeroberflächen aller drei Sensoren, FaceDetector, BarcodeDetector und TextDetector, sind ähnlich. Sie bieten alle eine einzelne asynchrone Methode namens detect(), die eine ImageBitmapSource als Eingabe annimmt (d. h. entweder eine CanvasImageSource, eine Blob oder eine ImageData).

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

In der Supportmatrix im Erläuterungsvideo finden Sie eine Übersicht über die verschiedenen Plattformen.

Mit dem BarcodeDetector arbeiten

Die BarcodeDetector gibt die Barcode-Rohwerte zurück, die in den ImageBitmapSource und den Begrenzungsrahmen gefunden werden, 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 dem FaceDetector arbeiten

FaceDetector gibt immer die Begrenzungsrahmen der Gesichter zurück, die in ImageBitmapSource erkannt werden. Je nach Plattform sind möglicherweise weitere Informationen zu Gesichtsmerkmalen wie Augen, Nase oder Mund verfügbar. Diese API erkennt nur Gesichter. Es wird nicht ermittelt, 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 nach der Existenz der Konstruktoren zu suchen, um die Shape Detection API zu erkennen. Die Existenz einer Benutzeroberfläche gibt nicht an, ob die zugrunde liegende Plattform die Funktion unterstützt. Das ist normal. Daher empfehlen wir eine defensive Programmierung, bei der Sie die Funktion so erkennen:

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-Schnittstelle wurde um eine getSupportedFormats()-Methode erweitert. Ähnliche Schnittstellen wurden 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 gewünschte Funktion finden, z. B. das Scannen von QR-Codes:

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

Das ist besser als die Oberflächen auszublenden, da die Funktionen selbst zwischen Plattformen variieren können. Entwickler sollten daher genau die Funktion prüfen, die sie benötigen (z. B. ein bestimmtes Barcodeformat oder Gesichtsmerkmal).

Betriebssystemunterstützung

Die Barcodeerkennung ist unter macOS, ChromeOS und Android verfügbar. Google Play-Dienste sind auf Android-Geräten erforderlich.

Best Practices

Alle Sensoren arbeiten asynchron, d. h., sie blockieren nicht den Haupt-Thread. Verlassen Sie sich also nicht auf die Echtzeiterkennung, sondern geben Sie dem Detektor etwas Zeit, seine Arbeit zu erledigen.

Wenn Sie Webworker mögen, werden Sie sich freuen, dass auch dort Detectors verfügbar sind. Die Erkennungsergebnisse sind serialisierbar und können daher über postMessage() vom Worker an die Haupt-App übergeben werden. In der Demo wird dies veranschaulicht.

Nicht alle Plattformimplementierungen unterstützen alle Funktionen. Prüfen Sie daher die Supportsituation sorgfältig und verwenden Sie die API als progressive Verbesserung. So unterstützen einige Plattformen beispielsweise die Gesichtserkennung an sich, aber nicht die Erkennung von Gesichtsmerkmalen (Augen, Nase, Mund usw.). Oder es wird zwar erkannt, ob Text vorhanden ist und wo er sich befindet, aber nicht der Textinhalt.

Feedback

Das Chrome-Team und die Webstandards-Community möchten gerne wissen, wie Sie die Shape Detection API bisher erlebt haben.

Informationen zum API-Design

Funktioniert die API nicht wie erwartet? Fehlen Methoden oder Properties, die Sie für die Umsetzung Ihrer Idee benötigen? Haben Sie Fragen oder Kommentare zum Sicherheitsmodell?

Problem bei der Implementierung?

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

  • Melden Sie den Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich an, machen Sie eine einfache Anleitung zur Reproduktion und setzen Sie Components auf Blink>ImageCapture. Glitcheignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.

Sie möchten die API verwenden?

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

Nützliche Links