Video Error , error = Error getting userMedia, error = NotReadableError:Could not start video source on low end Android devices

[kenfookchoong]

Describe the bug
When you press request permission button.
It will run navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(_ => from static getCameras() method

• which causes the browser to already start accessing the video input. Causing NotReadableError when pressing start scanning after selecting the REAR CAMERA (Front camera has no issues)
• But do note that ONLY slow phones will be affected. Any phones that are slow enough can reproduce this issue in the demo website.

To Reproduce
Steps to reproduce the behavior:

1. Go to the demo website https://blog.minhazav.dev/research/html5-qrcode.html
2. Click on Request Permission and scroll down your notification bar. You will see chrome is already accessing your video input. If your phone is slow enough. Quickly go to point 3
3. Select REAR camera and Press Start scanning while chrome still accessing your video input
4. See error Video Error , error = Error getting userMedia, error = NotReadableError:Could not start video source

To avoid the NonReadableError

1. You have to wait chrome browser to stop accessing the video input after pressing the (request permission button) for around 5 seconds or even more for the notification of chrome accessing your video input is gone at the notification bar! the range of time depends the phone's performance
2. Then you press start scanning after selecting the REAR CAMERA

Expected behavior
See error Video Error , error = Error getting userMedia, error = NotReadableError:Could not start video source

The Fix
Just comment the code shown in the screenshot.
//navigator.mediaDevices.getUserMedia({ audio: false, video: true })
// .then(_ => {
**content
//.catch(err => {
// reject(${err.name} : ${err.message});
//})

Screenshots

Desktop (please complete the following information):
Desktop basically have no issue because PCs are too fast

Smartphone (please complete the following information):

• Device: Huawei Nova 3i, Huawei Honor 10
• OS: EMUI 9.1 for both phones
• Browser [Chrome- 81.0.4044.117 (latest version)]

Additional context
I'm sorry if I raised a wrong issue.

[kenfookchoong]

Good day, I hope my raised issue helps, as you help me by creating this API
Thanks a lot!

[mebjas]

Thanks @kenfookchoong for raising this concern I'll have a deeper look into this.

The reason for calling

navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(_ =>

in request permissions is some browsers in some OS do not give details on the camera name unless user grants permission.

I'll rethink the APIs which would allow you to choose which pattern you want to follow.

[kenfookchoong]

@mebjas
Alright sir!

Now I understand, the reason of that code.
Thanks for pointing out !

Then my suggested fix is not a fix. So sorry

Regards,
Ken

[kenfookchoong]

Hi @mebjas

Here's a simple fix from my end.
Please try it out =)

navigator.mediaDevices.getUserMedia({ audio: false, video: true })
.then(_ => {

I've uncommented my code above then add in
_.getTracks().forEach(videoStream => videoStream.stop());

Regards,
Ken

[OneDivZero]

I can confirm this Issue for Android 7, 8, 9, but not for 10 all using chrome.

[mebjas]

Looking deeper there are two concerns here

1. getCameras() is starting video access while intuitively it shouldn't - it should just get the device names. That's a fair request
2. On low end devices the start() seems to be failing when done quickly after getCameras()

Thanks @kenfookchoong for raising both concerns and @OneDivZero for verifying the behaviours. I was able to reproduce both the issues and would look at both of them.

For better tracking let's keep this thread for (2) and I have created the issue #41 for tracking (1)

[mebjas]

@kenfookchoong @OneDivZero I have sent a PR and deployed the changes already to the demo page - https://blog.minhazav.dev/research/html5-qrcode

Could you verify both the scenarios? I have verified problem (1) to be fixed - @kenfookchoong its very similar to the approach you suggested, thanks for that.

Also for (2) I was not able to reproduce the issue after the fix, can you verify if this is happening now?

Thanks in advance!
Once verified I'll submit the change, and create a new release both here and npm.

[OneDivZero]

I can test and confirm it tommorow, cause I'll do tommorow the final feature-integration in my app.

[keanwalker]

hi guys, this issue was fixed.

[OneDivZero]

@mebjas I can confirm the issue 'Video Error , error = Error getting userMedia, error = NotReadableError:Could not start video source' to be fixed on Android 7. Great!

[kenfookchoong]

hi @mebjas

It is fixed!
nice one !

Thanks!
This is my first time raising an issue on github.
Glad it was fruitful!

Regards,
Ken

[mebjas]

Thanks @kenfookchoong for raising the issue and suggesting the fix!

@OneDivZero thanks again for validating the issue and fix - this has been super helpful in getting the issue to be fixed.

@keanwalker Thanks for validating the issue resolution!

This kind of open source collaboration is really fun :)
Closing this issue!