static/script.js

const video = document.getElementById("webcam");
const canvas = document.getElementById("canvas");
const emotionText = document.getElementById("emotion");

async function setupCamera() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = stream;
}

setupCamera();

async function captureFrame() {
    const ctx = canvas.getContext("2d");
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    canvas.toBlob(async (blob) => {
        const formData = new FormData();
        formData.append("frame", blob, "frame.jpg");

        try {
            const res = await fetch("/detect_live", {
                method: "POST",
                body: formData
            });

            const data = await res.json();

            if (data.emotion) {
                emotionText.innerText = `Emotion: ${data.emotion}`;
            }
        } catch (err) {
            console.error(err);
        }
    }, "image/jpeg");
}

// send frame every 400ms
setInterval(captureFrame, 400);