Barcode Detection API

Die Unterstützung für die Barcode-Erkennung in Webanwendungen eröffnet eine Vielzahl von Anwendungsfällen durch unterstützte Barcode-Formate. QR-Codes können für Online-Zahlungen, die Navigation im Web oder die Herstellung von Verbindungen in sozialen Medien verwendet werden, Aztec-Codes können zum Scannen von Bordkarten eingesetzt werden, und Einkaufs-Apps können EAN- oder UPC-Barcodes verwenden, um Preise physischer Artikel zu vergleichen.

Die Erkennung erfolgt über die Methode detect(), die ein Bildobjekt nimmt; es kann eines dieser Objekte sein: ein HTMLImageElement, ein SVGImageElement, ein HTMLVideoElement, ein HTMLCanvasElement, ein ImageBitmap, ein OffscreenCanvas, ein VideoFrame, ein Blob, oder ein ImageData. Optionale Parameter können an den Konstruktor von BarcodeDetector übergeben werden, um Hinweise zu geben, welche Barcode-Formate erkannt werden sollen.

Die Barcode Detection API unterstützt die folgenden Barcode-Formate:

Format	Beschreibung	Bild
aztec	Eine quadratische, zweidimensionale Matrix nach iso24778 mit einem quadratischen Bullaugenmuster in der Mitte, das an eine aztekische Pyramide erinnert. Es ist keine umgebende Leerzone erforderlich.
code_128	Ein linearer (eindimensionaler), bidirektional dekodierbarer, selbstprüfender Barcode gemäß iso15417, der alle 128 Zeichen des ASCII kodieren kann (daher der Name).
code_39	Ein linearer (eindimensionaler), selbstprüfender Barcode gemäß iso16388. Er ist ein diskreter und variabler Barcode-Typ.
code_93	Eine lineare, kontinuierliche Symbolik mit variabler Länge gemäß bc5. Sie bietet eine höhere Informationsdichte als Code 128 und der optisch ähnliche Code 39. Code 93 wird hauptsächlich von Canada Post zur Kodierung zusätzlicher Lieferinformationen verwendet.
codabar	Ein linearer Barcode, der Zeichen 0-9, A-D und Symbole - . $ / + darstellt.
data_matrix	Ein richtungsunabhängiger, zweidimensionaler Barcode, bestehend aus schwarz-weißen Modulen, die entweder in einem quadratischen oder rechteckigen Muster gemäß iso16022 angeordnet sind.
ean_13	Ein linearer Barcode basierend auf dem UPC-A-Standard und definiert in iso15420.
ean_8	Ein linearer Barcode definiert in iso15420 und abgeleitet von EAN-13.
itf	Ein kontinuierlicher, selbstprüfender, bidirektional dekodierbarer Barcode. Er kodiert immer 14 Ziffern.
pdf417	Eine kontinuierliche, zweidimensionale Barcode-Symbologie mit mehreren Zeilen und Spalten. Er ist bidirektional dekodierbar und verwendet den iso15438-Standard.
qr_code	Ein zweidimensionaler Barcode, der den iso18004-Standard verwendet. Die kodierte Information kann Text, URL oder andere Daten sein.
upc_a	Einer der am häufigsten verwendeten linearen Barcode-Typen und weit verbreitet im Einzelhandel in den Vereinigten Staaten. Definiert in iso15420, stellt er Ziffern durch Streifen von Balken und Lücken dar, wobei jede Ziffer mit einem eindeutigen Muster von 2 Balken und 2 Lücken, beide variabler Breite, verbunden ist. UPC-A kann 12 Ziffern kodieren, die jedem Handelsartikel eindeutig zugeordnet sind, und ist technisch gesehen ein Teil der EAN-13 (UPC-A-Codes sind in EAN-13 mit dem ersten Zeichensatz auf 0 dargestellt).
upc_e	Eine Variation von UPC-A, definiert in iso15420, die unnötige Nullen für einen kompakteren Barcode auslässt.
unknown	Dieser Wert wird von der Plattform verwendet, um anzuzeigen, dass sie nicht weiß oder angibt, welches Barcode-Format erkannt oder unterstützt wird.

Sie können die von der Benutzeroberfläche unterstützten Formate über die Methode getSupportedFormats() überprüfen.

BarcodeDetector Experimentell

Die BarcodeDetector-Schnittstelle der Barcode Detection API ermöglicht die Erkennung von linearen und zweidimensionalen Barcodes in Bildern.

Dieses Beispiel testet die Browser-Kompatibilität und erstellt ein neues Barcode-Detektor-Objekt mit angegebenen unterstützten Formaten.

// check compatibility
if (!("BarcodeDetector" in globalThis)) {
  console.log("Barcode Detector is not supported by this browser.");
} else {
  console.log("Barcode Detector supported!");

  // create new detector
  const barcodeDetector = new BarcodeDetector({
    formats: ["code_39", "codabar", "ean_13"],
  });
}

Das folgende Beispiel ruft die Methode getSupportedFormats() auf und protokolliert die Ergebnisse in der Konsole.

// check supported types
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});

Dieses Beispiel verwendet die Methode detect(), um die Barcodes im angegebenen Bild zu erkennen. Diese werden durchlaufen und die Barcode-Daten werden in der Konsole protokolliert.

barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawValue));
  })
  .catch((err) => {
    console.log(err);
  });

• barcodefaq.com: Eine Website mit Informationen über verschiedene Barcodes und Beispielen der verschiedenen Typen.
• The Shape Detection API: a picture is worth a thousand words, faces, and barcodes