Draft This page is not complete.
Secure contextThis feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The BarcodeDetector
interface of the Barcode Detection API
allows detection of linear and two dimensional barcodes in images.
Constructors
BarcodeDetector.BarcodeDetector()
- Creates and returns a
BarcodeDetector
object, with optionalbarcodeDetectorOptions
Methods
detect()
- Returns a
Promise
which fulfills with an array ofdetectedBarcode
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 [landing page])rawValue
: AString
decoded from the barcode data.
- A
getSupportedFormats()
- Returns a
Promise
which fulfills with anArray
of supported barcode format types.
Examples
Creating A Detector
This example creates a new barcode detector object, with specified supported formats and tests for browser compatibility.
// create new detector
var barcodeDetector = new BarcodeDetector({formats: ['code_39', 'codabar', 'ean_13']});
// check compatibility
if (barcodeDetector) {
console.log('Barcode Detector supported!');
} else {
console.log('Barcode Detector is not supported by this browser.');
}
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 ImagesThe definition of 'BarcodeDetector' in that specification. | Draft | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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 |
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 | |
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 | |
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:
- barcodefaq.com: A website with information about different barcodes and examples of the different types.
- Accelerated Shape Detection in Images
BarcodeDetector by Mozilla Contributors is licensed under CC-BY-SA 2.5.