Die Barcode Detection API erkennt lineare und zweidimensionale Barcodes in Bildern.

Konzepte und Verwendung

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 Methodedetect(), die ein Bildobjekt nimmt; es kann eines dieser Objekte sein:einHTMLImageElement,einSVGImageElement,einHTMLVideoElement,einHTMLCanvasElement,einImageBitmap,einOffscreenCanvas,einVideoFrame,einBlob,oder einImageData.Optionale Parameter können an den Konstruktor vonBarcodeDetector übergeben werden, um Hinweise zu geben, welche Barcode-Formate erkannt werden sollen.

Unterstützte Barcode-Formate

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 desASCII 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 MethodegetSupportedFormats() überprüfen.

Schnittstellen

BarcodeDetectorExperimentell

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

Beispiele

Erstellen eines Detektors

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

// check compatibilityif (!("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"],  });}

Abrufen unterstützter Formate

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

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

Erkennen von Barcodes

Dieses Beispiel verwendet die Methodedetect(), 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);  });

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 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