Unable to stop the camera

[Blesha843]

trafficstars

after getting the result , not camera will not stop running. When i change my route/path to another the camera is still running in background. how can i stop running it in background ? any idea ? thanks

[adrianowy]

Hi @Blesha843 , I din't find a way to stop the camera on the version 3.0-beta (check the package.json), so I just downgrade to 2.2.0 (https://github.com/react-qr-reader/react-qr-reader/tree/v2.2.0) and worked normally.

[culda]

If you modify this bit of code, it should work. I won't make a PR since the maintainer seems to be MIA. What I think is happening is the codeReader continues to run after the useEffect cleanup executes IF the cleanup runs while the Promise is pending

      codeReader
        .decodeFromConstraints({ video }, videoId, (result, error) => {
          if (isValidType(onResult, 'onResult', 'function')) {
            if (controlsRef.current === null) {
              throw new Error('Component is unmounted');
            }
            onResult(result, error, codeReader);
          }
        })

[t-lamp11]

@adrianowy Reverting back to 2.2.0 has a dependency error on Windows, are there any other workarounds?

[adrianowy]

@t-lamp11 I haven't this issue because I'm using Linux. But you can try to use Docker with WSL.

[Digonz]

hi, My solution was:

-Create a varible:

//500 is the default delay const [delayScan , setDelayScan] = useState(500);

and in QrReader component:

<QrReader
  `scanDelay={delayScan}`
style={{ width: '100%' }}
constraints={{
facingMode: 'environment'
 }}
onResult={(result, error) => {
 if (!!result) {
console.log(result, "res");
setDelayScan(false)
}
if (!!error) {
 console.log("QrReader:", error);
  }
 }}

I set the "delayScan" to false and that stop the camera when the reader find a QR.

I hope that works for you guys.

[culda]

raised a PR https://github.com/react-qr-reader/react-qr-reader/pull/279 This has fixed the issue for us

[abel1711]

i fix this removing StricMode of react

[ORODeveloper]

Make the ref of the QRReader and stop it after getting the result.

const qrReader = React.createRef();

make function:

   const handleScan = (result, error) => {
        console.log("HAHHAHA");
        
          console.log("Result",result);
        if (!!result) {
          setQrData(result?.text);
          qrReader.current.stop();
        }

        if (!!error) {
          console.info(error);
        }
      };

Here is my Div:

 <div style={{ width: "40%" }}>
                        {qrData == "" ? (
                          <QrReader
                            scanDelay={delayScan}
                            ref={qrReader}
                            onResult={(result, error) =>
                              handleScan(result, error)
                            }
                            style={{ width: "100%" }}
                          />
                        ) : null}
                        <p>{qrData}</p>
                      </div>

[Abhiram010]

Hi @Blesha843 , I din't find a way to stop the camera on the version 3.0-beta (check the package.json), so I just downgrade to 2.2.0 (https://github.com/react-qr-reader/react-qr-reader/tree/v2.2.0) and worked normally.

Thanks a lot for sharing @Blesha843. I was facing this issue to stop using camera as in some Android devices majorly Samsung devices I was unable to access the camera for other components until I stopped using it I tried all ways like revoking the camera access but nothing worked. And the issue was solved by downgrading to 2.2.0