gruhn / barcode-detector

Spec compliant polyfill of the Barcode Detection API 🤳

☝️ package ownership transfered to @Sec-ant. Development continues at @sec-ant/barcode-detector ☝️

BarcodeDetector Polyfill

Spec compliant polyfill of the Barcode Detection API. It can be used for barcode/QR-code recognition in images from various kinds of sources including <canvas>, <img>, <image> (inside SVGs), <video>, File, Blob, ImageData, ImageBitmap, OffscreenCanvas.

simple demo

Design goals:

• spec compliance
• support as many barcode formats as possible
• detect multiple codes in one image
• provide position/coordinate information of detected codes
• sufficient performance to process live video streams

Installation

npm install barcode-detector

import BarcodeDetector from "barcode-detector"

// polyfill unless already supported
if (!("BarcodeDetector" in window)) {
  window.BarcodeDetector = BarcodeDetector
}

Usage

// pick barcode formats. Other formats will be ignored
const barcodeDetector = new BarcodeDetector({ formats: ["qr_code"] })

// directly pass an image element, video element, ...
const barcodes = await barcodeDetector.detect(someImageSource)

// can detect multiple barcodes in one image
const [ barcode1, barcode2, ...evenMoreBarcodes ] = barcodes

// access encoded string
const { rawValue } = barcode1

For in-depth documentation checkout the corresponding MDN page.

Supported Formats

src/BarcodeDetectorJsqr.ts:

• ❌ aztec
• ❌ code_128
• ❌ code_39
• ❌ code_93
• ❌ codabar
• ❌ data_matrix
• ❌ ean_13
• ❌ ean_8
• ❌ itf
• ❌ pdf417
• ✔️ qr_code
• ❌ upc_a
• ❌ upc_e

src/BarcodeDetectorZXing.ts (not exposed at the moment. See #1):

• ✔️ aztec
• ✔️ code_128
• ✔️ code_39
• ❌ code_93
• ❌ codabar
• ✔️ data_matrix
• ✔️ ean_13
• ✔️ ean_8
• ✔️ itf
• ✔️ pdf417
• ✔️ qr_code
• ❌ upc_a
• ❌ upc_e