🚧 WIP: 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
.
[TODO: live demos]
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