Library: Decoding not consistent

[francoberton]

Hi,
I have a problem with the decoding of a Qr code image, that i'm passing as a base64 string to the decodeFromImage function, as following

 const codeReader = new BrowserQRCodeReader();
    codeReader.decodeFromImage(undefined, this.state.qrImage)
      .then(
        (result) => { this.showSuccessMessage('The QR is valid!'); console.log(result.getResultMetadata()); }
      )
      .catch(
        () => this.showErrorMessage('The QR is unreadable.')
      );

When I execute this code multiple times on the same image, the result is not consistent. Sometimes the decoding works and it return the correct result, but other times it throws an exception, and prints in the console the following errors

checksum or format error, trying again... Error
    at Decoder.correctErrors (Decoder.js?958e:154)
    at Decoder.decodeBitMatrixParser (Decoder.js?958e:125)
    at Decoder.decodeBitMatrix (Decoder.js?958e:70)
    at QRCodeReader.decode (QRCodeReader.js?680d:64)
    at BrowserQRCodeReader.BrowserCodeReader.readerDecode (BrowserCodeReader.js?0615:254)
    at BrowserQRCodeReader.BrowserCodeReader.decodeOnce (BrowserCodeReader.js?0615:229)

BrowserCodeReader.js?0615:233 true Error
    at Decoder.correctErrors (Decoder.js?958e:154)
    at Decoder.decodeBitMatrixParser (Decoder.js?958e:125)
    at Decoder.decodeBitMatrix (Decoder.js?958e:70)
    at QRCodeReader.decode (QRCodeReader.js?680d:64)
    at BrowserQRCodeReader.BrowserCodeReader.readerDecode (BrowserCodeReader.js?0615:254)
    at BrowserQRCodeReader.BrowserCodeReader.decodeOnce (BrowserCodeReader.js?0615:229)

I wait for an answer. Thank you

[werthdavid]

I'm not exactly sure what kind of answer you're expecting. The Decoder goes through a lot of steps to detect if a given image contains a valid QR-code, it seems that your code fails in the error-correction step. If you want a qualified answer it would help if you could provide the image that causes the actual problem along with information about which version of the library you used, the platform (node, browser, ionic), browser etc.

[patrickfav]

This is maybe related. My experience is not that it is inconsistent with the same QR code, but totally inconsistent with different codes. For example this one reads fine:

and this one is not

(only in Chrome and FF BTW, I was not able to decode a single image in Edge)

I get

true Error: No MultiFormat Readers were able to detect the code.
    at MultiFormatReader.decodeInternal (MultiFormatReader.js:179)
    at MultiFormatReader.decode (MultiFormatReader.js:63)
    at HBBrowserQRCodeReader.BrowserCodeReader.readerDecode (BrowserCodeReader.js:254)
    at HBBrowserQRCodeReader.BrowserCodeReader.decodeOnce (BrowserCodeReader.js:229)
    at HTMLImageElement.me.imageLoadedEventListener (BrowserCodeReader.js:174)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3995)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask [as invoke] (zone.js:496)

and using this reader config

class MyBrowserQRCodeReader extends BrowserCodeReader {
  private readonly reader2: MultiFormatReader;

  public constructor(timeBetweenScansMillis: number = 350) {
    const decoderHintMap = new Map<DecodeHintType, any>();
    decoderHintMap.set(DecodeHintType.TRY_HARDER, true);
    decoderHintMap.set(DecodeHintType.POSSIBLE_FORMATS, [BarcodeFormat.QR_CODE]);

    const reader = new MultiFormatReader();
    reader.setHints(decoderHintMap);

    super(reader, timeBetweenScansMillis);
    this.reader2 = reader;
  }

  protected decodeBitmap(binaryBitmap: BinaryBitmap): Result {
    return this.reader2.decodeWithState(binaryBitmap);
  }
}

I decode with the object url

URL.createObjectURL(file);

any ideas?

UPDATE: I can't really say, if it is just user error, because the demo doesn't seem to work: https://zxing-js.github.io/library/examples/qr-image/

[odahcam]

I read both codes using production build running in one of the company I work projects; https://minhahavan.com/ and the scanner reads both codes fine. 🤔

[odahcam]

UPDATE: I can't really say, if it is just user error, because the demo doesn't seem to work: https://zxing-js.github.io/library/examples/qr-image/

The demo is really broken. 😢

[patrickfav]

@odahcam thanks for the feedback. Do you have any tips what config to use for simple file based reading?

[odahcam]

If you're not in browser, you can take a look at the src/tests folder, there we scan A LOT of barcode files to ensure the lib is safe. 🙂

[patrickfav]

Unfortunately we are in the browser context.

[odahcam]

So we have a lot less examples. 🙁

I can try to help based on what you have now, can you share some piecce of code?

[patrickfav]

Thank you very much for the offer!

Here is a gist with the important parts of our QR service:

https://gist.github.com/patrickfav/46092f9b6e3fde8833cfcc75ccc9075b

If you have time maybe you could point out obvious issues?

[odahcam]

I couldn't find any very obvious errors, but I'm a little busy at the moment. I can offeryou an working example you can find in the docs:

const img = document.getElementById('img')

codeReader.decodeFromImage(img).then((result) => {
    console.log(result)
    document.getElementById('result').textContent = result.text
}).catch((err) => {
    console.error(err)
    document.getElementById('result').textContent = err
})

source: https://github.com/zxing-js/library/blob/af16fdb2a72b331394dfe22b549703bdfefcae90/docs/examples/qr-image/index.html#L1

(The demo just don't work online, locally it works fine andyou can use it)

I see you're using Base64 encoded images and I think that there's really a bug in the code, that's not that good yet. You can create your own image element and trigger the decodeOnce on image's onload event. E.g.:

const imageElement = document.createElement('img');
imageElement.width = 200;
imageElement.height = 200;

imageElement.addEventListener('load', () => scanner.decodeFromImage(imageElement));
imageElement.src = imageUrl;

I hope that it helps.

[odahcam]

If there's no more things to discuss I'll be closing this guy here soon. Thx.

[github-actions[bot]]

Stale issue message