grayscaler/grayscaler.html at master · egawata/grayscaler · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grayscaler</title>
    <style>
        video, canvas {
            max-width: 100%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
        }
        video {
            z-index: -1;
        }
        canvas {
            z-index: 0;
        }
        .controls {
            position: fixed;
            bottom: 10px;
            left: 10px;
            z-index: 1;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <video id="video" autoplay></video>
    <canvas id="canvas"></canvas>
    <div class="controls">
        <label>
            <input type="checkbox" id="grayscaleToggle" checked>
            Grayscale
        </label>
        <label>
            <input type="checkbox" id="flipVToggle">
            Flip Vertically
        </label>
    </div>
<script>

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const grayscaleToggle = document.getElementById('grayscaleToggle');
const flipVToggle = document.getElementById('flipVToggle');

async function startCamera() {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
        video.srcObject = stream;
    } catch (err) {
        console.error("Error: " + err);
    }
}

function processVideo() {
    if (flipVToggle.checked) {
        context.save();
        context.scale(-1, 1);
        context.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);
        context.restore();
    } else {
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
    }

    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

    if (grayscaleToggle.checked) {
        for (let i = 0; i < imageData.data.length; i += 4) {
            const red = imageData.data[i];
            const green = imageData.data[i + 1];
            const blue = imageData.data[i + 2];

            //const v = 0.299 * red + 0.587 * green + 0.114 * blue; // Weighted Average
            const v = 0.21 * red + 0.72 * green + 0.07 * blue;  // Luminosity

            imageData.data[i] = v; // R
            imageData.data[i + 1] = v; // G
            imageData.data[i + 2] = v; // B
        }
    }

    context.putImageData(imageData, 0, 0);

    requestAnimationFrame(processVideo);
}

startCamera().then(() => {
    video.addEventListener('loadedmetadata', () => {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        processVideo();
    });
});

</script>

</body>
</html>