<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webcam Recorder</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="startRecord">Start Recording</button>
    <button id="stopRecord">Stop Recording</button>
    <button id="save">Save</button>
    <canvas id="canvas" style="display: none;"></canvas>
    <div id="messageArea"></div>

    <script>
        let video = document.getElementById('video');
        let startRecordBtn = document.getElementById('startRecord');
        let stopRecordBtn = document.getElementById('stopRecord');
        let saveBtn = document.getElementById('save');
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let stream;
        let messageArea = document.getElementById('messageArea');
        showMessage('Start', 'success')
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (mediaStream) {
                video.srcObject = mediaStream;
                stream = mediaStream;
            })
            .catch(function (err) {
                showMessage('Could not access the webcam: ' + err, 'error');
            });

        startRecordBtn.onclick = function () {
            showMessage('Recording started', 'success')
            stream.getVideoTracks()[0].requestRecord({ mimeType: 'video/webm' })
                .then(() => showMessage('Recording started', 'success'))
                .catch(err => showMessage('Failed to start recording: ' + err, 'error'));
        };

        stopRecordBtn.onclick = function () {
            stream.getVideoTracks()[0].stopRecord()
                .then(blob => {
                    showMessage('Recording stopped', 'success');
                    let videoURL = URL.createObjectURL(blob);
                    video.src = videoURL;
                })
                .catch(err => showMessage('Failed to stop recording: ' + err, 'error'));
        };

        saveBtn.onclick = function () {
            let data = canvas.toDataURL('image/png');
            fetch('/send_video', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ image: data })
            })
            .then(response => response.json())
            .then(data => showMessage('Video saved successfully', 'success'))
            .catch(error => showMessage('Error saving video: ' + error, 'error'));
        };

        function showMessage(message, type) {
            let messageDiv = document.createElement('div');
            messageDiv.textContent = message;
            messageDiv.classList.add(type);
            messageArea.appendChild(messageDiv);
        }
    </script>

    <style>
        .success {
            color: green;
        }
        .error {
            color: red;
        }
    </style>
</body>
</html>
