changed logic in ocr

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

@@ -567,7 +567,7 @@ function cameraCapture() {
 
 {{-- //.. --}}
 
-<div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="relative space-y-2">
+{{-- <div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="relative space-y-2">
     <!-- Video feed -->
     <video
         x-ref="video"
@@ -593,11 +593,11 @@ function cameraCapture() {
     </div>
 
     <input type="hidden" x-ref="hiddenInput" name="camera_capture_file">
-</div>
+</div> --}}
 
 <!-- Scripts -->
 
-<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.5/dist/tesseract.min.js"></script>
+{{-- <script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.5/dist/tesseract.min.js"></script>
 
 <script>
 function cameraCapture() {
@@ -699,6 +699,164 @@ function cameraCapture() {
         }
     }
 }
+</script> --}}
+
+{{-- .. --}}
+
+<div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="relative space-y-2">
+    <!-- Video feed -->
+    <video
+        x-ref="video"
+        autoplay
+        playsinline
+        class="border rounded w-80 h-auto"
+        style="display:block;"
+    ></video>
+
+    <!-- Overlay canvas for OCR highlight -->
+    <canvas
+        x-ref="overlay"
+        class="border rounded w-80 h-auto"
+        style="position:absolute; top:0; left:0; pointer-events:none;"
+    ></canvas>
+
+    <!-- Hidden canvas for capturing snapshot -->
+    <canvas x-ref="canvas" class="hidden"></canvas>
+
+    <div class="flex space-x-4 mt-2">
+        <x-filament::button color="primary" @click="switchCamera">Switch Camera</x-filament::button>
+        <x-filament::button color="success" @click="capturePhoto">Capture Photo</x-filament::button>
+        <x-filament::button color="warning" @click="verifyPhoto">Verify</x-filament::button>
+    </div>
+
+    <input type="hidden" x-ref="hiddenInput" name="camera_capture_file">
+</div>
+
+<!-- Scripts -->
+<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.5/dist/tesseract.min.js"></script>
+
+<script>
+function cameraCapture() {
+    return {
+        stream: null,
+        currentFacingMode: 'user',
+        textDetectionInterval: null,
+        capturedPhoto: null, // store captured image
+
+        async initCamera() {
+            try {
+                if (this.stream) this.stream.getTracks().forEach(track => track.stop());
+
+                const video = this.$refs.video;
+                this.stream = await navigator.mediaDevices.getUserMedia({
+                    video: { facingMode: this.currentFacingMode }
+                });
+
+                video.srcObject = this.stream;
+                await new Promise(resolve => video.onloadedmetadata = resolve);
+                video.play();
+
+                // Overlay size matches video
+                const overlay = this.$refs.overlay;
+                overlay.width = video.videoWidth;
+                overlay.height = video.videoHeight;
+
+                this.startDetection();
+            } catch (err) {
+                console.error("Camera error:", err);
+                alert("Camera error:\n" + (err.message || err));
+            }
+        },
+
+        async switchCamera() {
+            this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
+            await this.initCamera();
+        },
+
+        async capturePhoto() {
+            const video = this.$refs.video;
+            const canvas = this.$refs.canvas;
+            const ctx = canvas.getContext('2d');
+
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            ctx.drawImage(video, 0, 0);
+
+            const snapshotData = canvas.toDataURL('image/png');
+            this.$refs.hiddenInput.value = snapshotData;
+            this.capturedPhoto = snapshotData; // store for verification
+
+            alert("Photo captured!");
+        },
+
+        async verifyPhoto() {
+            if (!this.capturedPhoto) {
+                alert("Please capture a photo first!");
+                return;
+            }
+
+            try {
+                const img = new Image();
+                img.src = this.capturedPhoto;
+
+                img.onload = async () => {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = img.width;
+                    canvas.height = img.height;
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(img, 0, 0);
+
+                    const result = await Tesseract.recognize(canvas, 'eng', {
+                        logger: m => console.log(m)
+                    });
+
+                    const detectedText = result.data.text.trim();
+                    alert("Detected Text:\n" + (detectedText || "[No text detected]"));
+                }
+            } catch (err) {
+                console.error("OCR verify error:", err);
+                alert("OCR verify failed:\n" + (err.message || err));
+            }
+        },
+
+        async detectText() {
+            const video = this.$refs.video;
+            const overlay = this.$refs.overlay;
+            const ctx = overlay.getContext('2d');
+
+            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);
+
+            try {
+                const result = await Tesseract.recognize(tempCanvas, 'eng');
+                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);
+                });
+            } catch (err) {
+                console.error("Live OCR error:", err);
+            }
+        },
+
+        startDetection() {
+            if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
+            this.textDetectionInterval = setInterval(() => this.detectText(), 1000);
+        }
+    }
+}
 </script>
 
 
@@ -706,3 +864,4 @@ function cameraCapture() {
 
 
 
+