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

imageBitmapSource

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

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.

TypeError

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

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.error(err);
  });