Added camera capture for ocr

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

@@ -0,0 +1,40 @@
+<div>
+    <video id="video" width="320" height="240" autoplay playsinline style="border:1px solid #ccc;"></video>
+    <br>
+    <button type="button" id="captureBtn" class="mt-2 px-4 py-2 bg-blue-600 text-white rounded">Capture</button>
+    <canvas id="canvas" width="320" height="240" style="display:none;"></canvas>
+    <img id="snapshot" style="margin-top:10px; max-width:100%;">
+    <input type="hidden" id="camera_image" name="{{ $getName() }}">
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const video = document.getElementById('video');
+    const canvas = document.getElementById('canvas');
+    const captureBtn = document.getElementById('captureBtn');
+    const snapshot = document.getElementById('snapshot');
+    const cameraInput = document.getElementById('camera_image');
+
+    async function startCamera() {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: { facingMode: "user" } // front camera
+            });
+            video.srcObject = stream;
+        } catch (err) {
+            console.error("Camera error: ", err);
+            alert("Cannot access camera. Check permissions or HTTPS.");
+        }
+    }
+
+    captureBtn.addEventListener('click', () => {
+        const context = canvas.getContext('2d');
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const dataUrl = canvas.toDataURL('image/png');
+        snapshot.src = dataUrl;
+        cameraInput.value = dataUrl;
+    });
+
+    startCamera();
+});
+</script>