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

barcode-detector's Issues

Not SSR friendly

The code accesses browser-only APIs on import such as EventTarget, Blob, etc. This makes the library not SSR friendly. It would be better access browser APIs as late as possible. Maybe on new BarcodeDetector().

Is there really a benefit to using a worker?

Hello,

I have recently made my own quazi-polyfill for BarcodeDetector. You can find it here: https://github.com/stefansundin/qr-detector.js. It only aims to implement the QR format.

While working on it and researching other packages, I started wondering why most other packages implemented their detection using web workers. In my limited testing I have not really seen a noticeable benefit when using web workers. I am wondering if there's a solid test that I can run to see the benefits? I would be very thankful for learning in what cases it makes a difference.

Furthermore, I think the fact that web workers are utilized should be very explicitly stated in this project's README. To be honest I think a polyfill shouldn't really add workers into the mix, because that's not something that BarcodeDetector requires you to use. I don't even think it is desirable since in my opinion it goes beyond the responsibilities of a polyfill.

Thanks for your time!

Error after a few minutes

Hello :)
Im using your vue3 qrcode reader for one of my applications... After the QR Reading Page is opened for a few minutes it is crashing with the error Cannot read properties of null (reading 'id'), so I need to reload the page before Im able to scan more qr codes...
I looked for that error in the code and got into this repository. The exact location of the error is in your worker.ts file on line 52. I think a little check if event.data is null would solve that problem.

...is it possible to add that check?

Have a good one :)

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

How to use BarcodeDetectorZXing?

Hey,

this lib seems great to use the modern barcode detection api. For me qrcode and code_128 is really interesting.
In the readme it states, BarcodeDetectorZXing is not exposed at the moment. I tried building and using it locally but it fails with lots of errors. Is there any way to use the ZXing Detector Polyfill yet?

Thanks!

Alternative

If somebody is looking for alternative solution I found one https://github.com/undecaf/barcode-detector-polyfill

Publish types?

Hi,
I see that this package is built with TypeScript, but does not ship with the types. @types/barcode-detector also does not exist. Would you consider publishing the types? Or, do you have any other recommendations?
TIA!