mebjas / html5-qrcode

A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org
https://qrcode.minhazav.dev
Apache License 2.0
5k stars 971 forks source link

Don't read CODE_128, CODE_93. #242

Open AndreyPatseiko opened 3 years ago

AndreyPatseiko commented 3 years ago

Library don't scan some barcodes.

Steps to reproduce:

  1. Open demo link
  2. Start scanning.
  3. Try scan CODE_128, CODE_93 images (which was provided in support types).

Expected behavior Scanning was successful..

Result Nothing not happen. Scanning not happen.

Screenshots code_39 code_128

Smartphone:

    • Device: iPad Air 2
    • OS: iOS 14.4.2
    • Browser: stock browser - safari
    • Device: iPhone X
    • OS: iOS 13.3.1
    • Browser: stock browser - safari
    • Device: Samsung Galaxy A31
      • OS: Android 11
      • Browser: Chrome (91.0.4472.101)
kuhlaid commented 3 years ago

I just tested (https://barcode.tec-it.com/en/Code128?data=444)[https://barcode.tec-it.com/en/Code128?data=444] and that worked. I also tested (https://barcode.tec-it.com/en/Code93?data=555)[https://barcode.tec-it.com/en/Code93?data=555] and that worked as well. So the this app WILL read those codes, but at some point a generated barcode will be too long to read and the barcode lines will be too small for a device to recognize. Using letters in a linear barcode is much more 'costly' than using numbers (meaning, a linear barcode of 'abc' produces much smaller lines than one of '123', which matters as your barcode grows longer in length).

hungpham-cb commented 3 years ago

Same problem here, tested with barcode 39 and 128 and it doesn't read except qr code only.

mebjas commented 2 years ago

I have tested this, it's not that the decoder is not able to decode the values instead that the camera doesn't capture the long barcodes well leading to highly aliased or inaccurate images being streamed to the decoder.

One solution is to use non square qrbox instead

image

Example js config

let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", 
    { 
        fps: 10,
        qrbox: { width: 400, height: 250 },
        // Important notice: this is experimental feature, use it at your
        // own risk. See documentation in
        // mebjas@/html5-qrcode/src/experimental-features.ts
        experimentalFeatures: {
            useBarCodeDetectorIfSupported: true
        },
        rememberLastUsedCamera: true
 });
html5QrcodeScanner.render(onScanSuccess);

From a library perspective I will add support for scanning the codes in different orientations so that on smartphones we can have the qrbox in landscape orientation for such scanning