Unknown Error in P5.js whene loadpixels()?

I want to video processing using p5.js library. but own code doesn't work when using an external video element by select() function. But the code does work when used createCapture() function instead select()

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="assets/vendor/jquery-3.0.0.min.js"></script>
    <script src="assets/vendor/p5/p5.min.js"></script>
    <script src="assets/vendor/p5/p5.dom.min.js"></script>
    <script src="assets/vendor/p5/p5.sound.min.js"></script>
    <script src="assets/scripts/script.js"></script>
</head>
<body>
    <div class="snapshot">
        <video id="video"  autoplay=""></video>
    </div>
</body>
</html>

//script.js

$(document).ready(e => {
    window.currentEffect = 0;
    let v = $("#video");
    effects = [{
        name: "Normal",
        effect: (p) => {
            let v;
            p.preload = () => {};
            p.setup = () => {
                v = p.select("#video");
                if (p.select("#canvas") === null) p.createCanvas(v.width, v.height).id("#canvas");
                else {
                    p.select("#canvas").remove();
                    p.createCanvas(v.width, v.height).id("#canvas");
                }
                p.pixelDensity(1);

            };
            p.draw = () => {
                p.background(51);
                p.translate(p.width, 0);
                p.scale(-1, 1);
                p.loadPixels();
                for (let y = 0; y < p.height; y++) {
                    for (let x = 0; x < p.width; x++) {
                        let i = (x + y * p.width) * 4,
                            r = v.pixels[i + 0],
                            g = v.pixels[i + 1],
                            b = v.pixels[i + 2],
                            rb = (r + g + b) / 3;
                        p.pixels[i + 0] = rb;
                        p.pixels[i + 1] = rb;
                        p.pixels[i + 2] = rb;
                        p.pixels[i + 3] = 255;
                    }
                }
                p.updatePixels();

            };
        }
    }];
    navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
                mandatory: {
                    minWidth: v.width(),
                    minHeight: v.height(),
                    maxWidth: v.width(),
                    maxHeight: v.height()
                }
            }
        })
        .then(stream => {
            v.attr({
                "src": window.URL.createObjectURL(stream),
                "autoplay": "true"
            });
        })
        .catch(err => {
            console.error(err);
        });
     new p5(effects[0].effect);
});

Answers

Sign In or Register to comment.