Update static/js/camera.js

static/js/camera.js

@@ -60,21 +60,38 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     captureBtn.addEventListener('click', () => {
-        fetch('/capture', { method: 'POST' })
-            .then(response => response.json())
-            .then(data => {
-                if (data.status === 'captured') {
-                    video.classList.add('hidden');
-                    capturedImage.src = '/uploads/captured.jpg?' + new Date().getTime();
-                    capturedImage.classList.remove('hidden');
-                    cameraControls.classList.add('hidden');
-                    postCapture.classList.remove('hidden');
-                    if (stream) {
-                        stream.getTracks().forEach(track => track.stop());
-                    }
+    const context = canvas.getContext('2d');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    canvas.toBlob(blob => {
+        const formData = new FormData();
+        formData.append('image', blob, 'captured.jpg');
+
+        fetch('/capture', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'captured') {
+                video.classList.add('hidden');
+                capturedImage.src = '/uploads/captured.jpg?' + new Date().getTime();
+                capturedImage.classList.remove('hidden');
+                cameraControls.classList.add('hidden');
+                postCapture.classList.remove('hidden');
+
+                if (stream) {
+                    stream.getTracks().forEach(track => track.stop());
                 }
-            });
-    });
+            } else {
+                alert(data.message);
+            }
+        });
+    }, 'image/jpeg');
+});
+
 
     retakeBtn.addEventListener('click', () => {
         fetch('/retake', { method: 'POST' })