nimiq / qr-scanner

Lightweight Javascript QR Code Scanner
https://nimiq.github.io/qr-scanner/demo
MIT License
2.52k stars 541 forks source link

Possible with Barcodes? #207

Open ceh137 opened 2 years ago

ceh137 commented 2 years ago

I would like to use this library for scanning barcodes. Is it possible to configure it that way?

arcadius commented 1 year ago

Seems to be similar to https://github.com/nimiq/qr-scanner/issues/193 ?

arcadius commented 1 year ago

It should not be too complex to achieve

See: https://github.com/nimiq/qr-scanner/blob/abcfe1bce2703721408d8ce7ebde94a359998506/src/qr-scanner.ts#L656

toddp commented 1 year ago

hi @arcadius , I tried your suggestion and it seems like adding more formats is not enough to get the scanner to return barcode results.

You can see my changes at my fork: https://github.com/nimiq/qr-scanner/compare/master...toddp:qr-scanner:master

I'd really like to be able to use qr-scanner for other barcode types, otherwise I'll have to switch to a different module. Can we raise this as a feature request?

Angrigo commented 1 year ago

Scanning for multiple types of barcodes inevitably brings perfomances down. Could we make it as a prop in the options object when initializing ?

toddp commented 1 year ago

Following up to my previous comment:

I managed to get other non-qr-code formats working with qr-scanner. A couple issues:

MacOS and iOS browsers do no support the BarcodeDetector API:

https://caniuse.com/mdn-api_barcodedetector

So even though I passed the additional types to BarcodeDetector in qr-scanner like this:

        return new BarcodeDetector({ formats: ['code_128','code_39','code_93','codabar','ean_13','ean_8','itf','qr_code','upc_a','upc_e'] });

It wasn't working in my browser.

I then added https://github.com/undecaf/barcode-detector-polyfill to my application, and exposed it like this:

    try {
        globalThis.BarcodeDetector.getSupportedFormats();
    } catch {
        globalThis.BarcodeDetector = barcodeDetectorPolyfill.BarcodeDetectorPolyfill;
    }

before instantiating the QrScanner .

One enhancement I'd suggest is allowing QrScanner constructor to take an optional set of formats, which it can then pass into BarcodeDetector. This might also eliminate your need to provide the backup worker.ts.

hope this helps!

angarsky commented 1 year ago

Let me share my experience.

Macbook, M2, Ventura 13.2.1 Chrome Version 116.0.5845.187 (Official Build) (arm64)

I cloned @toddp repo - https://github.com/toddp/qr-scanner. But the demo page still recognised only QR codes. I found next line in the src/qr-scanner.ts and removed it:

if (isChromiumOnMacWithArmVentura) return createWorker();

After the yarn build the demo page works and detects all the specified formats (code_128, ean_13 in my case).

AlexZhouAA commented 1 week ago

Let me share my experience.

Macbook, M2, Ventura 13.2.1 Chrome Version 116.0.5845.187 (Official Build) (arm64)

I cloned @toddp repo - https://github.com/toddp/qr-scanner. But the demo page still recognised only QR codes. I found next line in the src/qr-scanner.ts and removed it:

if (isChromiumOnMacWithArmVentura) return createWorker();

After the yarn build the demo page works and detects all the specified formats (code_128, ean_13 in my case).

@angarsky I did everything like you, but still no luck (recognise only QR codes). Did you change anything on the demo index.html too? Can you share the qr-scanner.min.js, the demo index.html(if modified)? Any help you could provide would be wonderful.