Web/API/Barcode Detection API

From Get docs

Draft This page is not complete.


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


The Barcode Detection API detects linear and two-dimensional barcodes in images.

Concepts and Usage

Support for barcode recognition within web apps unlocks a variety of use cases through supported barcode formats. QR codes can be used for online payments, web navigation or establishing social media connections, aztec codes can be used to scan boarding passes and shopping apps can use EAN or UPC barcodes to compare prices of physical items.

Detection is achieved through the detect() method, which takes an image object; either an element, a Blob, ImageData or a CanvasImageSource. Optional parameters can be passed to the BarcodeDetector constructor to provide hints on which barcode formats to detect.

The Barcode Detection API supports the following formats of barcodes:

Format Description Image
aztec A square two-dimensional matrix following iso24778 and with a square bullseye pattern at their centre, thus resembling an Aztec pyramid. Does not require a surrounding blank zone. [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17417/6f279d9e69087708bdc2384a8b20c5ff/aztec.gif|A sample image of an aztec barcode. A square with smaller black and white squares inside]]
code_128 A linear (one-dimensional), bidirectionally-decodable, self-checking barcode following iso15417 and able to encode all 128 characters of ASCII (hence the naming). [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17418/fe9e38f7c67370f06fd3058e69380109/code-128.gif|An image of a code-128 barcode. A horizontal distribution of vertical black and white lines]]
code_39 A linear (one-dimensional), self-checking barcode following iso16388. It is a discrete and variable-length barcode type. [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17419/af9cc55eefbebb154d694e589be0a85d/code-39.png|An image of a code-39 barcode. A horizontal distribution of vertical black and white lines]]
code_93 A linear, continuous symbology with a variable length following bc5. It offers a larger information density than Code 128 and the visually similar Code 39. Code 93 is used primarily by Canada Post to encode supplementary delivery information. [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17421/4ad674593a8396827b5a475eb3273cd7/code-93.png|An image of a code 93 format barcode. A horizontal distribution of white and black horizontal lines]]
codabar A linear barcode representing characters 0-9, A-D and symbols - . $ / + [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17420/a370cf5ee07450f5718e57daf49d3682/codabar.png|An image of a codabar format barcode. A horizontal distribution of black and white vertical lines]]
data_matrix An orientation-independent two-dimensional barcode composed of black and white modules arranged in either a square or rectangular pattern following iso16022. [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17422/918ba7adc576382068780d2e8fa3105e/data-matrix.png|An example of a data matrix barcode. A square filled with smaller black and white squares]]
ean_13 A linear barcode based on the UPC-A standard and defined in iso15420. [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17424/0125a1c93764fcc90a6b83d8add9208e/EAN-13.png|An image of an EAN-13 format barcode. A horizontal distribution of white and black lines]]
ean_8 A linear barcode defined in iso15420 and derived from EAN-13. [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17423/50a0ce7b359fe3f643189c2fd8fc6b95/EAN-8.png|An image of an EAN-8 format barcode. A horizontal distribution of vertical black and white lines]]
itf A continuous, self-checking, bidirectionally decodable barcode. It will always encode 14 digits. [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17425/d8326c609478c291d62a69f1e428b2b0/ift.png|An image of an ITF Barcode. A horizontal distribution of white and black lines]]
pdf417 A continuous two-dimensional barcode symbology format with multiple rows and columns. It's bi-directionally decodable and uses the iso15438 standard. [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17426/131b9c9b56bf34cdcac61e7c1d257ca8/pdf417.png|An example of a pdf417 barcode format. A rectangle of smaller black and white squares]]
qr_code A two-dimensional barcode that uses the iso18004 standard. The information encoded can be text, URL or other data. [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17427/ca829c2edb2a9f76bed12afe09f8ce33/qr-code.png|An example of a QR code. A square of smaller black and white squares]]
upc_a One of the most common linear barcode types and is widely applied to retail in the United States. Defined in iso15420, it represents digits by strips of bars and spaces, each digit being associated to a unique pattern of 2 bars and 2 spaces, both of variable width. UPC-A can encode 12 digits that are uniquely assigned to each trade item, and it’s technically a subset of EAN-13 (UPC-A codes are represented in EAN-13 with the first character set to 0). [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17428/e1d434740c007f983e0eca0e12de3963/upc-a.png|An image of a upc-a barcode. A rectangle of black and white vertical lines with numbers underneath]]
upc_e A variation of UPC-A defined in iso15420, compressing out unnecessary zeros for a more compact barcode. [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/26/17429/7fa0b9587bb0874eaa86c222ea1e4bd4/upc-e.png|An image of a upc-e barcode. A rectangle of black and white vertical lines]]
unknown This value is used by the platform to signify that it does not know or specify which barcode format is being detected or supported.

You can check for formats supported by the user agent via the getSupportedFormats() method.

Interfaces

BarcodeDetector
The BarcodeDetector interface of the Barcode Detection API allows detection of linear and two dimensional barcodes in images.

Examples

Creating A Detector

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

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

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

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 Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet

BarcodeDetector

Experimental'Non-standard'

Chrome

Full support 83

Edge

Full support 83

Firefox

No support No

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 83

Chrome Android

Full support 83

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 13.0

BarcodeDetector() constructor

Experimental'Non-standard'

Chrome

Full support 83

Edge

Full support 83

Firefox

No support No

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 83

Chrome Android

Full support 83

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 13.0

detect

Experimental'Non-standard'

Chrome

Full support 83

Edge

Full support 83

Firefox

No support No

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 83

Chrome Android

Full support 83

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 13.0

getSupportedFormats

Experimental'Non-standard'

Chrome

Full support 83

Edge

Full support 83

Firefox

No support No

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 83

Chrome Android

Full support 83

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung 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: