Using Browser (Samsung Internet, Chrome, Opera Mini, the browser based on Chromium) and Samsung Mobile Phone (A73, S23) Error: NotReadableError: Could not start video source, It's Working with Firefox

[mnasruul-xxi]

I am experiencing an issue when trying to use the html5-qrcode library on Samsung mobile phones (specifically models A73 and S23) with Chromium-based browsers such as Samsung Internet, Chrome, and Opera Mini. The application throws the following error:

NotReadableError: Could not start video source
However, when I use Mozilla Firefox on the same devices, the QR code scanning works perfectly without any errors.

Steps to Reproduce

1. Implement the basic setup of the html5-qrcode library as described in the documentation.
2. Test the implementation on a Samsung mobile phone (A73 or S23) using a Chromium-based browser (Samsung Internet, Chrome, or Opera Mini).
3. Attempt to start the video source for QR code scanning.

Expected Behavior
The video source should start, and the QR code scanner should work as expected.

Actual Behavior
The following error is thrown:

NotReadableError: Could not start video source

Additional Information

• Library Version: [Include the version of html5-qrcode you are using]
• Browsers Tested:

• Samsung Internet
• Chrome:
• Opera Mini
• Mozilla Firefox

• Devices Tested: Samsung A73, Samsung S23
• Operating System: Android [Include version]

Additional Context

• The site is served over HTTPS.
• All necessary permissions for camera access have been granted in the browser and the system settings.
• The issue does not occur when using Mozilla Firefox on the same devices.
• The issue persists across different Chromium-based browsers, indicating a potential issue with how Chromium handles the getUserMedia API on these devices.

Steps Taken to Troubleshoot

• Verified camera permissions in system settings and browser settings.
• Ensured no other applications are using the camera.
• Tested with a simplified version of the html5-qrcode implementation.
• Verified that the site is served over HTTPS.
• Updated all browsers to their latest versions.
• Tested in Incognito Mode to rule out interference from extensions or cached data.

Code Sampel

`import { Html5QrcodeScanner } from 'html5-qrcode';
import React, { useEffect } from 'react';

interface Html5QrcodePluginProps {
fps?: number;
pause?: boolean;
qrbox?: number;
aspectRatio?: number;
disableFlip?: boolean;
verbose?: boolean;
qrCodeSuccessCallback: (decodedText: string, decodedResult: any) => void;
qrCodeErrorCallback?: (errorMessage: string) => void;
showTorchButtonIfSupported?:boolean;
showZoomSliderIfSupported?:boolean;
defaultZoomValueIfSupported?:number;
}

const qrcodeRegionId = "html5qr-code-full-region";

// Creates the configuration object for Html5QrcodeScanner.
const createConfig = (props: Html5QrcodePluginProps) => {
let config: any = {};
if (props.fps) {
config.fps = props.fps;
}
if (props.qrbox) {
config.qrbox = props.qrbox;
}
if (props.aspectRatio) {
config.aspectRatio = props.aspectRatio;
}
if (props.disableFlip !== undefined) {
config.disableFlip = props.disableFlip;
}
if (props.showTorchButtonIfSupported !== undefined) {
config.showTorchButtonIfSupported = props.showTorchButtonIfSupported;
}
if (props.showZoomSliderIfSupported !== undefined) {
config.showZoomSliderIfSupported = props.showZoomSliderIfSupported;
}
if (props.defaultZoomValueIfSupported !== undefined) {
config.defaultZoomValueIfSupported = props.defaultZoomValueIfSupported;
}
config.facingMode = "environment"

return config;

};

const Html5QrcodePlugin: React.FC = (props) => {
useEffect(() => {
// when component mounts
const config = createConfig(props);
const verbose = props.verbose === true;
// Suceess callback is required.
if (!(props.qrCodeSuccessCallback)) {
throw new Error("qrCodeSuccessCallback is required callback.");
}
const html5QrcodeScanner = new Html5QrcodeScanner(qrcodeRegionId, config, verbose);
html5QrcodeScanner.render(props.qrCodeSuccessCallback, props.qrCodeErrorCallback);
return () => {
html5QrcodeScanner.clear().catch(error => {
console.error("Failed to clear html5QrcodeScanner. ", error);
});
};
}, []);

return (
    <div id={qrcodeRegionId} />
);

};

export default Html5QrcodePlugin;
`

[ROBERT-MCDOWELL]

on Android or IOS as long as you don't give camera permission to the App at the OS level so no way to use the camera in the application. html5-qrcode is JavaScript sandbox dependent so your issue has nothing to do with html5-qrcode

[mnasruul]

Hmm, that's basically it, I make sure the browser has access to the camera, I don't need to send the screenshot...