ericblade / quagga2

An advanced barcode-scanner written in Javascript and TypeScript - Continuation from https://github.com/serratus/quaggajs
MIT License
766 stars 85 forks source link

Live Video in ionic/angular working erratically #489

Open 188599 opened 1 year ago

188599 commented 1 year ago

I have a couple of apps using this library to read barcodes and QR codes from the camera's live video feed. Last year, we were testing one of these apps before deploying a new update. Some of our testing devices seemed to present a weird issue with the video feed, it would not update unless there was a screen touch or some other event that would lead to Angular's change detection cycle. The devices had varying major versions of the Android OS, and sometimes on a fresh install the camera would work just fine. We ended leaving it as is, seeing that none of our userbase had reported any issues at the time.

More recently though, we have gotten reports that this same issue is occurring on our users' devices.

Since this has been happening in a wildly inconsistent manner, we haven't really found any hint of what may be causing this issue.

After the recent reports, I even made a new blank ionic project to test if this would happen on a clean new project, and I can attest that it does. But again, even after the issue occurring on a specific device, sometimes after a clean new install it goes away. This is the repo I used to test that on the device.

github-actions[bot] commented 1 year ago

Thank you for filing an issue! Please be patient. :-)

188599 commented 1 year ago

Some more insight into this issue after testing I've done the past few days.

Starting off on a fresh install, here's what happens:

  1. On the first access, after requesting for the camera's permission it always works
  2. Switching to another app that's using the same camera and switching back to the app using Quagga, the video feed stops working and you need to restart the app for it to work again, even invoking Quagga.init doesn't work, as it returns this error image
  3. After a restart, this is where the randomness comes it in it seems, the camera will either work fine, or it will present the prior problem, where the video only updates on a touch or similar event (manually dispatching these events doesn't seem to have any effect)

Restarting the app does not fix the issue above, but clearing the app's data, seems to have the same effect as doing a fresh install, and it works the same as it does in the steps above.

Since the problem occurs after switching to a second app that's utilizing the same camera, I figured the problem might be with my app not taking the proper steps to release the camera when going into background mode.

So I modified things around a bit, and made it so every time the app goes into the background I invoke Quagga.stop, and on return I invoke Quagga.init. The first time around, the same thing happens like in the step above, with the main difference being that after the initial hiccup, the app seems to handle fine the switch to other apps using the camera and I have not experienced the bit about the camera feed being stuck anymore on launch.

ericblade commented 1 year ago

Hmm. We could probably add an option to init that if enabled would cause a stop/start when going background/foreground.

Am I understanding that calling stop() when your web app is backgrounded and notified via the Page Visibility API and then start() when it is foreground again, seems to solve the problem?

addEventListener("visibilitychange", (event) => { if (document.visibilityState == 'visible') Quagga.start(); else Quagga.stop(); });

something like that?

188599 commented 1 year ago

Hmm. We could probably add an option to init that if enabled would cause a stop/start when going background/foreground.

Am I understanding that calling stop() when your web app is backgrounded and notified via the Page Visibility API and then start() when it is foreground again, seems to solve the problem?

addEventListener("visibilitychange", (event) => { if (document.visibilityState == 'visible') Quagga.start(); else Quagga.stop(); });

something like that?

That would certainly help, but it doesn't fix the main problem, which seems to be the initial crash I mentioned after switching the other app using the camera, I would do more debugging on that regard but since the Quagga portion of the source code is minified I can't really debug more properly.

ericblade commented 1 year ago

Frankly, I just assume on Android that trying to switch between two apps that have the camera open will break both of them, so I've never tried it :-D

Can you share any specific details about the environment? what version of Android, what other app you're going into? just so i can try to repro similar things .. although i'd guess it probably repros with anything.. probably can just launch the regular Android camera app, use swipe gesture to switch between and see...

188599 commented 1 year ago

I'm running these tests on Android 12, and yes, the regular camera app reproduces the error.

ericblade commented 1 year ago

FWIW, I just got an Android 13 device. I tried to switch back and forth between having the stock Camera app on, and my webapp using Quagga2. It was successfully switching back and forth, even with a second copy of my webapp open in a Chrome tab.

There was a visible pause sometimes, as Android was clearly switching the camera between apps, with the "camera in use" light flickering as it went.

My other Android device is Android 11, I'll have to try there, if I can get it to charge. It took a pretty nasty fall and hasn't worked right since.