BarcodeDetector.detect()

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

The detect() method of the BarcodeDetector interface returns a Promise which fulfills with an Array of detected barcodes within an image.

Syntax

var detectedBarcode = BarcodeDetector.detect(ImageBitmapSource);

Parameters

image

Receives an ImageBitmapSource as a parameter. This can be an element, a Blob of type image or an ImageData object.

Return value

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 Barcode Detection API overview page).
  • rawValue: A String decoded from the barcode data.

Exceptions

TypeError

No parameter is specified or the type is not that of an ImageBitmapSource.

Examples

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
Accelerated Shape Detection in Images
# dom-barcodedetector-detect

Browser compatibility

BCD tables only load in the browser