CubicInterpolationWebGL/live.html at master · DannyRuijters/CubicInterpolationWebGL · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <title>WebGL cubic interpolation: Live video</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="gl.cubicinterpolation.js"></script>
    <script src="gl.eventhandlers.js"></script>
    <script>

        function initVideoTexture(canvas, stream) {
            let intervalID;
            const videoElement = document.createElement('video');
            videoElement.autoplay = true;
            videoElement.playsInline = true; //important for mobile devices
            videoElement.muted = true; //required for autoplay in modern browsers
            videoElement.srcObject = stream;

            videoElement.addEventListener("canplaythrough", () => {
                videoElement.play().catch(err => { console.error("Error playing video:", err); });
                intervalID = setInterval(() => { handleLoadedImage(canvas, videoElement, videoElement.videoWidth, videoElement.videoHeight); }, 15);
            });

            videoElement.addEventListener("ended", () => { clearInterval(intervalID); });
        }

        async function drawLiveVideo(canvas) {
            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                console.error("getUserMedia is not supported in this browser");
                return;
            }

            try {
                const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
                initCanvasGL(canvas);
                initVideoTexture(canvas, stream);
            } catch (error) {
                console.error("Failed to get a stream due to:", error);
            }
        }

        function webGLStart() {
            const canvasArray = document.getElementsByClassName("gl.cubicinterpolation");
            for (let canvas of canvasArray) {
                drawLiveVideo(canvas);
                addMouseEvents(canvas);
            }

            addEventHandlers(() => {
                const canvasArray = document.getElementsByClassName("gl.cubicinterpolation");
                for (let canvas of canvasArray) {
                    const gl = canvas.gl;
                    gl.filterMode = (gl.filterMode + 1) % 4;
                    const texture = (gl.filterMode === 0) ? gl.rttFramebufferTextureY.texture : gl.myTexture;
                    cubicFilter(gl, texture, canvas.width, canvas.height);
                }
            });
        }

        window.addEventListener('DOMContentLoaded', webGLStart);

    </script>
</head>


<body>
    <canvas class="gl.cubicinterpolation" style="border: none; width: 500px; height: 500px"></canvas>
</body>

</html>