Last active
November 28, 2024 00:45
-
-
Save simbathesailor/40988ca6bf8fbc7a26073648bf36be8e to your computer and use it in GitHub Desktop.
useQRCodeScan.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function useQRCodeScan({ | |
qrcodeMountNodeID = "", | |
closeAfterScan = true, | |
getQrBoxDimension, | |
}) { | |
const [decodedQRData, setDecodedQrData] = useState({ | |
isScanning: false, | |
isScanSuccess: false, | |
isScanFailure: false, | |
data: null, | |
error: "", | |
}); | |
const html5QrCodeScannerRef = React.useRef(null); | |
// unmount logic | |
useEffect(() => { | |
return () => { | |
if (html5QrCodeScannerRef.current) { | |
html5QrCodeScannerRef.current | |
?.stop() | |
?.then((ignore) => { | |
// QR Code scanning is stopped | |
console.log("stopped after successful scan"); | |
}) | |
?.catch((err) => { | |
// Stop failed, handle it. | |
console.log("fails to stop after successfull scan result "); | |
}); | |
} | |
}; | |
}, []); | |
function stopQrCode() { | |
if (html5QrCodeScannerRef.current) { | |
html5QrCodeScannerRef.current | |
?.stop() | |
?.then((ignore) => { | |
// QR Code scanning is stopped | |
console.log("stopped after successful scan"); | |
}) | |
?.catch((err) => { | |
// Stop failed, handle it. | |
console.log("fails to stop after successfull scan result "); | |
}); | |
} | |
} | |
function startQrCode() { | |
try { | |
setDecodedQrData({ | |
...decodedQRData, | |
isScanning: true, | |
data: null, | |
}); | |
// eslint-disable-next-line | |
const html5qrCodeScanner = new Html5Qrcode(qrcodeMountNodeID); | |
html5QrCodeScannerRef.current = html5qrCodeScanner; | |
let qrbox = 250; | |
if (getQrBoxDimension) { | |
qrbox = getQrBoxDimension(); | |
} | |
html5qrCodeScanner | |
.start( | |
// { deviceId: { exact: cameraId } }, | |
{ facingMode: "environment" }, | |
{ fps: 100, qrbox, aspectRatio: 1.777778 }, | |
(qrCodeMessage) => { | |
// do something when code is read | |
// console.log('scanned qr code', qrCodeMessage); | |
setDecoderQrData({ | |
...decodedQRData, | |
isScanSuccess: true, | |
isScanning: false, | |
data: qrCodeMessage, | |
error: "", | |
}); | |
if (closeAfterScan) { | |
html5qrCodeScanner | |
.stop() | |
.then((ignore) => { | |
// QR Code scanning is stopped. | |
// setIsOpenCamera(false); | |
console.log("stopped after successful scan"); | |
}) | |
.catch((err) => { | |
// Stop failed, handle it. | |
console.log("fails to stop after succesfull scan result "); | |
}); | |
} | |
}, | |
(errorMessage) => {} | |
) | |
.catch((err) => { | |
setDecoderQrData({ | |
...decodedQRData, | |
isScanSuccess: false, | |
isScanning: false, | |
isScanFailure: true, | |
data: null, | |
error: err || "QR Code parsing failed", | |
}); | |
}); | |
} catch (e) { | |
setDecoderQrData({ | |
...decodedQRData, | |
isScanSuccess: false, | |
isScanning: false, | |
isScanFailure: true, | |
data: null, | |
error: e || "QR Code parsing failed", | |
}); | |
} | |
} | |
return { | |
startQrCode, | |
decodedQRData, | |
stopQrCode, | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Anil,
I am facing the issue with Html5Qrcode availability in global scope in my react typescript app. i am following this article to implement as Hook in my react-typescript app, could you please help me to fix this issue. how can i declare in .d.ts file.
// eslint-disable-next-line
const html5qrCodeScanner = new Html5Qrcode(qrcodeMountNodeID);
How can i fix this issue, i am not getting Html5Qrcode in global scope event after following the complete steps ?
thanks
Viney
vineysharma1102@gmail.com