createCapture() captures video but can only draw first frame

p5.js Coding Questions
1

I’m trying to draw video from the webcam on a canvas:

function update() {
	draw.clear();
	draw.image(camera.get(), 0, 0);
}
var s = function(sketch) {
	sketch.setup = function() {
		sketch.createCanvas(640, 480);
		camera = draw.createCapture('video'); 
		camera.hide();
		updateInterval = setInterval(update, 1000 / 24);
	}
}
var draw = new p5(s);

When camera.hide() is removed, one can see that the <video> element created is playing live webcam video, but the canvas is frozen on one frame and doesn’t actually play. I’ve tried the examples on the p5.js docs for createCapture, but those examples don’t suffer from the same problem and the video plays there.

Why is this?

Thanks in advance!

2

Hello @weeklyd3,

I did not see a draw.

It worked adding this to the function(sketch):

  sketch.draw = function()
    {
    sketch.image(camera, 0, 0); 
    }

:)

3

It works now, thank you so much!

This is weird: it works absolutely flawlessly when in sketch.draw but not in my own draw function I created using setInterval, but at least it works.

Thanks again @glv!

1 Like
4

Hello,

setup() runs once:

draw (outside of setup) was needed to update.

I updated your code intuitively from experience… I only dabble with p5.js and there may be other ways to do this.

:)

2 Likes