Create static/js/camera.js

static/js/camera.js

@@ -0,0 +1,81 @@
+let video = document.getElementById('video');
+let canvas = document.getElementById('canvas');
+let openCameraBtn = document.getElementById('openCamera');
+let captureBtn = document.getElementById('capture');
+let toggleCameraBtn = document.getElementById('toggleCamera');
+let retakeBtn = document.getElementById('retake');
+let uploadBtn = document.getElementById('upload');
+let cameraContainer = document.getElementById('cameraContainer');
+let previewContainer = document.getElementById('previewContainer');
+let messageDiv = document.getElementById('message');
+let currentStream = null;
+let facingMode = 'user'; // Default to front camera
+
+async function startCamera() {
+    try {
+        if (currentStream) {
+            currentStream.getTracks().forEach(track => track.stop());
+        }
+        currentStream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: facingMode }
+        });
+        video.srcObject = currentStream;
+        cameraContainer.style.display = 'block';
+        openCameraBtn.style.display = 'none';
+    } catch (err) {
+        messageDiv.textContent = 'Error accessing camera: ' + err.message;
+    }
+}
+
+function stopCamera() {
+    if (currentStream) {
+        currentStream.getTracks().forEach(track => track.stop());
+        currentStream = null;
+    }
+    cameraContainer.style.display = 'none';
+    openCameraBtn.style.display = 'block';
+}
+
+openCameraBtn.addEventListener('click', startCamera);
+
+captureBtn.addEventListener('click', () => {
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+    previewContainer.style.display = 'block';
+    cameraContainer.style.display = 'none';
+    stopCamera();
+});
+
+toggleCameraBtn.addEventListener('click', () => {
+    facingMode = facingMode === 'user' ? 'environment' : 'user';
+    startCamera();
+});
+
+retakeBtn.addEventListener('click', () => {
+    previewContainer.style.display = 'none';
+    startCamera();
+});
+
+uploadBtn.addEventListener('click', async () => {
+    const imageData = canvas.toDataURL('image/jpeg');
+    try {
+        const response = await fetch('/upload', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ image: imageData })
+        });
+        const result = await response.json();
+        messageDiv.textContent = result.message;
+        if (result.status === 'success') {
+            messageDiv.style.color = 'green';
+            previewContainer.style.display = 'none';
+            openCameraBtn.style.display = 'block';
+        } else {
+            messageDiv.style.color = 'red';
+        }
+    } catch (err) {
+        messageDiv.textContent = 'Error uploading image: ' + err.message;
+        messageDiv.style.color = 'red';
+    }
+});