Scanner doesn't stop after calling stop and clear

[marcell7]

Describe the Question Currently trying to make html5-qrcode work with React. The problem I'm having is that the camera capture doesn't stop after calling handleStop function. initQRScanner function works as expected. The code I'm using is written below.

// Function that initializes the qrcode scanner
const initQRScanner = async () => {
        const config = createConfig();
        const html5QrcodeScanner = new Html5Qrcode(qrcodeRegionId);
        const devices = await Html5Qrcode.getCameras();

        if (devices && devices.length) {
            const cameraId = devices[0].id;
            await html5QrcodeScanner.start(cameraId, config, onScan, onScanError);
        }
                setScanner(html5QrcodeScanner);
    };

// Function that stops qrcode scanner
const handleStop = async (scanner) => {
        console.log("Stopping");
        await scanner.stop();
        scanner.clear();
    };

// call initQRScanner function on mount and handleStop on unmount 
useEffect(() => {
        initQRScanner();

        return () => {
            handleStop(scanner);
        };
    }, []);

Optional, Environment (please complete the following information):

• Device: PC
• OS: Windows 11
• Browser: Brave

I'm not sure if this is a bug or am I doing something wrong. Any help or a suggestion would be greatly appreciated. Thanks.

[NourAdawi]

try calling the stop function inside the qrCode success callback: onScan, so after the scanner detect the code successfully, it should stop

[parker-codes]

See my comment here