Barcode Detection API

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

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 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.

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. Ein Beispielbild eines Aztec-Barcodes. Ein Quadrat mit kleineren schwarz-weißen Quadraten darin
code_128 Ein linearer (eindimensionaler), bidirektional dekodierbarer, selbstprüfender Barcode gemäß iso15417, der alle 128 Zeichen des ASCII kodieren kann (daher der Name). Ein Bild eines Code-128 Barcodes. Eine horizontale Verteilung von vertikalen schwarzen und weißen Linien
code_39 Ein linearer (eindimensionaler), selbstprüfender Barcode gemäß iso16388. Er ist ein diskreter und variabler Barcode-Typ. Ein Bild eines Code-39 Barcodes. Eine horizontale Verteilung von vertikalen schwarzen und weißen Linien
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. Ein Bild eines Code 93 Barcodes. Eine horizontale Verteilung von schwarzen und weißen horizontalen Linien
codabar Ein linearer Barcode, der Zeichen 0-9, A-D und Symbole - . $ / + darstellt. Ein Bild eines Codabar-Formates Barcodes. Eine horizontale Verteilung von schwarzen und weißen vertikalen Linien
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. Ein Beispiel eines Data Matrix Barcodes. Ein Quadrat, gefüllt mit kleineren schwarz-weißen Quadraten
ean_13 Ein linearer Barcode basierend auf dem UPC-A-Standard und definiert in iso15420. Ein Bild eines EAN-13 Barcodes. Eine horizontale Verteilung von weißen und schwarzen Linien
ean_8 Ein linearer Barcode definiert in iso15420 und abgeleitet von EAN-13. Ein Bild eines EAN-8 Barcodes. Eine horizontale Verteilung von vertikalen schwarzen und weißen Linien
itf Ein kontinuierlicher, selbstprüfender, bidirektional dekodierbarer Barcode. Er kodiert immer 14 Ziffern. Ein Bild eines ITF Barcodes. Eine horizontale Verteilung von weißen und schwarzen Linien
pdf417 Eine kontinuierliche, zweidimensionale Barcode-Symbologie mit mehreren Zeilen und Spalten. Er ist bidirektional dekodierbar und verwendet den iso15438-Standard. Ein Beispiel eines pdf417 Barcodes. Ein Rechteck aus kleineren schwarz-weißen Quadraten
qr_code Ein zweidimensionaler Barcode, der den iso18004-Standard verwendet. Die kodierte Information kann Text, URL oder andere Daten sein. Ein Beispiel eines QR-Codes. Ein Quadrat aus kleineren schwarz-weißen Quadraten
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). Ein Bild eines UPC-A Barcodes. Ein Rechteck aus schwarz-weißen vertikalen Linien mit darunter liegenden Zahlen
upc_e Eine Variation von UPC-A, definiert in iso15420, die unnötige Nullen für einen kompakteren Barcode auslässt. Ein Bild eines UPC-E Barcodes. Ein Rechteck aus schwarz-weißen vertikalen Linien
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.

Schnittstellen

BarcodeDetector Experimentell

Die BarcodeDetector-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.

js
// 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"],
  });
}

Abrufen unterstützter Formate

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

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

Erkennen von Barcodes

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.

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

Spezifikationen

Specification
Accelerated Shape Detection in Images
# barcode-detection-api

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch