react-qr-reader
react-qr-reader copied to clipboard
JodusNodus
Stop the camera after closing
You must should close it after scanning, for the moment we cannot close the stream output of camera. Is a good purpose
What i succeded with for stopping the camera was having this:
ReactDOM.unmountComponentAtNode(component)
So you have to unmount the component.
I was able to create a ref and call myRef.current.stopCamera();. I'm not quite sure how to restart it after it's been stopped though.
I was able to create a
refand callmyRef.current.stopCamera();. I'm not quite sure how to restart it after it's been stopped though.
I don't see any stopCamera in their documentation, May I know where did you get that?
I was able to create a
refand callmyRef.current.stopCamera();. I'm not quite sure how to restart it after it's been stopped though.I don't see any stopCamera in their documentation, May I know where did you get that?
I added the ref and just console.log'd it to see if there were any available functions on the ref.
Even i have requirement to disengage the web cam after scanning the QR, let us know will this be fixed or not.
You have to unmount the component since the author will stop the camera and remove the onScan event listener when the component is unmounted. Change your code from:
<QrReader />
to
{!isUnmounted && <QrReader />}
This works for me.
@eddiechok , it didn't work for me. my reader component gets unmounted, but the camera remains on, Guys, any other ideas on such an obvious problem?
@JonatanSalas , the one that has been installed be default - "3.0.0-beta-1". I forgot to mention the issue was happening in Chrome on my laptop (which is my development environment).
Replicated the same error on a modal. Modal destroys on close and unmounts but camera stays on.
Replicated the same error on a modal. Modal destroys on close and unmounts but camera stays on.
Is your problem solved? If solved please tell me how to solve because I also use modals. The flash still on and runs continuously untill refresh the page
Hello, when you want to close the stream add the following.
try { navigator.getUserMedia({ audio: false, video: true }, function (stream) { var track = stream.getTracks()[0]; // if only one media track track.stop(); }, function (error) { console.log('getUserMedia() error', error); }); } catch (e) { }
Yea, same issue, it keeps calling onResult forever, even with component unmounted.
The listener is never removed.
I worked around it by adding a useRef to stop returning the result over and over.
// Wrapper component
function Wrapper () {
const [shouldRender, setShouldRender] = useState(false)
return (
<>
{ shouldRender && <QRCodeReader />}
<button onClick={() => setShouldRender(true)}>
Render QR Reader
</button>
</>
)
}
// QR Code Reader component
function QRCodeReader ({ onResult }) {
const lastResult = useRef()
const onReadResult = (result, error) => {
if (!result) return;
// This callback will keep existing even after
// this component is unmounted
// So ignore it (only in this reference) if result keeps repeating
if (lastResult.current === result.text) {
return
}
lastResult.current = result.text;
onResult(result.text);
};
return (
<QrReader onResult={onReadResult} />
)
}
In the previous version it used to work, you can go back to v2.2 as mentioned in: https://github.com/react-qr-reader/react-qr-reader/issues/271
It didn't work for me, I used https://nimiq.github.io/qr-scanner/ instead and working fine.
Any update on this? is this solved?
I've successfully close the scanner with this implementation:
NOTE: I removed React StrictMode. And if you need to host your app in the future, you need to be in "HTTPS".
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { QrReader } from "react-qr-reader";
const ScanQR = () => {
const [isShown, setShowQr] = useState(true);
const [scanResult, setScanResult] = useState(null);
const navigate = useNavigate();
const closePage = () => {
// IMPORTANT! This is the magic to stop the qr reader.
setShowQr(false);
// you can change the path
navigate("/path_to_somewhere");
}
return (
<>
{/* If you wish to stop the qr reader when going back to the previous page.*/}
<button onClick={() => closePage()}>Back</button>
{/* Or, implement a switch mechanism. */}
<button onClick={() => setShowQr(!showQr)}>{isShown ? 'Stop' : 'Start'}</button>
{isShown && (
<QrReader
onResult={(res, err) => {
if (!!res) {
// Fetch the result.
// Note: QR reader will also stop after scanning.
setScanResult(res?.text);
// you can add some logic here e.g., redirect to other pages after scanning etc.
}
if (!!err) {
console.info(err);
}
}}
/>
)}
</>
);
};
export default ScanQR;
I got into this issue where the camera stream was not terminated, even if the component had been unmounted. My discovery is that this is probably due to React strictMode where the rendering happened twice. This issue goes away in production in my case. (Since strict mode only renders twice in dev mode)
@jengkhaw95 Thank you. I removed StrictMode and the camera turn off when the component unmount
I've successfully close the scanner with this implementation:
NOTE: I removed React StrictMode. And if you need to host your app in the future, you need to be in "HTTPS".
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { QrReader } from "react-qr-reader";
const ScanQR = () => {
const [isShown, setShowQr] = useState(true);
const [scanResult, setScanResult] = useState(null);
const navigate = useNavigate();
const closePage = () => {
// IMPORTANT! This is the magic to stop the qr reader.
setShowQr(false);
// you can change the path
navigate("/path_to_somewhere");
}
return (
<>
{/* If you wish to stop the qr reader when going back to the previous page.*/}
<button onClick={() => closePage()}>Back</button>
{/* Or, implement a switch mechanism. */}
<button onClick={() => setShowQr(!showQr)}>{isShown ? 'Stop' : 'Start'}</button>
{isShown && (
<QrReader
onResult={(res, err) => {
if (!!res) {
// Fetch the result.
// Note: QR reader will also stop after scanning.
setScanResult(res?.text);
// you can add some logic here e.g., redirect to other pages after scanning etc.
}
if (!!err) {
console.info(err);
}
}}
/>
)}
</>
);
};
export default ScanQR;
I got into this issue where the camera stream was not terminated, even if the component had been unmounted. My discovery is that this is probably due to React strictMode where the rendering happened twice. This issue goes away in production in my case. (Since strict mode only renders twice in dev mode)
Thank you so much, this was driving me insane.
