Features von übermorgen: die Shape Detection API

Bei der Web Incubator Community Group werden verschiedene Vorschläge für neue Web APIs diskutiert und ausgearbeitet. Eine davon ist die Shape Detection API, mithilfe derer sich über den Browser verschiedene Formen wie Gesichter oder Barcodes innerhalb von Bilddaten erkennen lassen.

In Pocket speichern vorlesen Druckansicht 1 Kommentar lesen
Lesezeit: 4 Min.
Von
  • Philip Ackermann
Inhaltsverzeichnis

Bei der Web Incubator Community Group werden verschiedene Vorschläge für neue Web APIs diskutiert und ausgearbeitet. Eine davon ist die Shape Detection API, mithilfe derer sich über den Browser verschiedene Formen wie Gesichter oder Barcodes innerhalb von Bilddaten erkennen lassen.

Die Shape Detection API sieht dazu verschiedene Interfaces vor und unterteilt sich derzeit grob in drei "Unter-APIs": die Face Detection API für die Erkennung von Gesichtern, die Barcode Detection API für die Erkennung von Barcodes und die Text Detection API für die Erkennung von Texten.

Analog dazu sind bisher folgende Interfaces in der API definiert:

  • FaceDetector: repräsentiert die Gesichtserkennung
  • DetectedFace: repräsentiert ein erkanntes Gesicht
  • BarcodeDetector: repräsentiert die Barcode-Erkennung
  • DetectedBarcode: repräsentiert einen erkannten Barcode
  • TextDetector: repräsentiert die Texterkennung
  • DetectedText: repräsentiert einen erkannten Text
Mehr Infos

Alle drei Detector-Interfaces (FaceDetector, BarcodeDetector und TextDetector) stellen eine Methode detect() zur Verfügung, der man als Eingabe die Bildquelle übergibt und über die man dann via Promises an die erkannten Gesichter, Barcodes und Texte gelangt. Als Bildquelle kann man dabei zum einen "normale" Bilder angeben, die per <img>-Element eingebunden wurden, aber auch <canvas>-Elemente und <video>-Elemente. Im Falle von Letzteren wird dann der aktuelle Frame des Videos als Eingabe für die Erkennung verwendet.

Ein Beispiel für die Gesichtserkennung zeigt folgendes Listing. Dem Konstruktor FaceDetector lässt sich über ein Konfigurationsobjekt unter anderem mitteilen, wie viele Gesichter in der Bildquelle maximal erkannt werden sollen. Das Ergebnis der Erkennung ist eine Sequenz erkannter Gesichter (sprich von DetectedFace-Instanzen), die im Wesentlichen durch die sie umgebende Bounding-Box beschrieben werden.

let faceDetector = new FaceDetector(
{
maxDetectedFaces: 1
}
);

faceDetector
.detect(image)
.then(detectedFaces => {
for (const face of detectedFaces) {
// Die das Gesicht umgebende Bounding-Box:
console.log(face.boundingBox.x);
console.log(face.boundingBox.y);
console.log(face.boundingBox.width);
console.log(face.boundingBox.height);
}
})
.catch(() => {
console.error('Gesichtserkennung fehlgeschlagen');
});

Die Erkennung von Barcodes funktioniert ähnlich wie die von Gesichtern. Statt einer Instanz von FaceDetector benötigt man logischerweise aber eine Instanz von BarcodeDetector:

let barcodeDetector = new BarcodeDetector();

barcodeDetector
.detect(image)
.then(detectedBarcodes => {
for (const barcode of detectedBarcodes) {
// Der dekodierte Barcode:
console.log(barcode.rawValue);
// Die den Barcode umgebende Bounding-Box:
console.log(barcode.boundingBox.x);
console.log(barcode.boundingBox.y);
console.log(barcode.boundingBox.width);
console.log(barcode.boundingBox.height);
}
})
.catch(() => {
console.error('Barcode-Erkennung fehlgeschlagen');
});

Neben der Bounding-Box, die einen erkannten Barcode umgibt, enthalten DetectedBarcode-Objekte zusätzlich die Eigenschaft rawValue, die den Barcode als dekodierte Zeichenkette enthält, sowie die Eigenschaft cornerPoints, über die man an eine Sequenz von Punkten gelangt, die den Umriss des Barcodes kennzeichnen.

Auch die Texterkennung funktioniert vom Ablauf her analog wie für die vorigen Beispiele: Erstellen der Detector-Instanz (in diesem Fall TextDetector), Aufruf der Methode detect() und Verarbeiten der erkannten Objekte (vom Typ DetectedText) innerhalb der Callback-Funktion:

let textDetector = new TextDetector();

textDetector.detect(image)
.then(detectedTextBlocks => {
for (const textBlock of detectedTextBlocks) {
// Der erkannte Text:
console.log(textBlock.rawValue);
// Die den Text umgebende Bounding-Box:
console.log(textBlock.boundingBox.x);
console.log(textBlock.boundingBox.y);
console.log(textBlock.boundingBox.width);
console.log(textBlock.boundingBox.height);
}
})
.catch(() => {
console.error('Texterkennung fehlgeschlagen');
});

Die Shape Detection API hat das Ziel, die Erkennung verschiedener Formen über den Browser zu ermöglichen. Derzeit sieht die API die Erkennung von Gesichtern, Barcodes und Texten vor, denkbar wären aber auch weitere Arten der Erkennung. Wann und ob die API allerdings von Browsern unterstützt wird, ist noch nicht sicher beziehungsweise noch nicht absehbar: Der Diskussion folgen lässt sich hier. ()