gruhn/vue-qrcode-reader

Tab crashes if stream is left open after scanning a QR code

Closed this issue ยท 18 comments

Describe the bug
A clear and concise description of what the bug is. Can you reproduce this issue with one of the demos?

If you create a qrcode-stream component, scan a qrcode, and then let it sit for about a minute, the tab crashes.
Using the Chrome remote devtools, I am sometimes able to get this message printed to the console

Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': Data cannot be cloned, out of memory.

However, most of the time it prints nothing because it disconnects from the tab.

To Reproduce
Please provide a link to a minimal reproduction of the bug. For example on jsFiddle, CodePen, etc. Please don't attach a ZIP file with your entire code base. I know this is additional effort but if it takes too much time to reproduce your issue you'll likely won't get help at all.

I couldn't get a jsFiddle or CodePen to work because the iframes wouldn't ask to access my camera. However, all you need to do is create a new Vue project and create an App.vue that only has the qrcode-stream component. Then scan a qrcode and wait a few minutes with the stream open.

Using the Decode All example as the main Vue app should do. https://gruhn.github.io/vue-qrcode-reader/demos/DecodeAll.html
It can be challenging to reproduce because it doesn't happen every time. It appears to be a memory error, and thus only crashes the tab when it runs out of memory. How long that takes can vary. I just scan codes for a minute or two and it eventually crashes.

It does not appear to happen if I leave it open without having scanned a QR code.

Smartphone (please complete the following information):

  • Device: Pixel 4
  • OS: Android 11
  • Browser: Chrome
  • Version: 88.0.4324.181
gruhn commented

Hi @TrevinAvery thanks for reporting this. So far I haven't managed to reproduce this but you're right memory issues are always hard to track down. We have a web worker that processes the frames taken from the camera. The error message suggests that the worker is running out of memory. There was a recent change in the code of that worker in v2.3.18. Could you try if you have the same issue with v2.3.17 ?

Just tried v2.3.17. Still crashes.

I did it twice, and it crashed both times. In each case, I brought up the stream and just scanned random qrcodes on google images. Somewhere between 15 and 30 qrcodes, the tab crashed both times. Neither printed anything to the console this time, but the first time the red square tracker was drawn and stayed there for at least 10 seconds before crashing while the video behind it continued to update. It didn't get any more results once it got stuck.

I can try making a separate repo just to fully eliminate anything external in my project.

Ok, I have created a simple repo that should make it possible to reproduce the issue with one slight variation: It does not crash the tab. Instead, the worker throws an out of memory exception and it stops scanning things, while the video continues to work.

It seems the tab crashing is due to the additional load the rest of my application is creating. Regardless, the memory issue is real.

https://github.com/TrevinAvery/vue-qrcode-reader-crash-test

gruhn commented

Thanks. I tried to track memory allocation and look for memory leaks but nothing obvious on my side.

Maybe frames extracted from Pixels camera have too high resolution or something and quickly overwhelm the memory. I thinking of a way to test this.

Hi sir @gruhn thanks for this wonderful repo, any updates on this? I've recently tried your demo site using my webcam and the tab crashes after scanning the QR Code. May we know if there's a timeline on this. Thank you so much.

gruhn commented

There is no timeline for bugs ๐Ÿ˜…

Unfortunately, I can't reproduce this so I'm not sure what to do about it. Since you're the second person to report issues in a short time maybe it's an issue with v2.3.17. You could try to downgrade to: v2.3.16.

There is no timeline for bugs

Unfortunately, I can't reproduce this so I'm not sure what to do about it. Since you're the second person to report issues in a short time maybe it's an issue with v2.3.17. You could try to downgrade to: v2.3.16.

i have v2.3.16 and the problem has persisted for more than month for :( im testing on my samsung s10+

I have the same problem. After scanning a qr code and leaving the stream running even with just a black screen the tab will crash after some time. I attached a Chrome performance profile of the library running on my OnePlus 3. I'm not that familiar with the Chrome DevTools so maybe anyone else can gather some insights out of this. The only thing I saw at first glance was the amount of listeners steadily rising until it flats out and the scanning stops working. At the same time the following error message is printed:

Uncaught (in promise) RangeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Out of memory at ImageData creation
    at o (vendor.js:16630)
    at e (vendor.js:16630)
    at __WEBPACK_DEFAULT_EXPORT__.detect (vendor.js:16630)
    at vendor.js:23231

Profile-20210509T222943.json.zip

Hi there !
Is there a possibility to clear memory after analyzing each frame by the worker ?

gruhn commented

@TheGreenkey thanks for attaching the report that was definitely helpful. Although I also have a hard time making sense of all this data in DevTools.

I'm trying to assemble a minimal reproduction. Do you all have the same problem with this page:

https://gruhn.github.io/vue-qrcode-reader/debug-memory-leak.html

Interestingly, the minimal version you provided crashed after about 20 seconds on my phone before I even could attach the chrome profiler. After I attached it and reloaded the page, it didn't crash anymore. I'll try to make it crash again...

Okay. I got something. But before: this is the first reload, after the initial crash without the chrome profiler, where nothing crashed and nothing stopped working:
Profile-20210521T232118-no-nothing.json.zip

Then I've got a partial "crash" where the scanning stops working, an error is printed to the console but the tab itself is not crashing:
Profile-20210521T234326-partial-crash-scanning-stopped-working.json.zip

And now a real crash where the whole tab crashed without any error message being printed:
Profile-20210521T234555-full-tab-crash.json.zip

Sidenote: It's funny to see the scan message in the console vaguely corresponding to the camera image changes. If something happens then it's coming at full speed. If nothing happens then it just prints periodically but way slower. Sadly, it doesn't always work that way, at least in my limited testing now.

Did someone found a solution for this? I'm having the same problem. It's easy to reproduce on Android.

I have the same probleme on android with chrome, no solutions :/

We encountered the same behavior on chrome android. It crashes after 30 sec.

I have the same problem in chrome on android 13, opera seems to be working. All I need to do is just open the page with QR reader and leave it be for about 80 seconds. I "solved" it by adding an interval that sets the camera to "off" and then to "auto" again every 80 seconds.

This issue has been marked as stale. If there is no further activity it will be closed.

reopen, there wasnt a commit that would fix this