latest

package-lock.json

@@ -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",

package.json

@@ -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",

src/Components/BarcodeScanner.jsx

@@ -1,50 +1,123 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useEffect } from "react";
-import Webcam from 'react-webcam';
+import { Html5QrcodeScanner } from "html5-qrcode";
-import { QrReader } from 'react-qr-barcode-scanner';
+import { Box } from "@mui/material";
+import LoadingContainer from "./LoadingContainer";
 
 const BarcodeScanner = () => {
-  const [hasCameraPermission, setHasCameraPermission] = useState(false);
+  const [scanResult, setScanResult] = useState(null);
-  const [barcodeData, setBarcodeData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
-  const webcamRef = useRef(null);
+  const [barcodeInfo, setBarcodeInfo] = useState([]);
+  const [marksData, setMarksData] = useState([]);
 
-  const handleUserMedia = useCallback(() => {
+  useEffect(() => {
-    setHasCameraPermission(true);
+    const scanner = new Html5QrcodeScanner("reader", {
-  }, []);
+      qrbox: {
+        width: 250,
+        height: 250,
+      },
+      fps: 5,
+    });
 
-  const handleScan = (result) => {
+    const fetchBarcodeData = (result) => {
-    if (result) {
+      setIsLoading(true);
-      setBarcodeData(result.text);
+      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 handleError = (error) => {
+    const success = (result) => {
-    console.error(error);
+      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();
+    };
+  }, []);
+
   return (
-    <div>
+    <Box className="App">
-      <h1>Barcode Scanner</h1>
+      <Box className="d-flex justify-content-center text-light bg-primary rounded py-3">
-      {!hasCameraPermission ? (
+        <h1>Welcome to exampaper.vidh.ai</h1>
-        <Webcam
+      </Box>
-          audio={false}
+      <Box className="my-3">
-          ref={webcamRef}
+        <Box className="d-none d-md-flex justify-content-center align-items-center w-100">
-          screenshotFormat="image/jpeg"
+          {scanResult ? (
-          onUserMedia={handleUserMedia}
+            <h5>QR : {scanResult}</h5>
-        />
           ) : (
-        <QrReader
+            <div id="reader" style={{ width: "400px", height: "400px" }}></div>
-          onResult={handleScan}
-          onError={handleError}
-          style={{ width: '100%' }}
-        />
           )}
-      {barcodeData && (
+        </Box>
-        <div>
+        <Box className="d-flex d-md-none justify-content-center align-items-center w-100">
-          <h2>Scanned Barcode:</h2>
+          {scanResult ? (
-          <p>{barcodeData}</p>
+            <h5>QR : {scanResult}</h5>
-        </div>
+          ) : (
+            <div id="reader" style={{ width: "400px", height: "400px" }}></div>
           )}
-    </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>
   );
 };