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

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?

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.

Nützliche Links