changed whole 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="initCamera()" wire:ignore class="space-y-2">
     <video
         x-ref="video"
         autoplay
@@ -284,12 +284,12 @@ document.addEventListener('DOMContentLoaded', () => {
     <canvas x-ref="canvas" class="hidden"></canvas>
 
     {{-- <img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
-    <img x-ref="snapshot"
+    {{-- <img x-ref="snapshot"
      class="hidden border rounded"
-     style="width: 100%; max-width: 350px; height: auto;">
+     style="width: 100%; max-width: 350px; height: auto;"> --}}
 
 
-    <div class="flex space-x-4 mt-2">
+    {{-- <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="primary" @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>
@@ -301,14 +301,14 @@ document.addEventListener('DOMContentLoaded', () => {
     <input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
     <input type="hidden" x-ref="serialInput" name="serialNumbers">
 
-</div>
+</div> --}}
 
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
+{{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.3/dist/tesseract.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.3/dist/tesseract.min.js"></script> --}}
 
 
-<script>
+{{-- <script>
 function cameraCapture() {
     return {
         stream: null,
@@ -316,10 +316,10 @@ function cameraCapture() {
         photoTaken: false,
         photo1: '',
         textDetectionInterval: null,
-        worker: null,
+        worker: null, --}}
 
 
-        // async initCamera() {
+        {{-- // async initCamera() {
         //     try {
         //         if (this.stream) this.stream.getTracks().forEach(track => track.stop());
 
@@ -563,7 +563,105 @@ function cameraCapture() {
     }
 }
 
+</script> --}}
+
+{{-- //.. --}}
+
+<div x-data="cameraCapture()" x-init="initCamera()" class="relative w-80 h-auto">
+    <video x-ref="video" autoplay playsinline class="border rounded w-80 h-auto"></video>
+    <canvas x-ref="overlay" class="absolute top-0 left-0 w-80 h-auto pointer-events-none"></canvas>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.3/dist/tesseract.min.js"></script>
+
+<script>
+function cameraCapture() {
+    return {
+        stream: null,
+        currentFacingMode: 'user',
+        worker: null,
+        textDetectionInterval: null,
+
+        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);
+                await video.play();
+
+                // Set overlay size
+                const overlay = this.$refs.overlay;
+                overlay.width = video.videoWidth;
+                overlay.height = video.videoHeight;
+
+                // Init Tesseract worker once
+                if (!this.worker) {
+                    this.worker = Tesseract.createWorker({ logger: m => console.log(m) });
+                    await this.worker.load();
+                    await this.worker.loadLanguage('eng');
+                    await this.worker.initialize('eng');
+                }
+
+                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';
+            if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
+            await new Promise(r => setTimeout(r, 300)); // small delay
+            await this.initCamera();
+        },
+
+        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 { data: { words } } = await this.worker.recognize(tempCanvas);
+
+                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("OCR error:", err);
+            }
+        },
+
+        startDetection() {
+            if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
+            this.textDetectionInterval = setInterval(() => this.detectText(), 1000);
+        }
+    }
+}
 </script>
 
 
 
+