barcode-detector

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

barcode-detector

★ 45 Open GitHub ↗

Spec compliant polyfill of the Barcode Detection API 🤳

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# :point_up: package ownership transfered to [@Sec-ant](https://github.com/Sec-ant). Development continues at [@sec-ant/barcode-detector](https://github.com/Sec-ant/barcode-detector) :point_up:

# BarcodeDetector Polyfill 
Spec compliant polyfill of the [Barcode Detection API](https://wicg.github.io/shape-detection-api/#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](https://gruhn.github.io/barcode-detector/index.html)

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

```sh
npm install barcode-detector
```
```js
import BarcodeDetector from "barcode-detector"

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

## Usage

```js
// 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](https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API).

### Supported Formats

`src/BarcodeDetectorJsqr.ts`:
 - :x: `aztec`
 - :x: `code_128`
 - :x: `code_39`
 - :x: `code_93`
 - :x: `codabar`
 - :x: `data_matrix`
 - :x: `ean_13`
 - :x: `ean_8`
 - :x: `itf`
 - :x: `pdf417`
 - :heavy_check_mark: `qr_code` 
 - :x: `upc_a`
 - :x: `upc_e`

`src/BarcodeDetectorZXing.ts` (not exposed at the moment. See [#1](https://github.com/gruhn/barcode-detector-polyfill/issues/1)):
 - :heavy_check_mark: `aztec`
 - :heavy_check_mark: `code_128`
 - :heavy_check_mark: `code_39`
 - :x: `code_93`
 - :x: `codabar`
 - :heavy_check_mark: `data_matrix`
 - :heavy_check_mark: `ean_13`
 - :heavy_check_mark: `ean_8`
 - :heavy_check_mark: `itf`
 - :heavy_check_mark: `pdf417`
 - :heavy_check_mark: `qr_code` 
 - :x: `upc_a`
 - :x: `upc_e`

barcode-detector

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README