static/js/camera.js

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';
    }
});