bug:camera in browser keeps on scanning about react-qr-scanner

[palat-inc]

The bug is reproduced. QrScanner component doesn't present in DOM, but camera is still working. tracker={false} doesn't affect anything.

[yoonh12]

I'm not able to replicate this issue in Chrome or Safari. Could you provide an example with the issue?

I took a video and uploaded it on YouTube. Here's the link: https://www.youtube.com/watch?v=D9boAG1DInY
(you should look at the webcam LED status on the laptop. It doesn't turn off even after I go back. And the QrScanner is actually working at that moment.)

[sojib-lowp]

I am getting this console error on unmount of QRScanner container component.

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
    at e2.makeBufferFromCanvasImageData (http://192.168.68.110:3000/node_modules/.vite/deps/@yudiel_react-qr-scanner.js?v=687bf47f:1354:34)
    at new e2 (http://192.168.68.110:3000/node_modules/.vite/deps/@yudiel_react-qr-scanner.js?v=687bf47f:1351:72)
    at t2.createBinaryBitmap (http://192.168.68.110:3000/node_modules/.vite/deps/@yudiel_react-qr-scanner.js?v=687bf47f:1877:46)
    at t2.decode (http://192.168.68.110:3000/node_modules/.vite/deps/@yudiel_react-qr-scanner.js?v=687bf47f:1873:19)
    at n2 (http://192.168.68.110:3000/node_modules/.vite/deps/@yudiel_react-qr-scanner.js?v=687bf47f:1865:23)

Just before this error I also get some warnings like this:

BrowserCodeReader.js:527 It was not possible to play the video.

and

BrowserCodeReader.js:515 Trying to play video that is already playing.

[yudielcurbelo]

Could you provide a code sandbox with the issue on hand?

After QrScanner is unmounted it will not exist anymore in the dom.

[Rehankhalil462]

By providing tracker={false} property to the QRScanner component, it solved the problem. Thanks for your fast reply.

[yoonh12]

I'm having the same problem. But in my case, if I try to go back in the browser before the QrScanner component loads the video (or perhaps the camera device) completely, the camera device still works. So, I need to refresh the entire website to turn off it. (Interestingly, it works well in FireFox)

[Rehankhalil462]

@yoonh12 yes. right. It keeps on scanning under the hood unless we refresh the browser or unmount the component. Or after successful scan, you can turn the camera off by just providing tracker={false} property in the QRScanner component.

[yoonh12]

@yoonh12 yes. right. It keeps on scanning under the hood unless we refresh the browser or unmount the component. Or after successful scan, you can turn the camera off by just providing tracker={false} property in the QRScanner component.

I've already gave that prop but it didn't help.

[yudielcurbelo]

I'm not able to replicate this issue in Chrome or Safari. Could you provide an example with the issue?

[yoonh12]

The bug is reproduced. QrScanner component doesn't present in DOM, but camera is still working. tracker={false} doesn't affect anything.

Yes. I really want to fix this bug. but I don't know how :(

[raghupviyer]

Can you add a button for start and stop scanning or give us an api to implement it, to start the camera and stop it whenever we require it ... like in html5-qrcode, that feature could solve the issue

edit: oh sorry, tracker is the prop to handle that ... thanks

[mohamedamara1]

I am getting this console error on unmount of QRScanner container component.

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
    at e2.makeBufferFromCanvasImageData (http://192.168.68.110:3000/node_modules/.vite/deps/@yudiel_react-qr-scanner.js?v=687bf47f:1354:34)
    at new e2 (http://192.168.68.110:3000/node_modules/.vite/deps/@yudiel_react-qr-scanner.js?v=687bf47f:1351:72)
    at t2.createBinaryBitmap (http://192.168.68.110:3000/node_modules/.vite/deps/@yudiel_react-qr-scanner.js?v=687bf47f:1877:46)
    at t2.decode (http://192.168.68.110:3000/node_modules/.vite/deps/@yudiel_react-qr-scanner.js?v=687bf47f:1873:19)
    at n2 (http://192.168.68.110:3000/node_modules/.vite/deps/@yudiel_react-qr-scanner.js?v=687bf47f:1865:23)

Just before this error I also get some warnings like this:

BrowserCodeReader.js:527 It was not possible to play the video.

and

BrowserCodeReader.js:515 Trying to play video that is already playing.

I'm getting this too BrowserCodeReader.js:515 Trying to play video that is already playing. after trying to turn back on the camera after turning it off with tracker={false}, which means it was already on

[yudielcurbelo]

Could you try it using localhost or https. By your error I see that you are using http.