From 1ff84d4fba79969ac40085a2f10f8221dc87652f Mon Sep 17 00:00:00 2001
From: dhanabalan <dhana@example.com>
Date: Fri, 17 Oct 2025 12:02:01 +0530
Subject: [PATCH] Added ne wlogic in ocr blade file

---
 .../views/fields/camera-capture.blade.php     | 222 +++++++++++++++++-
 1 file changed, 209 insertions(+), 13 deletions(-)

diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index 6e28ce8..1c8ea8b 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -39,7 +39,9 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 </script> --}}
 
-<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2">
+
+
+<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2" wire:ignore class="space-y-2">
     <video x-ref="video" width="320" height="240" autoplay playsinline class="border rounded"></video>
     <canvas x-ref="canvas" width="320" height="240" class="hidden"></canvas>
     <img x-ref="snapshot" class="hidden border rounded max-w-full">
@@ -48,25 +50,118 @@ document.addEventListener('DOMContentLoaded', () => {
         <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
         <x-filament::button color="secondary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
         <x-filament::button color="gray" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
+        <x-filament::button color="gray" @click="verify" x-show="photoTaken">Verify</x-filament::button>
     </div>
 
     {{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
-    <input type="hidden" x-ref="hiddenInput" x-model="photo1">
+    {{-- <input type="hidden" x-ref="hiddenInput" name="camera_capture"> --}}
+    <input type="hidden" x-ref="hiddenInput" id="camera_capture_field" name="camera_capture_file">
+
 </div>
 
+
+<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.2/dist/tesseract.min.js"></script>
 <script>
-function cameraCapture() {
+
+    // function cameraCapture()
+    // {
+    //     return
+    //     {
+    //         stream: null,
+    //         currentFacingMode: 'user', // 'user' = front, 'environment' = back
+    //         photoTaken: false,
+    //         photo1: '',
+
+    //         async initCamera() {
+    //             try {
+    //                 if (this.stream) {
+    //                     this.stream.getTracks().forEach(track => track.stop());
+    //                 }
+
+    //                 this.stream = await navigator.mediaDevices.getUserMedia({
+    //                     video: { facingMode: this.currentFacingMode }
+    //                 });
+
+    //                 this.$refs.video.srcObject = this.stream;
+    //             } catch (err) {
+    //                 console.error("Camera error:", err);
+    //                 alert("Cannot access camera. Enable permissions or use HTTPS.");
+    //             }
+    //         },
+
+    //         async switchCamera() {
+    //             this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
+    //             await this.initCamera();
+    //         },
+
+    //         capturePhoto() {
+    //             const video = this.$refs.video;
+    //             const canvas = this.$refs.canvas;
+    //             const snapshot = this.$refs.snapshot;
+    //             const context = canvas.getContext('2d');
+
+    //             context.drawImage(video, 0, 0, canvas.width, canvas.height);
+    //             const dataUrl = canvas.toDataURL('image/png');
+
+    //             // stop camera stream after capture
+    //             if (this.stream) {
+    //                 this.stream.getTracks().forEach(track => track.stop());
+    //             }
+
+    //             snapshot.src = dataUrl;
+    //             snapshot.classList.remove('hidden');
+    //             video.classList.add('hidden');
+    //             this.photoTaken = true;
+
+    //             // this.photo1 = dataUrl;
+    //             this.$refs.hiddenInput.value = dataUrl;
+    //             // @this.set('photo1', dataUrl);
+    //             console.log('Captured Image:', dataUrl);
+    //         },
+
+    //         async verifyOCR(dataUrl) {
+    //             try {
+    //                 const { data: { text } } = await Tesseract.recognize(
+    //                     dataUrl,
+    //                     'eng', // language
+    //                     { logger: m => console.log(m) } // optional
+    //                 );
+    //                 alert("OCR Result: " + text);
+    //             } catch (err) {
+    //                 console.error(err);
+    //                 alert("OCR Failed: " + err.message);
+    //             }
+    //         },
+
+    //         async verify() {
+    //             const dataUrl = this.$refs.hiddenInput.value;
+    //             if (!dataUrl) {
+    //                 alert("No captured image found!");
+    //                 return;
+    //             }
+    //             await this.verifyOCR(dataUrl);
+    //         },
+
+    //         async retakePhoto() {
+    //             this.photoTaken = false;
+    //             this.$refs.snapshot.classList.add('hidden');
+    //             this.$refs.video.classList.remove('hidden');
+    //             await this.initCamera();
+    //         }
+    //     }
+
+    // }
+
+    function cameraCapture() {
     return {
         stream: null,
-        currentFacingMode: 'user', // 'user' = front, 'environment' = back
+        currentFacingMode: 'user',
         photoTaken: false,
         photo1: '',
 
         async initCamera() {
             try {
-                if (this.stream) {
-                    this.stream.getTracks().forEach(track => track.stop());
-                }
+                if (this.stream) this.stream.getTracks().forEach(track => track.stop());
 
                 this.stream = await navigator.mediaDevices.getUserMedia({
                     video: { facingMode: this.currentFacingMode }
@@ -93,22 +188,40 @@ function cameraCapture() {
             context.drawImage(video, 0, 0, canvas.width, canvas.height);
             const dataUrl = canvas.toDataURL('image/png');
 
-            // stop camera stream after capture
-            if (this.stream) {
-                this.stream.getTracks().forEach(track => track.stop());
-            }
+            if (this.stream) this.stream.getTracks().forEach(track => track.stop());
 
             snapshot.src = dataUrl;
             snapshot.classList.remove('hidden');
             video.classList.add('hidden');
             this.photoTaken = true;
 
-            this.photo1 = dataUrl;
             this.$refs.hiddenInput.value = dataUrl;
-            @this.set('photo1', dataUrl);
             console.log('Captured Image:', dataUrl);
         },
 
+        async verifyOCR(dataUrl) {
+            try {
+                const { data: { text } } = await Tesseract.recognize(
+                    dataUrl,
+                    'eng',
+                    { logger: m => console.log(m) }
+                );
+                alert("OCR Result: " + text);
+            } catch (err) {
+                console.error(err);
+                alert("OCR Failed: " + err.message);
+            }
+        },  // <-- COMMA ADDED HERE
+
+        async verify() {
+            const dataUrl = this.$refs.hiddenInput.value;
+            if (!dataUrl) {
+                alert("No captured image found!");
+                return;
+            }
+            await this.verifyOCR(dataUrl);
+        },
+
         async retakePhoto() {
             this.photoTaken = false;
             this.$refs.snapshot.classList.add('hidden');
@@ -117,5 +230,88 @@ function cameraCapture() {
         }
     }
 }
+
+
+
 </script>
 
+
+{{-- //..Another Option --}}
+
+{{-- <div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2">
+    <video x-ref="video" width="320" height="240" autoplay playsinline class="border rounded"></video>
+    <canvas x-ref="canvas" width="320" height="240" class="hidden"></canvas>
+
+    <div class="flex space-x-4 mt-2">
+        <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
+        <x-filament::button color="secondary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
+    </div>
+
+    <input type="hidden" x-ref="hiddenInput" name="camera_capture_file_path">
+</div>
+
+<script>
+function cameraCapture() {
+    return {
+        stream: null,
+        photoTaken: false,
+
+        async initCamera() {
+            try {
+                if (this.stream) this.stream.getTracks().forEach(t => t.stop());
+                this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                this.$refs.video.srcObject = this.stream;
+            } catch (err) {
+                console.error("Camera error:", err);
+                alert("Cannot access camera. Use HTTPS and allow camera access.");
+            }
+        },
+
+        async capturePhoto() {
+            const video = this.$refs.video;
+            const canvas = this.$refs.canvas;
+            const context = canvas.getContext('2d');
+
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+            // Convert canvas to file
+            canvas.toBlob(async blob => {
+                const file = new File([blob], 'capture.png', { type: 'image/png' });
+                console.log("File ready for upload:", file);
+
+                // Upload to temp folder
+                const formData = new FormData();
+                formData.append('photo', file);
+
+                const response = await fetch('/temp-upload', {
+                    method: 'POST',
+                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
+                    body: formData
+                });
+
+                const data = await response.json();
+                if (data.success) {
+                    this.$refs.hiddenInput.value = data.path; // Filament form hidden input
+                    console.log("Saved to temp:", data.path);
+                } else {
+                    alert('Failed to save image.');
+                }
+            }, 'image/png');
+
+            this.photoTaken = true;
+
+            if (this.stream) this.stream.getTracks().forEach(track => track.stop());
+        },
+
+        retakePhoto() {
+            this.photoTaken = false;
+            this.initCamera();
+        }
+    }
+}
+</script> --}}
+
+
+