Barcode Detection API
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more support for this feature? Tell us why.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The Barcode Detection API detects linear and two-dimensional barcodes in images.
Concepts and usage
Support for barcode recognition within web apps unlocks a variety of use cases through supported barcode formats. QR codes can be used for online payments, web navigation or establishing social media connections, Aztec codes can be used to scan boarding passes and shopping apps can use EAN or UPC barcodes to compare prices of physical items.
Detection is achieved through the detect() method, which takes an image object; it can be one of these objects:
a HTMLImageElement,
a SVGImageElement,
a HTMLVideoElement,
a HTMLCanvasElement,
an ImageBitmap,
an OffscreenCanvas,
a VideoFrame,
a Blob,
or an ImageData.
Optional parameters can be passed to the BarcodeDetector constructor to provide hints on which barcode formats to detect.
Supported barcode formats
The Barcode Detection API supports the following barcode formats:
You can check for formats supported by the user agent via the getSupportedFormats() method.
Interfaces
BarcodeDetector-
The
BarcodeDetectorinterface of the Barcode Detection API allows detection of linear and two dimensional barcodes in images.
Examples
>Creating A Detector
This example tests for browser compatibility and creates a new barcode detector object, with specified supported formats.
// 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"],
});
}
Getting Supported Formats
The following example calls the getSupportedFormats() method and logs the results to the console.
// check supported types
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Detect Barcodes
This example uses the detect() method to detect the barcodes within the given image. These are iterated over and the barcode data is logged to the console.
barcodeDetector
.detect(imageEl)
.then((barcodes) => {
barcodes.forEach((barcode) => console.log(barcode.rawValue));
})
.catch((err) => {
console.log(err);
});