BarcodeDetector

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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 BarcodeDetector-Schnittstelle der Barcode Detection API ermöglicht die Erkennung von linearen und zweidimensionalen Barcodes in Bildern.

Konstruktoren

BarcodeDetector.BarcodeDetector() Experimentell

Erstellt und gibt ein BarcodeDetector-Objekt zurück, mit optionalen BarcodeDetectorOptions.

Statische Methoden

getSupportedFormats() Experimentell

Gibt ein Promise zurück, welches mit einem Array von unterstützten Barcode-Formattypen erfüllt wird.

Instanzmethoden

detect() Experimentell

Gibt ein Promise zurück, welches mit einem Array von DetectedBarcode-Objekten mit folgenden Eigenschaften erfüllt wird:

  • boundingBox: Ein DOMRectReadOnly, das die Abmessungen eines Rechtecks zurückgibt, das den Umfang eines erkannten Barcodes darstellt und mit dem Bild ausgerichtet ist.
  • cornerPoints: Die x- und y-Koordinaten der vier Eckpunkte des erkannten Barcodes relativ zum Bild, beginnend mit der oberen linken Ecke und im Uhrzeigersinn. Aufgrund von perspektivischen Verzerrungen im Bild könnte dies nicht quadratisch sein.
  • format: Das erkannte Barcode-Format. (Für eine vollständige Liste der Formate konsultieren Sie die Liste über die unterstützten Barcode-Formate).
  • rawValue: Ein aus den Barcode-Daten dekodierter String.

Beispiele

Erstellen eines Detektors

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

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

Unterstützte Formate abrufen

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

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

Barcodes erkennen

Dieses Beispiel verwendet die detect()-Methode, 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
BarcodeDetector
Experimental
BarcodeDetector() constructor
Experimental
detect
Experimental
getSupportedFormats() static method
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

Siehe auch