Camera does not stop scanning

[OneDivZero]

Describe the bug
A call to stopScanning() does not stop scanning im some cases.
Maybe it's a problem, that I'll do this in a timeout-callback.

Reason: I'am doing a pattern-matching on scanned result ... this happens very fast in success-case. For providing a better UX, I add a small timeout for giving interaction-feedback to current user ... before I'll do other stuff in my final implementation.

To Reproduce
Modify Success-Callback this way:

    if(qrCodeMessage == matchingPattern) {
      resultBox.innerHTML = qrCodeMessage; // my test-div
      setTimeout(function() {
        stopScanning();
      }, timeoutAfterScan);
    }

Expected behavior
Should close the stream in any case when invoking stopScanning()

Screenshots
n.a.

Smartphone:

• Device: [e.g. iPhone*]
• OS: [iOS*]
• Browser [safari*]
• Version [*]

Additional context
n.a.

[mebjas]

stopScanning() is a promised based API and may not be instantaneous as it needs to cleanup - on going video stream and scanning.

Would this way help

if(qrCodeMessage == matchingPattern) {
      resultBox.innerHTML = qrCodeMessage; // my test-div
      setTimeout(function() {
        // Some UI transitions indicating stopping
        stopScanning()
           .then(_ => {
                 // UI changes for fully stopped
            })
            .catch(error => {
                // Error UI or fallbacks
            })
      }, timeoutAfterScan);
}

[mebjas]

@OneDivZero is this still happening?

[mebjas]

Marking closed, @OneDivZero - Please feel free to reopen if this is still happening.

[sargearmstrong]

Dears, sorry for reopening. I have similar/related problem that I kindly desire some guidance on, pretty please!

Using html5QrCode 2.0.3, in my qrCodeSuccessCallback.. I am immediately calling html5QrCode.stop() using await and then reactivating it once done with parsing logic.. this works great (visible in code below).

However, I'd like to keep camera off for X seconds (so user can verify parse data before next scan) so I wrapped my call to startScanning() inside setTimeout, but when I do.. I randomly receive this error:

Uncaught (in promise) Cannot clear while scan is ongoing, close it first.

I'm confident the scanner is stopped before calling startScanning (in both working/non-working scenarios).. I just don't understand how SetTimeout introduces the error.

Thank you kindly for the library, and your insight.

function startScanning() {
	html5QrCode.start({facingMode: "environment"}, { fps: 10}, 
	async qrCodeMessage => {
		await stopScanning();
		//parse & display logic here
		//startScanning();  //this works, camera re-activates really fast
		setTimeout(function () {  //but if I use this instead, it randomly errors on next scan.. regardless of interval
			startScanning();
		}, 100); //errors occur at 100ms, 3000ms, 10000ms
	}, errorMessage => {}).catch(err => { console.log(err); });
}