BarcodeDetector: detect() method

imageBitmapSource

Receives an image source as a parameter. This can be a HTMLImageElement, a SVGImageElement, a HTMLVideoElement, a HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, a VideoFrame, 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 supported barcode format).

rawValue

A string decoded from the barcode data.

TypeError

Thrown if no parameter is specified or the type is not that of an ImageBitmapSource.

SecurityError DOMException

Thrown if the imageBitmapSource has an origin and is not the same as the document's origin, or if the imageBitmapSource is a HTMLCanvasElement and its origin-clean flag is set to false.

InvalidStateError DOMException

Thrown if the imageBitmapSource is an HTMLImageElement and is not fully decoded or decoding failed, or is an HTMLVideoElement and its readyState is HAVE_NOTHING or HAVE_METADATA.

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);
  });