From f8fda97181e3849db0e612f22da96427156e1769 Mon Sep 17 00:00:00 2001
From: dhanabalan <dhana@example.com>
Date: Sat, 25 Oct 2025 16:40:22 +0530
Subject: [PATCH] changed logic in ocr

---
 .../views/fields/camera-capture.blade.php     | 53 ++++++++++++++-----
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index 7ec32e0..8487d7a 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -820,33 +820,58 @@ function cameraCapture() {
         },
 
         async detectText() {
+            if (this.textDetectionRunning) return;
+            this.textDetectionRunning = true;
+
             const video = this.$refs.video;
             const overlay = this.$refs.overlay;
-            const ctx = overlay.getContext('2d');
 
-            if (!video.videoWidth) return;
+            if (!video.videoWidth) {
+                this.textDetectionRunning = false;
+                return;
+            }
 
+            // Clear old highlights
+            overlay.innerHTML = '';
+
+            // Use small canvas for faster detection
             const tempCanvas = document.createElement('canvas');
-            tempCanvas.width = video.videoWidth;
-            tempCanvas.height = video.videoHeight;
-            const tempCtx = tempCanvas.getContext('2d');
-            tempCtx.drawImage(video, 0, 0);
+            const scale = 0.5;
+            tempCanvas.width = video.videoWidth * scale;
+            tempCanvas.height = video.videoHeight * scale;
+            tempCanvas.getContext('2d').drawImage(video, 0, 0, tempCanvas.width, tempCanvas.height);
 
             try {
-                const result = await Tesseract.recognize(tempCanvas, 'eng');
+                const result = await this.worker.recognize(tempCanvas);
                 const words = result.data.words;
 
-                ctx.clearRect(0, 0, overlay.width, overlay.height);
-                ctx.strokeStyle = 'lime';
-                ctx.lineWidth = 2;
-
                 words.forEach(w => {
                     if (!w.bbox || w.confidence < 50) return;
-                    const { x0, y0, x1, y1 } = w.bbox;
-                    ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
+
+                    // Scale back to full video
+                    const scaleX = 1 / scale;
+                    const scaleY = 1 / scale;
+
+                    const div = document.createElement('div');
+                    div.textContent = w.text;
+                    div.style.position = 'absolute';
+                    div.style.left = `${w.bbox.x0 * scaleX}px`;
+                    div.style.top = `${w.bbox.y0 * scaleY}px`;
+                    div.style.width = `${(w.bbox.x1 - w.bbox.x0) * scaleX}px`;
+                    div.style.height = `${(w.bbox.y1 - w.bbox.y0) * scaleY}px`;
+                    div.style.backgroundColor = 'rgba(0,255,0,0.3)';
+                    div.style.color = 'black';
+                    div.style.fontSize = `${12 * scaleX}px`;
+                    div.style.pointerEvents = 'auto';
+                    div.style.userSelect = 'text';
+                    div.style.overflow = 'hidden';
+                    overlay.appendChild(div);
                 });
+
             } catch (err) {
-                console.error("Live OCR error:", err);
+                console.error("OCR error:", err);
+            } finally {
+                this.textDetectionRunning = false;
             }
         },