QR code parse error, error = R: No MultiFormat Readers were able to detect the code.

[nssidhu]

I am getting this error is the browser console. and it is in infinite loop, thousands of them.
Testing on Google chrome desktop browser.

[ROBERT-MCDOWELL]

you should provide more info to solve your issue

[nssidhu]

    const config = { fps: 10, qrbox: 250 };
    html5QrCode = new Html5Qrcode(barCodeScanner);
    const qrCodeSuccessCallback = message => {
     
        blazorPageReference.invokeMethodAsync('QrCodeText', message);
        audio.play();
    }

    // If you want to prefer back camera
    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);

that all i am doing, blazorPageReference is used becuase i am hosting this in Blazor WASM Project, and i do get message.

[ROBERT-MCDOWELL]

you should wait until html5Qrcode is created and ready.

[nssidhu]

What am i doing before the html5Qrcode is ready ? new Html5Qrcode(barCodeScanner) does not have ready/then.
Can you tell me what correction would be needed to fixe the error in the code above ?

[ROBERT-MCDOWELL]

did you put your code once the window loaded and document ready?
also comment in audio.play() and see if it's better

[nssidhu]

Yes, the code is being called from button click event manually way after page has loaded.
audio.play() is used for sound, but commenting it does not make difference.

[ROBERT-MCDOWELL]

proceed by commenting your code step by step.
also try your code on several browsers.

[mebjas]

@nssidhu Can you try this on the latest published library i.e. with version https://github.com/mebjas/html5-qrcode/releases/tag/V2.0.3

[rodinator47]

I have the same problem as nssidhu. I'm using the latest version of the library and have tested it in Chrome, Firefox and Safari. Unfortunately I get the same error in the console in an infinite loop.

This is how I'm using it:

jQuery(function($){
    const html5QrCode = new Html5Qrcode('reader');
    const qrCodeSuccessCallback = message => {
		console.log(message);
    };
    const config = {fps: 10, qrbox: 250, aspectRatio: 1};
    html5QrCode.start({facingMode: 'environment'}, config, qrCodeSuccessCallback);
});

[mebjas]

Is this reproducible for the demo as well?

https://blog.minhazav.dev/research/html5-qrcode

(I cannot repro this issue on Chrome with the demo page)

[rodinator47]

There are no errors on the demo page with Chrome, Firefox and Safari.

[mebjas]

@rodinator47 Thanks for verifying. I just published version 2.0.4.

Would you be able to see if the issue is reproducible on the latest version?

[rodinator47]

It's still printing the errors in the console. There is just an additional object logged after the error message:

{errorMessage: "QR code parse error, error = R: No MultiFormat Readers were able to detect the code.", type: 0}

[mebjas]

I able to reproduce this issue, thanks for sharing more information.

Working on finding root cause, will publish a fix asap.

[mebjas]

Found the root case, it was due to console.log being set as error callback if not other error callback was provided by caller eve if the verbose flag was not true.

Created this PR: #208

Would you be able to verify with this script on your end as well if the issue is resolved: https://raw.githubusercontent.com/mebjas/html5-qrcode/issue_202/dist/html5-qrcode.min.js

[rodinator47]

It works! There are no errors in the console anymore.
Thanks for taking care of it so quickly :)

[mebjas]

Thanks for verification.

The fix has been merged & released to npm and Github release.

[Eolykab]

I am still getting this error as well. Though I am using https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js

<script src="{{ asset('js/html5-qrcode.min.js') }}"></script>

<script>
    function onScanSuccess(decodedText, decodedResult) {
        console.log(`Scan result: ${decodedText}`, decodedResult);
        document.getElementById("barcode").value = decodedResult;
    }

    function onScanFailure(error) {
        console.warn(`Code scan error = ${error}`);
    }
    setTimeout( () => {
        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", { fps: 10, qrbox: 250 });
        html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    }, 1000)
</script>

See image of the console :

Can you please help?

[mebjas]

@Eolykab

This should be because you are using onScanFailure

Try

<script src="{{ asset('js/html5-qrcode.min.js') }}"></script>

<script>
    function onScanSuccess(decodedText, decodedResult) {
        console.log(`Scan result: ${decodedText}`, decodedResult);
        document.getElementById("barcode").value = decodedResult;
    }

    setTimeout( () => {
        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", { fps: 10, qrbox: 250 });
        html5QrcodeScanner.render(onScanSuccess);
    }, 1000)
</script>

[Micle86]

Error repeats
const html5QrCode = new Html5Qrcode("qr-code-lib-block");
html5QrCode.scanFile(file,true)
.then(function(decodedText){
console.log(decodedText);
})
.catch(function (error ) {
console.log(error);
});
when qr-code-lib-block display none or width 0 and heqight 0 visibility hidden position absolute

[sushmapuranik]

@mebjas ,
I am getting this error "qr code parse error, error = r: no multiformat readers were able to detect the code" , the file i am scanning has a combination of barcode and qr code .

[janbe30]

@Eolykab

This should be because you are using onScanFailure

Try

<script src="{{ asset('js/html5-qrcode.min.js') }}"></script>

<script>
    function onScanSuccess(decodedText, decodedResult) {
        console.log(`Scan result: ${decodedText}`, decodedResult);
        document.getElementById("barcode").value = decodedResult;
    }

    setTimeout( () => {
        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", { fps: 10, qrbox: 250 });
        html5QrcodeScanner.render(onScanSuccess);
    }, 1000)
</script>

Does this mean it's not necessary to use onScanFailure? How would you recommend handing scan errors then? I'm also getting that same console error on version 2.3.1. It seems like the root cause is the ZXingHtml5QrcodeDecoder library.

[ehabnady]

I got this error "qr code parse error error = r no multiformat readers were able to detect the code" when I scan a 2D data matrix or a barcode, but it works well for QR
All what I want is to be able to scan a 2D Data Matrix for a shape with dimensions 9mm * 9mm

My code is as the below lines:

<title>QR Code Validation System</title>

<div>
    <h1 style="text-align:center;">QR Code Reader</h1><hr />
</div>

<script src="html5-qrcode.min_.js"></script>
<style>
    .result {
        background-color: green;
        color: #fff;
        padding: 20px;
    }

    .row {
        display: flex;
    }
</style>

<div class="row">
    <div class="col">
        <div style="width:500px;" id="reader"></div>
    </div>
    <div class="col" style="padding:30px;">
        <h4>SCAN RESULT</h4>
        <div>
            <textarea id="txtResult" cols="80" rows="6" name="txtResult"></textarea>
        </div>
        <br /><br /><br />
        <div id="result" style="visibility:hidden">Result Here</div>
    </div>
</div>


<script type="text/javascript">
    function onScanSuccess(qrCodeMessage) {
        document.getElementById('result').innerHTML = '<span class="result">' + qrCodeMessage + '</span>';
        document.getElementById('txtResult').innerHTML = qrCodeMessage;
    }

    function onScanError(errorMessage) {
        document.getElementById('txtResult').innerHTML = errorMessage;//'This QR Is not Valid. Pleas Try Again Latter';
    }

    var html5QrcodeScanner = new Html5QrcodeScanner(
        "reader", { fps: 20, qrbox: 250 });
    html5QrcodeScanner.render(onScanSuccess);//, onScanError

</script>

Also, Can I explicitly declare a 2D scanning format?
Thanks in advance for your help.

[ROBERT-MCDOWELL]

add useBarCodeDetectorIfSupported: true in your constructor.

[ehabnady]

Thank you for your response, it works well, but still I cannot scan a small shape (9mm*9mm), can I configure a qrbox to read this small dimension

[ROBERT-MCDOWELL]

add
showZoomSliderIfSupported: true,
defaultZoomValueIfSupported: 2

[ehabnady]

I added the below statements but this didn't help in capturing the small shape (9mm*9mm)
my code now is like the following:

`<script type="text/javascript">
function onScanSuccess(qrCodeMessage) {
document.getElementById('txtResult').innerHTML = qrCodeMessage;

        /**Play sound**/
        const audio = new Audio("Audio/KbdSpacebar.wav");
        audio.play();
    }

    var html5QrcodeScanner = new Html5QrcodeScanner
        ("reader", {
            fps: 20,                
            qrbox: 250,
            useBarCodeDetectorIfSupported: true,
            willReadFrequently: true,
            showZoomSliderIfSupported: true,
            defaultZoomValueIfSupported: 5,
        });

    html5QrcodeScanner.render(onScanSuccess);
</script>`

[ROBERT-MCDOWELL]

so you qr code is too small and/or bad quality. did you try it at scanapp.org?

[ehabnady]

so you qr code is too small and/or bad quality. did you try it at scanapp.org?

Yes, 2D data matrix dimensions is (9mm * 9mm) and I tried it at scanapp.org with no success

[ROBERT-MCDOWELL]

so forget it....

[ehabnady]

so forget it....

If so, what are the alternatives I can go to

[ROBERT-MCDOWELL]

dunno,

[janbe30]

I keep getting this error in my React component as soon the page is rendered.. Based on this thread, should I not use the onScanFailure callback? What is the recommended approach to catch errors when scanning if so?

  useEffect(() => {
    const onScanSuccess = (decodedText, decodedResult) => {
      setScannedCode((s) => s.concat([{ decodedText, decodedResult }]));
      qrCodeScanner.current?.pause();
      dispatch(codeCaptured(decodedText));
    };

    const onScanFailure = (error) => {
      setScanError(error);
      console.warn(`Code scan error= ${error}`);
    };

    setTimeout(() => {
      let scanner = new Html5QrcodeScanner('reader', config, false);
      setScannedCode([]);
      setScanError('');
      qrCodeScanner.current = scanner;
      scanner.render(onScanSuccess, onScanFailure);
    }, 1000);

    return () => {
      qrCodeScanner.current?.clear();
    };
  }, []);

[ROBERT-MCDOWELL]

comment all code inside onScanFailure as it fires every frame.... a message error will appear out of onScanFailure if it's not a success.

[saeedeht]

i keep getting this QR code parse error, error = NotFoundException: No MultiFormat Readers were able to detect the code. can any one help ? this is what i install "html5-qrcode": "^2.3.8",

[AkshatJain12]

comment all code inside onScanFailure as it fires every frame.... a message error will appear out of onScanFailure if it's not a success.

Sorry, what do you mean "a message error will appear out of onScanFailure if it's not a success."