greyscale web camera

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Black and White Camera Stream</title>
    <style>
        #video {
            display: none;
        }

        #canvas {
            width: 100%;
            max-width: 640px;
            height: auto;
        }
    </style>
</head>
<body>
    <video id="video" autoplay></video>
    <canvas id="canvas"></canvas>

    <script>
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (error) {
                console.error('Error accessing the camera: ', error);
            });

        video.addEventListener('play', function () {
            const width = video.videoWidth;
            const height = video.videoHeight;
            canvas.width = width;
            canvas.height = height;

            function processFrame() {
                ctx.drawImage(video, 0, 0, width, height);
                const imageData = ctx.getImageData(0, 0, width, height);
                const data = imageData.data;

                for (let i = 0; i < data.length; i += 4) {
                    // Calculate grayscale value (0.299*R + 0.587*G + 0.114*B)
                    const grayscale = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
                    data[i] = grayscale; // Red channel
                    data[i + 1] = grayscale; // Green channel
                    data[i + 2] = grayscale; // Blue channel
                }

                ctx.putImageData(imageData, 0, 0);
                requestAnimationFrame(processFrame);
            }

            processFrame();
        });
    </script>
</body>
</html>