Error getting userMedia, error = NotReadableError:Could not start video source

[mpn7]

Describe the bug
I think this is the same error as reported in #38. In my samsung S7 running android 8 this error appears when I execute start() quickly after getCameras(). The same does not happen in my oneplus 6 running android 11.

I call getCameras() only to ask permission. I don't use the cameraID's, if there's a better way to ask permission I would appreciate.

To Reproduce
Steps to reproduce the behavior:
Run getCameras() and start() in quick sucession in a low end android phone

Desktop (please complete the following information):

• OS: Android
• Browser: Chrome

Smartphone (please complete the following information):

• Device: Samsung S7
• OS: Android 8
• Browser Chrome

[ROBERT-MCDOWELL]

you certainly have an Android or Browser restriction somewhere. try to see on your Android settings if Chrome is allowed to use your camera

[mpn7]

The camera works when I remove getCameras(). But I need to call it because it's the only way to ask permission to use the camera. If the user already gave permission without calling getCameras() it works fine

[ROBERT-MCDOWELL]

maybe there is something wrong with your samsung phone. it takes maybe more time for the camera to get initialized.
try another phone to see if it's the same. It would be interesting to update the project code with a promise() as camera and audio are mechanic stuff

[mpn7]

I've also tried with a Xiaomi Redmi Note 9s and it gives me the same error.
With my Oneplus 6 it works fine.

This is a screenshot of the error:

[ROBERT-MCDOWELL]

this sounds more a camera focus issue. try to modify your constraints and aspect ratio like this
aspectRatio:1,focusMode:"continuous",formatsToSupport:exchange_scannerFormats,advanced:[{zoom:isMobile.Android ? 1.5 : 2.0}],experimentalFeatures:{useBarCodeDetectorIfSupported:true

[mpn7]

My config is like this:

const config = { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1, focusMode:"continuous"};

It's still not working.

[ROBERT-MCDOWELL]

try the config I told you above. also is your issue concern one QR code or all you scan?

[mpn7]

I changed the config to this:

const formatsToSupport = [
        Html5QrcodeSupportedFormats.QR_CODE,
        Html5QrcodeSupportedFormats.UPC_A,
        Html5QrcodeSupportedFormats.UPC_E,
        Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION,
];
const config = { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1, focusMode:"continuous",formatsToSupport:formatsToSupport,advanced:[{zoom: 1.5}],experimentalFeatures:{useBarCodeDetectorIfSupported:true}};

This error happens on camera start, so I can't even scan any QR codes. The camera doesn't appear.

I'll leave the whole code here:

html5QrCode = new Html5Qrcode("reader");
    Html5Qrcode.getCameras().then(devices => {
        //ask permissions
    }).catch(err => {
        alert(err);
    });
	const qrCodeSuccessCallback = (decodedText, decodedResult) => {
	
        //do stuff
	};
    const formatsToSupport = [
        Html5QrcodeSupportedFormats.QR_CODE,
        Html5QrcodeSupportedFormats.UPC_A,
        Html5QrcodeSupportedFormats.UPC_E,
        Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION,
      ];
	const config = { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1, focusMode:"continuous",formatsToSupport:formatsToSupport,advanced:[{zoom: 1.5}],experimentalFeatures:{useBarCodeDetectorIfSupported:true}};
	
	// If you want to prefer Back camera
	html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback).catch(err => {
        alert(err);
    });

[ROBERT-MCDOWELL]

html5QrCode.start([CAMERA ID], config, qrCodeSuccessCallback).catch(err => ....

[mpn7]

It doesn't give me an error now. But the reason I was using it like that was to force the back camera, is there another way to do that?

[ROBERT-MCDOWELL]

{ facingMode: "environment" } must be in the config, then choose the camera ID of your back camera.

[mpn7]

It's working now! Thank you very much Robert.

[Yyuanbo]

I ran into the same problem, but still failed with the above configuration，
Error getting userMedia, error = NotReadableError:Could not start video source
Smartphone：
Device: IQOO Z5
OS: Android 11
Browser Wechat
I'll leave the whole code here:

this.html5QrCode.start(
              this.cameraId,
              {
                fps: 10,
                qrbox: 250, 
                facingMode: "environment",
                aspectRatio: 1.777778, 
                focusMode:"continuous",
                formatsToSupport:[
                  Html5QrcodeSupportedFormats.QR_CODE,
                  Html5QrcodeSupportedFormats.UPC_A,
                  Html5QrcodeSupportedFormats.UPC_E,
                  Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION,
                ],
                advanced:[
                  {zoom: 1.5},
                ],
                experimentalFeatures:{
                  useBarCodeDetectorIfSupported:true,
                }
            },
            qrCodeMessage => {},
            errorMessage => {}
	).catch(err => {
	// Start failed, handle it. 
})