Two cameras appear on reload of page (implementing the scanner as a react component)

[ThorbjoernJensen]

Description
a double camera appears when using the scanner as a react component.
On first load of site, after grating rights to the camera, it only shows one camera, as intended,
On every following load two cameras appear (see attachment)
Clearing the cache makes the problem disappear. but the camera double reappears on new reload.

Windows 11
happens in Chrome, Firefox and Edge
React 18.2.0 using Vite 3.2.3

[ThorbjoernJensen]

Maybe this should have been posted in the react repository.
I found a solutionen. I had to do with the vite build. In the index.js file it used a different render method from react-dom-client, that didnt work with well with the rest of the codebase.

[cinc-b]

Do you maybe know a way to fix that in React too?
If not could u tell me how u exactly fixed it with vite.js?

React 18.2.0
Windows 10
Browser: Firefox, Chrome, Edge

This would be the code snippet if it helps.

const BarcodeScannerPluginRework = () => {
  useEffect(() => {
    // Anything in here is fired on component mount.
    const html5QrCode = new Html5Qrcode(qrcodeId);
    const qrCodeSuccessCallback = (decodedText, decodedResult) => {
      /* handle success */
    };
    const config = { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1.777778};

    // If you want to prefer back camera
    html5QrCode.start(
      { facingMode: "environment" },
      config,
      qrCodeSuccessCallback
    );
    return () => {
      // Anything in here is fired on component unmount.

    };
  }, []);

  return <div id={qrcodeId}></div>;
};

[RobinSCU]

@cinc-b
I had the same problem a minute ago and the problem I saw is that with a code like this the scanner gets initialized at least two times.

To fix it I just moved the const html5QrCode out of the useEffect to hold a global reference.

something like that:

const BarcodeScannerPluginRework = () => {
    let html5QrCode;
    
    useEffect(() => {
        // Anything in here is fired on component mount.
        if(!html5QrCode?.getState()){
            html5QrCode = new Html5Qrcode(qrcodeId);
            const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                /* handle success */
            };
            const config = { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1.777778};

            // If you want to prefer back camera
            html5QrCode.start(
                { facingMode: "environment" },
                config,
                qrCodeSuccessCallback
            );
        }

        return () => {
            // Anything in here is fired on component unmount.

        };
    }, []);

    return <div id={qrcodeId}></div>;
};

currently, it works for me

[cinc-b]

@RobinSCU Ty for ur help. It works now. Could you tell me why it doesnt work if I remove the
if(!html5QrCode?.getState()) statement?

[RobinSCU]

i would say it's because the html5QrCode element gets injected twice in the DOM and with the getState() function we check if the qrCode is already initialized.

Here is a bit of a different approach #500 (comment) it didn't worked for me but maybe for you

[cinc-b]

Ty will take a look!

[vondersam]

The cleanup function needs to be properly called as it is asynchronous:

const QRScanner = (props: Html5QrcodePluginProps) => {
  const scannerRef = useRef<Html5QrcodeScanner | null>(null);
  const isMounted = useRef(true);

  useEffect(() => {
    const startScanning = async (): Promise<Html5QrcodeScanner> => {
      // Initialize and start the QR scanner
      // when component mounts
      const config = createConfig(props);
      const verbose = props.verbose === true;
      // Suceess callback is required.
      if (!props.qrCodeSuccessCallback) {
        throw 'qrCodeSuccessCallback is required callback.';
      }
      const html5QrcodeScanner = new Html5QrcodeScanner(qrcodeRegionId, config, verbose);
      console.log('render html5QrcodeScanner');
      await html5QrcodeScanner.render(props.qrCodeSuccessCallback, props.qrCodeErrorCallback);
      return html5QrcodeScanner;
    };

    const initScanner = async () => {
      if (isMounted.current) {
        scannerRef.current = await startScanning();
      }
    };

    initScanner();

    // cleanup function when component will unmount
    return () => {
      isMounted.current = false;
      const clearScanner = async () => {
        try {
          if (scannerRef.current) await scannerRef.current.clear();
        } catch (error) {
          console.log('Failed to clear html5QrcodeScanner. ', error);
        }
      };
      clearScanner();
    };
  }, [props]);

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

export default QRScanner;```