chnage dlogic in ocr

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

@@ -568,17 +568,26 @@ function cameraCapture() {
 {{-- //.. --}}
 
 <div x-data="cameraCapture()" x-init="initCamera()" class="relative w-80 h-auto">
+    <!-- Video Stream -->
     <video x-ref="video" autoplay playsinline class="border rounded w-80 h-auto"></video>
+
+    <!-- Overlay for OCR highlights -->
     <canvas x-ref="overlay" class="absolute top-0 left-0 w-80 h-auto pointer-events-none"></canvas>
+
+    <!-- Switch Camera Button -->
+    <div class="mt-2">
+        <button @click="switchCamera" class="px-4 py-2 bg-blue-600 text-white rounded">Switch Camera</button>
+    </div>
 </div>
 
+<!-- Tesseract.js CDN -->
 <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',
+        currentFacingMode: 'user', // 'user' = front, 'environment' = rear
         worker: null,
         textDetectionInterval: null,
 
@@ -593,7 +602,6 @@ function cameraCapture() {
                 });
 
                 video.srcObject = this.stream;
-
                 await new Promise(resolve => video.onloadedmetadata = resolve);
                 await video.play();
 
@@ -602,7 +610,7 @@ function cameraCapture() {
                 overlay.width = video.videoWidth;
                 overlay.height = video.videoHeight;
 
-                // Init Tesseract worker once
+                // Initialize Tesseract Worker once
                 if (!this.worker) {
                     this.worker = Tesseract.createWorker({ logger: m => console.log(m) });
                     await this.worker.load();
@@ -618,9 +626,19 @@ function cameraCapture() {
         },
 
         async switchCamera() {
+            // Toggle facing mode
             this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
+
+            // Stop previous detection interval
             if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
-            await new Promise(r => setTimeout(r, 300)); // small delay
+
+            // Stop all tracks
+            if (this.stream) this.stream.getTracks().forEach(track => track.stop());
+
+            // Small delay to avoid browser issues
+            await new Promise(r => setTimeout(r, 300));
+
+            // Restart camera
             await this.initCamera();
         },
 
@@ -631,6 +649,7 @@ function cameraCapture() {
 
             if (!video.videoWidth) return;
 
+            // Draw current frame on temp canvas
             const tempCanvas = document.createElement('canvas');
             tempCanvas.width = video.videoWidth;
             tempCanvas.height = video.videoHeight;
@@ -640,7 +659,9 @@ function cameraCapture() {
             try {
                 const { data: { words } } = await this.worker.recognize(tempCanvas);
 
+                // Clear overlay
                 ctx.clearRect(0, 0, overlay.width, overlay.height);
+
                 ctx.strokeStyle = 'lime';
                 ctx.lineWidth = 2;
 
@@ -665,3 +686,5 @@ function cameraCapture() {
 
 
 
+
+