BarcodeDetector

Draft
This page is not complete.

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

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 see the [landing page])
  • rawValue: A String decoded from the barcode data.
getSupportedFormats()
Returns a Promise which fulfills with an Array of supported barcode format types.

Examples

Creating A Detector

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

// create new detector
var barcodeDetector = new BarcodeDetector({formats: ['code_39', 'codabar', 'ean_13']});

// check compatibility
if (barcodeDetector) {
  console.log('Barcode Detector supported!');
} else {
  console.log('Barcode Detector is not supported by this browser.');
}

Getting Supported Formats

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

// check supported types
barcodeDetector.getSupportedFormats()
  .then(formats => {
    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.rawData));
    }
    .catch(err => {
      console.log(err);
    })
  

Specifications

Specification Status Comment
Accelerated Shape Detection in Images
The definition of 'BarcodeDetector' in that specification.
Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
BarcodeDetector
ExperimentalNon-standard
Chrome Full support 83Edge Full support 83Firefox No support NoIE No support NoOpera Full support YesSafari No support NoWebView Android Full support 83Chrome Android Full support 83Firefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support 13.0
BarcodeDetector() constructor
ExperimentalNon-standard
Chrome Full support 83Edge Full support 83Firefox No support NoIE No support NoOpera Full support YesSafari No support NoWebView Android Full support 83Chrome Android Full support 83Firefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support 13.0
detect
ExperimentalNon-standard
Chrome Full support 83Edge Full support 83Firefox No support NoIE No support NoOpera Full support YesSafari No support NoWebView Android Full support 83Chrome Android Full support 83Firefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support 13.0
getSupportedFormats
ExperimentalNon-standard
Chrome Full support 83Edge Full support 83Firefox No support NoIE No support NoOpera Full support YesSafari No support NoWebView Android Full support 83Chrome Android Full support 83Firefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support 13.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

See also: