TheBarcodeDetector interface of theBarcode Detection API allows detection of linear and two dimensional barcodes in images.

Constructors

BarcodeDetector.BarcodeDetector()Experimental

Creates and returns aBarcodeDetector object, with optionalBarcodeDetectorOptions.

Static methods

getSupportedFormats()Experimental

Returns aPromise which fulfills with anArray of supportedbarcode format types.

Instance methods

detect()Experimental

Returns aPromise which fulfills with an array ofDetectedBarcode objects with the following properties:

• boundingBox: ADOMRectReadOnly, which returns the dimensions of a rectangle representing the extent of a detected barcode, aligned with the image.
• cornerPoints: The x and y co-ordinates of the four corner points of the detected barcode relative to the image, starting with the top left and working clockwise. This may not be square due to perspective distortions within the image.
• format: The detected barcode format. (For a full list of formats, consult thesupported barcode format) list.
• rawValue: A string decoded from the barcode data.

Examples

Creating A Detector

This example creates a new barcode detector object, with specified supported formats and tests for browser compatibility.

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

Getting Supported Formats

The following example calls thegetSupportFormat() static method and logs the results to the console.

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

Detect Barcodes

This example uses thedetect() 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);  });

Specifications

Browser compatibility

See also

• barcodefaq.com: A website with information about different barcodes and examples of the different types.
• Accelerated Shape Detection in Images