2.0b3 continuous scanning even when using with default settings

[rburgst]

Hi
I recently did a yarn upgrade-interactive and for some unknown reason I got the 2.0 version proposed. Anyway, when running it via the following (what I consider to be the default component integration):

  <Scanner
            onResult={onQrCodeReceived}
            onError={error => console.log('scan error', error?.message)}
          />

I do get continuous scanning even though I no longer show a QR code to the camera (so I hear a loud beep every 1s or so).

[vanthao-github]

Same here! Please teach me how to fix it?

[ohager]

I have similar issues: the Scanner continues scanning even when component got unmounted (routing away).
Seems that at https://github.com/yudielcurbelo/react-qr-scanner/blob/dev/src/components/Scanner.tsx#L43
an additional useEffect is required?

useEffect(() => {
 return stopScanning;
}, [])

something like that

This is case where the ref to the scanner should be forwarded and maybe even an useImperativeHandle should be used, to pass more fine-grained control to the dev

[ohager]

Same here! Please teach me how to fix it?

I finally downgraded to V1... btw: the useMediaDevices hook in V1 could be better...it was not returning all I needed - so, I created my own hook:

export const useCameraDevices = () => {
    const {
        data,
        isLoading,
        error
    } = useSWR("detectCameraDevices", async () => {
    
        if(isBrowser){
            const devices = await navigator.mediaDevices.enumerateDevices();
            return devices.filter(({kind}) => kind === "videoinput");
        }
        return []
    })

    return {
        devices: data ?? [],
        isLoading: isLoading,
        error
    }
}

Note that I'm on NextJS 14 with SSR and RSC...and further deps on swr lib

[Tstassin]

Version 1.2.10 !

We experience "continuous scanning" problems too that happen from time to time on an always on QR Scanner kiosk.
The value returned from the scanner when succesfull is an object akin to :

But when the bug happens we get a short string, each second, like :

The bug is hard to track and replicate, the only time we triggered without it happening randomly was just after a succesful scan

[Tstassin]

We can confirm that the bug can happen anytime, after seconds, minutes or hours.
The scanner becomes stuck as if it was scanning the same valid value on repeat and only a refresh of the webpage can reset the state. It's hard to understand how to trigger it, but it seems to be triggered by random movements in front of the camera.

[jakub-sekula]

Are there any ideas on how to fix this?

[Tstassin]

It could be tied to https://github.com/zxing-js/library which is used as dependency, which btw looks in maintenance mode only and has these issues open

• Race condition when the reset function is being called shortly after calling decodeOnceFromVideoDevice() zxing-js/library#589
• repeat decode report "Readers were able to detect the code" zxing-js/library#575

[macornwell]

I don't know if it "fixes" any issues behind the scenes but I've added a timeout, after i've collected a scan result, before I collapse (delete) the component.

It appears to have "fixed" this. (It no longer makes beeping noises, and appears to be off).

 const onScan = text => {
    setData(text)
    setTimeout(() => {
      setEnabled(false)
    }, 1000)
  }

 <Scanner
    onResult={onScan}
    enabled={enabled}
/>

[JoepdeJong]

We experienced similar issues. We solved it by enabling the scanner in useEffect:

function App() {
  const navigate = useNavigate();
  const [enabled, setEnabled] = useState<boolean>(false);

  useEffect(() => {
    setEnabled(true);
  }, []);

  return (
    <LayOut>
      <Scanner
        onResult={(text) => {
          setEnabled(false);
          // DO ACTION
          navigate(`/code/${code}`);
        }}
        onError={(error) => console.error(error)}
        enabled={enabled}
      />
      <div id="scanner-video"></div>
    </LayOut>
  );
}

export default App;

[yudielcurbelo]

This issue should be fixed on 2.0.0-beta.8. There are breaking changes for this beta release.