added logic in ocr

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

@@ -266,7 +266,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 {{-- //..Another Option --}}
 
-<div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
+<div x-data="cameraCapture()" x-init="init()" wire:ignore class="space-y-2">
     <video
         x-ref="video"
         autoplay
@@ -495,45 +495,46 @@ function cameraCapture() {
         },
 
         async detectText() {
-            // Draw video frame to temporary canvas
+            const video = this.$refs.video;
-            const tempCanvas = document.createElement('canvas');
+            const overlay = this.$refs.overlay;
+            const ctx = overlay.getContext("2d");
+
+            // Draw video frame to temp canvas
+            const tempCanvas = document.createElement("canvas");
             tempCanvas.width = video.videoWidth;
             tempCanvas.height = video.videoHeight;
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext("2d");
-            tempCtx.drawImage(video, 0, 0, tempCanvas.width, tempCanvas.height);
+            tempCtx.drawImage(video, 0, 0);
 
-            // Run Tesseract.js
+            // OCR detection
-            const { data: { words } } = await Tesseract.recognize(tempCanvas.toDataURL(), 'eng');
+            const { data: { words } } = await Tesseract.recognize(
+                tempCanvas.toDataURL(),
+                "eng"
+            );
 
-            // Clear previous overlay
             ctx.clearRect(0, 0, overlay.width, overlay.height);
 
-            // Draw bounding boxes for each detected word
+            ctx.strokeStyle = "red";
-            ctx.strokeStyle = 'red';
             ctx.lineWidth = 2;
-            ctx.font = '18px Arial';
-            ctx.fillStyle = 'red';
 
             words.forEach(word => {
                 if (word.bbox) {
                     const { x0, y0, x1, y1 } = word.bbox;
                     ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
-                    // Optional: draw recognized text
-                    // ctx.fillText(word.text, x0, y0 - 2);
                 }
             });
         },
 
-        // Periodically detect text
+        startDetection() {
-        async startDetection() {
+            setInterval(() => this.detectText(), 700);
-            setInterval(detectText, 500); // every 500ms
         },
 
+
         // Initialize camera and detection
-        (async () => {
+        async init() {
-            await startCamera();
+            await this.initCamera();
-            startDetection();
+            this.startDetection();
-        })();
+        }
     }
 }