<!DOCTYPE html>
<html lang="mk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Filter App</title>
    <style>
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #000;
            color: #fff;
            height: 100vh;
            overflow: hidden;
        }
        video {
            display: none; /* Hide the video element */
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #record-button {
            position: absolute;
            bottom: 20px;
            width: 80px;
            height: 80px;
            background: red;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            user-select: none;
            outline: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            pointer-events: all;
            -webkit-tap-highlight-color: transparent; /* Prevent highlight on tap */
        }
        #timer {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 20px;
            pointer-events: none;
        }
        #mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <video id="camera" autoplay muted playsinline></video>
    <canvas id="canvas" width="1080" height="1920"></canvas>
    <img id="mask" src="masks.png" alt="Mask Effect">
    <button id="record-button"></button>
    <div id="timer">0s</div>

    <script>
        const video = document.getElementById('camera');
        const canvas = document.getElementById('canvas');
        const recordButton = document.getElementById('record-button');
        const timer = document.getElementById('timer');
        const mask = document.getElementById('mask');

        let recordedChunks = [];
        let isRecording = false;
        let seconds = 0;
        let timerInterval;
        let mediaRecorder;

        // Access camera and microphone
        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then(stream => {
                video.srcObject = stream;

                const canvasStream = canvas.captureStream(30); // Capture canvas as a stream
                const combinedStream = new MediaStream([
                    ...canvasStream.getVideoTracks(),
                    ...stream.getAudioTracks()
                ]);

                mediaRecorder = new MediaRecorder(combinedStream);

                mediaRecorder.ondataavailable = (event) => {
                    if (event.data.size > 0) {
                        recordedChunks.push(event.data);
                    }
                };

                mediaRecorder.onstop = () => {
                    const blob = new Blob(recordedChunks, { type: 'video/mp4' });
                    const url = URL.createObjectURL(blob);

                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'video_with_mask.mp4';
                    a.click();

                    recordedChunks = [];
                };

                draw();
            })
            .catch(error => {
                console.error('Error accessing media devices.', error);
            });

        // Prevent text selection and interaction glitches on the button
        recordButton.addEventListener('mousedown', e => {
            e.preventDefault();
        });
        recordButton.addEventListener('touchstart', e => {
            e.preventDefault();
        });

        // Start recording on press
        recordButton.addEventListener('pointerdown', () => {
            if (!isRecording) {
                isRecording = true;
                seconds = 0;
                timerInterval = setInterval(() => {
                    seconds++;
                    timer.textContent = `${seconds}s`;
                }, 1000);

                mediaRecorder.start();
            }
        });

        // Stop recording on release
        recordButton.addEventListener('pointerup', () => {
            if (isRecording) {
                isRecording = false;
                clearInterval(timerInterval);
                timer.textContent = '0s';

                mediaRecorder.stop();
            }
        });

        // Draw mask on canvas
        function draw() {
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();

            const videoWidth = video.videoWidth;
            const videoHeight = video.videoHeight;
            const canvasWidth = canvas.width;
            const canvasHeight = canvas.height;

            // Calculate scaling to fit the canvas
            const scale = Math.max(canvasWidth / videoWidth, canvasHeight / videoHeight);
            const scaledWidth = videoWidth * scale;
            const scaledHeight = videoHeight * scale;

            // Center the video on the canvas
            const xOffset = (canvasWidth - scaledWidth) / 2;
            const yOffset = (canvasHeight - scaledHeight) / 2;

            ctx.scale(-1, 1); // Flip horizontally
            ctx.translate(-canvasWidth, 0); // Adjust position after flip
            ctx.drawImage(video, xOffset, yOffset, scaledWidth, scaledHeight);
            ctx.restore();

            ctx.drawImage(mask, 0, 0, canvas.width, canvas.height);
            requestAnimationFrame(draw);
        }
    </script>
</body>
</html>
