My experience with react-qr-reader has been smooth for scanning QR codes, however, I'm having trouble closing the camera after it's been opened. The LED indicator of the camera remains on even when not in use.
I attempted using the getMedia functions, but they create a new instance every time which doesn't solve the issue.
Is there another method to stop the camera? Using state hasn't been effective so far.
import { useState, useEffect, useRef } from "react";
import { QrReader } from "react-qr-reader";
const ScanQrPopUp = ({ handlePopUp, walletAddress }: ScanPopUpInterface) => {
const [address, setAddress] = useState<string>("");
const [isRecording, setIsRecording] = useState<boolean>(true);
useEffect(() => {
walletAddress(address);
setIsRecording(false)
closeCam();
}, [address]);
const closeCam = async () => {
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: true,
});
stream.getTracks().forEach(function (track) {
track.stop();
track.enabled = false;
});
};
return (
<div>
<h1>
Buy
</h1>
{isRecording && (
<div>
<QrReader
onResult={(result, error) => {
if (result) {
setAddress(result?.text);
}
if (!!error) {
console.log(error);
}
}}
style={{ width: "100%" }}
/>
</div>
)}
<p>{address}</p>
</div>
);
};
export default ScanQrPopUp;