BarcodeDetector

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 BarcodeDetector interface of the Barcode Detection API allows detection of linear and two dimensional barcodes in images.

Constructors

BarcodeDetector.BarcodeDetector()

Creates and returns a BarcodeDetector object, with optional BarcodeDetectorOptions.

Static methods

getSupportedFormats()

Returns a Promise which fulfills with an Array of supported barcode format types.

Instance methods

detect()

Returns a Promise which fulfills with an array of DetectedBarcode objects with the following properties:

  • boundingBox: A DOMRectReadOnly, 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 the supported 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.

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

Getting Supported Formats

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

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

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

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also