79 lines
2.2 KiB
TypeScript
Executable File
79 lines
2.2 KiB
TypeScript
Executable File
import { useEffect, useRef, useState } from "react";
|
|
import QrScanner from "qr-scanner";
|
|
|
|
export const QrReader = () => {
|
|
const scanner = useRef<QrScanner>();
|
|
const videoEl = useRef<HTMLVideoElement>(null);
|
|
const qrBoxEl = useRef<HTMLDivElement>(null);
|
|
const [qrOn, setQrOn] = useState<boolean>(true);
|
|
const [scannedResult, setScannedResult] = useState<string | undefined>("");
|
|
|
|
// Success
|
|
const onScanSuccess = (result: QrScanner.ScanResult) => {
|
|
console.log(result);
|
|
setScannedResult(result?.data);
|
|
};
|
|
|
|
// Fail
|
|
const onScanFail = (err: string | Error) => {
|
|
console.log(err);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (videoEl?.current && !scanner.current) {
|
|
scanner.current = new QrScanner(videoEl?.current, onScanSuccess, {
|
|
onDecodeError: onScanFail,
|
|
preferredCamera: "environment",
|
|
highlightScanRegion: true,
|
|
highlightCodeOutline: true,
|
|
overlay: qrBoxEl?.current || undefined,
|
|
});
|
|
|
|
scanner?.current
|
|
?.start()
|
|
.then(() => setQrOn(true))
|
|
.catch((err) => {
|
|
if (err) setQrOn(false);
|
|
});
|
|
}
|
|
|
|
return () => {
|
|
if (!videoEl?.current) {
|
|
scanner?.current?.stop();
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!qrOn)
|
|
alert(
|
|
"Camera is blocked or not accessible. Please allow camera in your browser permissions and Reload."
|
|
);
|
|
}, [qrOn]);
|
|
|
|
return (
|
|
<div className="qr-reader">
|
|
{/* QR */}
|
|
<video ref={videoEl}></video>
|
|
<div ref={qrBoxEl} className="qr-box">
|
|
|
|
</div>
|
|
|
|
{/* Show Data Result if scan is success */}
|
|
{scannedResult && (
|
|
<p
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
zIndex: 99999,
|
|
color: "white",
|
|
}}
|
|
>
|
|
Scanned Result: {scannedResult}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|