added ocr logic in canvas

resources/views/fields/camera-capture.blade.php

@@ -274,6 +274,13 @@ document.addEventListener('DOMContentLoaded', () => {
         class="border rounded w-80 h-auto"
     ></video>
 
+     <!-- OCR Highlight Layer -->
+    <canvas
+        x-ref="overlay"
+        class="border rounded w-80 h-auto"
+        style="position:absolute; top:0; left:0; pointer-events:none;"
+    ></canvas>
+
     <canvas x-ref="canvas" class="hidden"></canvas>
 
     {{-- <img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
@@ -506,28 +513,34 @@ function cameraCapture() {
             const overlay = this.$refs.overlay;
             const ctx = overlay.getContext("2d");
 
-            // Temp image from video
+            if (!video.videoWidth) return;
+
             const tempCanvas = document.createElement("canvas");
             tempCanvas.width = video.videoWidth;
             tempCanvas.height = video.videoHeight;
             const tempCtx = tempCanvas.getContext("2d");
             tempCtx.drawImage(video, 0, 0);
 
-            const { data: { words } } = await Tesseract.recognize(
+            const result = await Tesseract.recognize(
                 tempCanvas.toDataURL(),
-                "eng"
+                "eng",
+                {
+                    logger: m => console.log(m),
+                    tessedit_char_whitelist: "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+                }
             );
 
+            const words = result.data.words;
             ctx.clearRect(0, 0, overlay.width, overlay.height);
 
             ctx.strokeStyle = "lime";
             ctx.lineWidth = 3;
 
-            words.forEach(word => {
-                if (word.bbox) {
-                    const { x0, y0, x1, y1 } = word.bbox;
+            words.forEach(w => {
+                if (!w.bbox || w.confidence < 70) return; // ✅ Ignore low confidence
+
+                const { x0, y0, x1, y1 } = w.bbox;
                 ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
-                }
             });
         },
                 // startDetection() {
@@ -537,7 +550,7 @@ function cameraCapture() {
             if (this.textDetectionInterval) {
                 clearInterval(this.textDetectionInterval);
             }
-            this.textDetectionInterval = setInterval(() => this.detectText(), 500);
+            this.textDetectionInterval = setInterval(() => this.detectText(), 1000);
         },
 
         // Initialize camera and detection