https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API * Skip to main content * Skip to select language Open main menu * ReferencesReferences + HTML Structure of content on the web + CSS Code used to describe document style + JavaScript General-purpose scripting language + HTTP Protocol for transmitting web resources + Web APIs Interfaces for building web applications + Web Technology Web technology reference for developers * GuidesGuides + MDN Learning Area Learn web development + HTML Learn to structure web content with HTML + CSS Learn to style content using CSS + JavaScript Learn to run scripts in the browser + Accessibility Learn to make the web accessible to all Search MDN[ ]SearchClose search toggle theme to dark mode[ ] Show search 1. References 2. Web APIs 3. Barcode Detection API In this article * Concepts and usage * Interfaces * Examples * Specifications * Browser compatibility * See also Related Topics 1. Barcode Detection API 2. Interfaces 1. BarcodeDetector 3. Methods 1. BarcodeDetector.detect() 2. BarcodeDetector.getSupportedFormats() In this article * Concepts and usage * Interfaces * Examples * Specifications * Browser compatibility * See also Barcode Detection API Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers. Note: This feature is available in Web Workers 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. Supported barcode formats The Barcode Detection API supports the following barcode formats: Format Description Image A square two-dimensional matrix A sample image of following iso24778 and with a square an aztec barcode. aztec bullseye pattern at their centre, thus A square with resembling an Aztec pyramid. Does not smaller black and require a surrounding blank zone. white squares inside A linear (one-dimensional), An image of a bidirectionally-decodable, code-128 barcode. code_128 self-checking barcode following A horizontal iso15417 and able to encode all 128 distribution of characters of ASCII (hence the vertical black and naming). white lines An image of a A linear (one-dimensional), code-39 barcode. A code_39 self-checking barcode following horizontal iso16388. It is a discrete and distribution of variable-length barcode type. vertical black and white lines A linear, continuous symbology with a An image of a code variable length following bc5. It 93 format barcode. offers a larger information density A horizontal code_93 than Code 128 and the visually similar distribution of Code 39. Code 93 is used primarily by white and black Canada Post to encode supplementary horizontal lines delivery information. An image of a codabar format A linear barcode representing barcode. A codabar characters 0-9, A-D and symbols - . $ horizontal / + distribution of black and white vertical lines An orientation-independent An example of a two-dimensional barcode composed of data matrix data_matrix black and white modules arranged in barcode. A square either a square or rectangular pattern filled with following iso16022. smaller black and white squares An image of an EAN-13 format A linear barcode based on the UPC-A barcode. A ean_13 standard and defined in iso15420. horizontal distribution of white and black lines An image of an EAN-8 format A linear barcode defined in iso15420 barcode. A ean_8 and derived from EAN-13. horizontal distribution of vertical black and white lines An image of an ITF A continuous, self-checking, Barcode. A itf bidirectionally decodable barcode. It horizontal will always encode 14 digits. distribution of white and black lines A continuous two-dimensional barcode An example of a symbology format with multiple rows pdf417 barcode pdf417 and columns. It's bi-directionally format. A decodable and uses the iso15438 rectangle of standard. smaller black and white squares A two-dimensional barcode that uses An example of a QR qr_code the iso18004 standard. The information code. A square of encoded can be text, URL or other smaller black and data. white squares 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 An image of a strips of bars and spaces, each digit upc-a barcode. A being associated to a unique pattern rectangle of black upc_a of 2 bars and 2 spaces, both of and white vertical variable width. UPC-A can encode 12 lines with numbers digits that are uniquely assigned to underneath 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). An image of a A variation of UPC-A defined in upc-e barcode. A upc_e iso15420, compressing out unnecessary rectangle of black zeros for a more compact barcode. and white vertical lines This value is used by the platform to unknown 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(supportedFormats => { 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 Accelerated Shape Detection in Images # barcode-detection-api Browser compatibility BCD tables only load in the browser See also * barcodefaq.com: A website with information about different barcodes and examples of the different types. * The Shape Detection API: a picture is worth a thousand words, faces, and barcodes Found a problem with this page? * Edit on GitHub * Source on GitHub * Report a problem with this content on GitHub * Want to fix the problem yourself? See our Contribution guide. Last modified: Feb 18, 2022, by MDN contributors Your blueprint for a better internet. * MDN on Twitter * MDN on Github MDN * About * Hacks Blog * Careers Support * Report a page issue * Report a site issue Our communities * MDN Community * MDN Forum * MDN Chat Developers * Web Technologies * Learn Web Development * Website Privacy Notice * Cookies * Legal * Community Participation Guidelines Visit Mozilla Corporation's not-for-profit parent, the Mozilla Foundation. Portions of this content are (c)1998-2022 by individual mozilla.org contributors. Content available under a Creative Commons license.