Added to save jpeg image logic in ocr

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

@@ -46,7 +46,7 @@ document.addEventListener('DOMContentLoaded', () => {
     <canvas x-ref="canvas" width="320" height="240" class="hidden"></canvas>
     <img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
 
-    <div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
+    {{-- <div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
     <video
         x-ref="video"
         autoplay
@@ -57,7 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
     <!-- no need to fix width/height here either -->
     <canvas x-ref="canvas" class="hidden"></canvas>
 
-    <img x-ref="snapshot" class="hidden border rounded max-w-full">
+    <img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
 
 
 {{--
@@ -67,12 +67,12 @@ document.addEventListener('DOMContentLoaded', () => {
         <x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
         <x-filament::button color="primary" @click="verify" x-show="photoTaken">Verify</x-filament::button>
     </div> --}}
-    <div class="flex space-x-2 mt-2">
+    {{-- <div class="flex space-x-2 mt-2">
     <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken" class="inline-flex w-auto">Capture</x-filament::button>
     <x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken" class="inline-flex w-auto">Retake</x-filament::button>
     <x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
     <x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
-</div>
+</div> --}}
 
 
 
@@ -81,7 +81,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     {{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
     {{-- <input type="hidden" x-ref="hiddenInput" name="camera_capture"> --}}
-    <input type="hidden" x-ref="hiddenInput" id="camera_capture_field" name="camera_capture_file">
+    {{-- <input type="hidden" x-ref="hiddenInput" id="camera_capture_field" name="camera_capture_file">
 
 </div>
 
@@ -261,21 +261,32 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 }
-</script>
+</script> --}}
 
 
 {{-- //..Another Option --}}
 
-{{-- <div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2">
+<div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
-    <video x-ref="video" width="320" height="240" autoplay playsinline class="border rounded"></video>
+    <video
-    <canvas x-ref="canvas" width="320" height="240" class="hidden"></canvas>
+        x-ref="video"
+        autoplay
+        playsinline
+        class="border rounded w-80 h-auto"
+    ></video>
+
+    <canvas x-ref="canvas" class="hidden"></canvas>
+
+    <img x-ref="snapshot" class="hidden border rounded max-w-full">
 
     <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>
+        <x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
+        <x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
     </div>
 
-    <input type="hidden" x-ref="hiddenInput" name="camera_capture_file_path">
+    <input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
+
 </div>
 
 <script>
@@ -284,17 +295,27 @@ function cameraCapture() {
         stream: null,
         photoTaken: false,
 
+
         async initCamera() {
             try {
-                if (this.stream) this.stream.getTracks().forEach(t => t.stop());
+                if (this.stream) this.stream.getTracks().forEach(track => track.stop());
-                this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
+
+                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. Use HTTPS and allow camera access.");
+                alert("Cannot access camera. Enable permissions or use HTTPS.");
             }
         },
 
+        async switchCamera() {
+            this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
+            await this.initCamera();
+        },
+
         async capturePhoto() {
             const video = this.$refs.video;
             const canvas = this.$refs.canvas;
@@ -306,7 +327,7 @@ function cameraCapture() {
 
             // Convert canvas to file
             canvas.toBlob(async blob => {
-                const file = new File([blob], 'capture.png', { type: 'image/png' });
+                const file = new File([blob], 'capture.jpeg', { type: 'image/jpeg' });
                 console.log("File ready for upload:", file);
 
                 // Upload to temp folder
@@ -326,20 +347,50 @@ function cameraCapture() {
                 } else {
                     alert('Failed to save image.');
                 }
-            }, 'image/png');
+            }, 'image/jpeg');
 
             this.photoTaken = true;
 
             if (this.stream) this.stream.getTracks().forEach(track => track.stop());
         },
 
-        retakePhoto() {
+        // retakePhoto() {
+        //     this.photoTaken = false;
+        //     this.initCamera();
+        // }
+
+        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);
+            }
+        },
+
+        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.initCamera();
+            this.$refs.snapshot.classList.add('hidden');
+            this.$refs.video.classList.remove('hidden');
+            await this.initCamera();
         }
     }
 }
-</script> --}}
+</script>