From 03b0df72003e48cdb1225d921e397919fdd87f82 Mon Sep 17 00:00:00 2001
From: srikanth716 <srikanthsri7447@gmail.com>
Date: Thu, 3 Oct 2024 17:07:25 +0530
Subject: [PATCH 1/2] [INJIVER-641] fix lagging on context draw

Signed-off-by: srikanth716 <srikanthsri7447@gmail.com>
---
 .../Home/VerificationSection/QrScanner.tsx    | 68 ++++++++++++-------
 1 file changed, 42 insertions(+), 26 deletions(-)

diff --git a/inji-verify/src/components/Home/VerificationSection/QrScanner.tsx b/inji-verify/src/components/Home/VerificationSection/QrScanner.tsx
index d9b37dd..49e4e10 100644
--- a/inji-verify/src/components/Home/VerificationSection/QrScanner.tsx
+++ b/inji-verify/src/components/Home/VerificationSection/QrScanner.tsx
@@ -19,33 +19,16 @@ function QrScanner() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const videoRef = useRef<HTMLVideoElement>(document.createElement("video"));
   const zxingRef = useRef<any>(null);
+  const [resolution, setResolution] = useState("720p");
   const [zoomLevel, setZoomLevel] = useState(0);
   const scannerRef = useRef<HTMLDivElement>(null);
 
   const readBarcodeFromCanvas = useCallback(
     (canvas: HTMLCanvasElement) => {
-      if (!canvas.width && !canvas.height) return;
-      else if (canvas && zxingRef.current) {
-        const zoom = zoomLevel === 0 ? 1 : zoomLevel;
-        const video = videoRef.current;
+      if (canvas && zxingRef.current) {
         const imgWidth = canvas.width;
         const imgHeight = canvas.height;
         const ctx = canvas.getContext("2d", { willReadFrequently: true });
-        const zoomedWidth = imgWidth / zoom;
-        const zoomedHeight = imgHeight / zoom;
-        const offsetX = (imgWidth - zoomedWidth) / 2;
-        const offsetY = (imgHeight - zoomedHeight) / 2;
-        ctx?.drawImage(
-          video,
-          offsetX,
-          offsetY,
-          zoomedWidth,
-          zoomedHeight,
-          0,
-          0,
-          canvas.width,
-          canvas.height
-        );
         const imageData = ctx?.getImageData(0, 0, imgWidth, imgHeight);
         const sourceBuffer = imageData?.data;
 
@@ -74,30 +57,49 @@ function QrScanner() {
         }
       }
     },
-    [dispatch, zoomLevel]
+    [dispatch]
   );
 
   const processFrame = useCallback(() => {
     const canvas = canvasRef.current;
     const video = videoRef.current;
+    const zoom = 1 + zoomLevel / 10;
+
     if (canvas && video) {
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
+      canvas.width = canvas.clientWidth;
+      canvas.height = canvas.clientHeight;
       const ctx = canvas.getContext("2d", { willReadFrequently: true });
+      ctx?.scale(zoom, zoom);
       ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
       readBarcodeFromCanvas(canvas);
     }
     requestAnimationFrame(processFrame);
-  }, [readBarcodeFromCanvas]);
+  }, [readBarcodeFromCanvas, zoomLevel]);
 
   const startVideoStream = useCallback(() => {
     const constraints: MediaStreamConstraints = {
       video: {
         facingMode: "environment",
-        width: { ideal: 3840 },
-        height: { ideal: 2160 },
+        frameRate: { ideal: 30 },
       },
     };
+    // Add constraints for specific resolution
+    if (resolution) {
+      const [width, height] =
+        resolution === "2160p"
+          ? [3840, 2160]
+          : resolution === "1440p"
+          ? [2560, 1440]
+          : resolution === "1080p"
+          ? [1920, 1080]
+          : resolution === "720p"
+          ? [1280, 720]
+          : [0, 0];
+      constraints.video = {
+        width: { ideal: width },
+        height: { ideal: height },
+      };
+    }
 
     navigator.mediaDevices
       .getUserMedia(constraints)
@@ -115,7 +117,7 @@ function QrScanner() {
         setIsCameraBlocked(true);
         console.error("Error accessing camera:", error);
       });
-  }, [processFrame]);
+  }, [processFrame, resolution]);
 
   const stopVideoStream = () => {
     if (videoRef.current.srcObject) {
@@ -159,6 +161,20 @@ function QrScanner() {
   const handleSliderChange = (value: number) => {
     if (value >= 0 && value <= 10) {
       setZoomLevel(value);
+
+      switch (value) {
+        case 4:
+          setResolution("1080p");
+          break;
+        case 6:
+          setResolution("1440p");
+          break;
+        case 8:
+          setResolution("2160p");
+          break;
+        default:
+          break;
+      }
     }
   };
 

From f032cc45f38a8121aee0dd258f766e6db21da108 Mon Sep 17 00:00:00 2001
From: srikanth716 <srikanthsri7447@gmail.com>
Date: Thu, 3 Oct 2024 17:47:40 +0530
Subject: [PATCH 2/2] [INJIVER-641] fix lagging on context draw

Signed-off-by: srikanth716 <srikanthsri7447@gmail.com>
---
 .../src/components/Home/VerificationSection/QrScanner.tsx   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/inji-verify/src/components/Home/VerificationSection/QrScanner.tsx b/inji-verify/src/components/Home/VerificationSection/QrScanner.tsx
index 49e4e10..6a3e23c 100644
--- a/inji-verify/src/components/Home/VerificationSection/QrScanner.tsx
+++ b/inji-verify/src/components/Home/VerificationSection/QrScanner.tsx
@@ -69,7 +69,13 @@ function QrScanner() {
       canvas.width = canvas.clientWidth;
       canvas.height = canvas.clientHeight;
       const ctx = canvas.getContext("2d", { willReadFrequently: true });
+      ctx?.clearRect(0, 0, canvas.width, canvas.height);
+      const canvasCenterX = canvas.width / 2;
+      const canvasCenterY = canvas.height / 2;
+      ctx?.save();
+      ctx?.translate(canvasCenterX, canvasCenterY);
       ctx?.scale(zoom, zoom);
+      ctx?.translate(-canvasCenterX, -canvasCenterY);
       ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
       readBarcodeFromCanvas(canvas);
     }