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<Html5QrcodePluginProps> = (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...

[azzimuth]

I have similar issue. Testing on my Galaxy S21 and the browser (Chrome) has access to camera. Yet I also get Error getting userMedia, error = NotReadableError: Could not start video source error and the scanner won't work (no picture from camera). Although Html5Qrcode.getCameras() seems to return 4 cameras.

[amaau]

I have the same issue on chrome, android. The browser has access to the camera - scanapp works perfectly. My straightforward attempt to integrate it into a react app fail with the same error, even though it works on desktop.

The funny thing is, that despite failing with the error, the app does engage my camera - the indicator led turns on, and on a third retry even the actual scanner is opening. on a fourth it fails again, so there are clearly racing conditions, could it be playing bad with react's lifecycles?

[ROBERT-MCDOWELL]

react uses a manifest....

[amaau]

react, not native, using a manifest? what do you mean?