latest
This commit is contained in:
parent
416e250ad1
commit
b1c7a4df91
|
|
@ -15,6 +15,7 @@
|
|||
"antd": "^5.17.3",
|
||||
"bootstrap": "^5.3.3",
|
||||
"dotenv": "^16.4.5",
|
||||
"html5-qrcode": "^2.1.5",
|
||||
"react": "^18.3.1",
|
||||
"react-bootstrap": "^2.10.2",
|
||||
"react-dom": "^18.3.1",
|
||||
|
|
@ -3592,6 +3593,11 @@
|
|||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/html5-qrcode": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.1.5.tgz",
|
||||
"integrity": "sha512-3cOA0lPIcKtMd7Sz9BZm5ERAokv5uj35zT3o59LMVF6wLesYJ4WZaD28Z0OPnsfxe4dHGFgZ3RZ1si8f2AfOGw=="
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
|
||||
|
|
@ -8679,6 +8685,11 @@
|
|||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"html5-qrcode": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.1.5.tgz",
|
||||
"integrity": "sha512-3cOA0lPIcKtMd7Sz9BZm5ERAokv5uj35zT3o59LMVF6wLesYJ4WZaD28Z0OPnsfxe4dHGFgZ3RZ1si8f2AfOGw=="
|
||||
},
|
||||
"ignore": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"antd": "^5.17.3",
|
||||
"bootstrap": "^5.3.3",
|
||||
"dotenv": "^16.4.5",
|
||||
"html5-qrcode": "^2.1.5",
|
||||
"react": "^18.3.1",
|
||||
"react-bootstrap": "^2.10.2",
|
||||
"react-dom": "^18.3.1",
|
||||
|
|
|
|||
|
|
@ -1,50 +1,123 @@
|
|||
import React, { useState, useRef, useCallback } from 'react';
|
||||
import Webcam from 'react-webcam';
|
||||
import { QrReader } from 'react-qr-barcode-scanner';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Html5QrcodeScanner } from "html5-qrcode";
|
||||
import { Box } from "@mui/material";
|
||||
import LoadingContainer from "./LoadingContainer";
|
||||
|
||||
const BarcodeScanner = () => {
|
||||
const [hasCameraPermission, setHasCameraPermission] = useState(false);
|
||||
const [barcodeData, setBarcodeData] = useState(null);
|
||||
const webcamRef = useRef(null);
|
||||
const [scanResult, setScanResult] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [barcodeInfo, setBarcodeInfo] = useState([]);
|
||||
const [marksData, setMarksData] = useState([]);
|
||||
|
||||
const handleUserMedia = useCallback(() => {
|
||||
setHasCameraPermission(true);
|
||||
useEffect(() => {
|
||||
const scanner = new Html5QrcodeScanner("reader", {
|
||||
qrbox: {
|
||||
width: 250,
|
||||
height: 250,
|
||||
},
|
||||
fps: 5,
|
||||
});
|
||||
|
||||
const fetchBarcodeData = (result) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const payload = {
|
||||
qrcodeValue: result,
|
||||
};
|
||||
fetch(
|
||||
`${
|
||||
import.meta.env.VITE_REACT_APP_BACKEND_URL
|
||||
}/fetchQrcodeScannedInfo`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
)
|
||||
.then((response) => response.json())
|
||||
.then((responseData) => {
|
||||
setIsLoading(false);
|
||||
if (responseData.status === "success") {
|
||||
setBarcodeInfo(responseData.results);
|
||||
setMarksData(responseData?.marks);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
setIsLoading(false);
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const success = (result) => {
|
||||
scanner.clear();
|
||||
setScanResult(result);
|
||||
fetchBarcodeData(result);
|
||||
};
|
||||
|
||||
const error = (err) => {
|
||||
console.log("Error: ", err);
|
||||
};
|
||||
|
||||
// Ensure the element is in the DOM before initializing the scanner
|
||||
if (document.getElementById("reader")) {
|
||||
scanner.render(success, error);
|
||||
}
|
||||
|
||||
// Cleanup the scanner on component unmount
|
||||
return () => {
|
||||
scanner.clear();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleScan = (result) => {
|
||||
if (result) {
|
||||
setBarcodeData(result.text);
|
||||
}
|
||||
};
|
||||
|
||||
const handleError = (error) => {
|
||||
console.error(error);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Barcode Scanner</h1>
|
||||
{!hasCameraPermission ? (
|
||||
<Webcam
|
||||
audio={false}
|
||||
ref={webcamRef}
|
||||
screenshotFormat="image/jpeg"
|
||||
onUserMedia={handleUserMedia}
|
||||
/>
|
||||
) : (
|
||||
<QrReader
|
||||
onResult={handleScan}
|
||||
onError={handleError}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)}
|
||||
{barcodeData && (
|
||||
<div>
|
||||
<h2>Scanned Barcode:</h2>
|
||||
<p>{barcodeData}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Box className="App">
|
||||
<Box className="d-flex justify-content-center text-light bg-primary rounded py-3">
|
||||
<h1>Welcome to exampaper.vidh.ai</h1>
|
||||
</Box>
|
||||
<Box className="my-3">
|
||||
<Box className="d-none d-md-flex justify-content-center align-items-center w-100">
|
||||
{scanResult ? (
|
||||
<h5>QR : {scanResult}</h5>
|
||||
) : (
|
||||
<div id="reader" style={{ width: "400px", height: "400px" }}></div>
|
||||
)}
|
||||
</Box>
|
||||
<Box className="d-flex d-md-none justify-content-center align-items-center w-100">
|
||||
{scanResult ? (
|
||||
<h5>QR : {scanResult}</h5>
|
||||
) : (
|
||||
<div id="reader" style={{ width: "400px", height: "400px" }}></div>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box className="w-100 d-flex justify-content-center">
|
||||
{barcodeInfo.length > 0 && (
|
||||
<Box className="p-5 w-50 rounded shadow">
|
||||
<h5>Candidate Name: {barcodeInfo[0]?.candidate_name}</h5>
|
||||
<h5>Register Name : {barcodeInfo[0]?.register_number}</h5>
|
||||
<h5>Subject Code : {barcodeInfo[0]?.subject_code}</h5>
|
||||
<h5>Exam center code : {barcodeInfo[0]?.exam_centre_code}</h5>
|
||||
<h5>Exam center : {barcodeInfo[0]?.exam_center}</h5>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box className="w-100 d-flex justify-content-center">
|
||||
{scanResult ? (marksData.length > 0 && barcodeInfo.length > 0 ? (
|
||||
<Box className="p-5 w-50 rounded shadow">
|
||||
<h5>Marks : {marksData[0]?.marks}</h5>
|
||||
<h5>File Scanned Date : {marksData[0]?.file_scanned_date}</h5>
|
||||
<h5>Cover QR code : {marksData[0]?.cover_barcode}</h5>
|
||||
</Box>
|
||||
) : (
|
||||
<Box className="p-5 w-50 rounded shadow">
|
||||
<h5>Marks Data Not Found ..</h5>
|
||||
</Box>
|
||||
)):null}
|
||||
</Box>
|
||||
{isLoading && <LoadingContainer />}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue