W3cubDocs

/Web APIs

BarcodeDetector: detect() method

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Syntax

js

detect(imageBitmapSource)

Parameters

imageBitmapSource

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.

js

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
detect
88Supported on Chrome OS and macOS only.
83–88Supported on macOS only.
83Supported on macOS only.
No No
69Supported on macOS only.
No 83 83 No 59 No 13.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector/detect