Barcode Detection API
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more support for this feature? Tell us why.
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:
Sie können die von der Benutzeroberfläche unterstützten Formate über die Methode getSupportedFormats() überprüfen.
Schnittstellen
BarcodeDetector-
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.
// 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.
// 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.
barcodeDetector
.detect(imageEl)
.then((barcodes) => {
barcodes.forEach((barcode) => console.log(barcode.rawValue));
})
.catch((err) => {
console.log(err);
});