# createCapture() captures video but can only draw first frame

**URL:** https://discourse.processing.org/t/createcapture-captures-video-but-can-only-draw-first-frame/45015
**Category:** Coding Questions
**Created:** [September 1, 2024, 12:10am UTC](https://discourse.processing.org/t/createcapture-captures-video-but-can-only-draw-first-frame/45015 "2024-09-01T00:10:22Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![weeklyd3](https://avatars.discourse-cdn.com/v4/letter/w/ea5d25/32.png) [@weeklyd3](https://discourse.processing.org/u/weeklyd3)
#### Post date: [September 1, 2024, 12:10am UTC](https://discourse.processing.org/t/createcapture-captures-video-but-can-only-draw-first-frame/45015/1 "2024-09-01T00:10:22Z")

</div>

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

```js
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`](https://p5js.org/reference/p5/createCapture/), but those examples don’t suffer from the same problem and the video plays there.

Why is this?

Thanks in advance!

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 1, 2024, 12:32am UTC](https://discourse.processing.org/t/createcapture-captures-video-but-can-only-draw-first-frame/45015/2 "2024-09-01T00:32:27Z")

</div>

Hello @weeklyd3,

I did not see a _draw_.

It worked adding this to the _function(sketch)_:

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

```

`:)`

---

<div class="post-metadata">

### Author: ![weeklyd3](https://avatars.discourse-cdn.com/v4/letter/w/ea5d25/32.png) [@weeklyd3](https://discourse.processing.org/u/weeklyd3)
#### Post date: [September 1, 2024, 12:52am UTC](https://discourse.processing.org/t/createcapture-captures-video-but-can-only-draw-first-frame/45015/3 "2024-09-01T00:52:49Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 1, 2024, 12:58am UTC](https://discourse.processing.org/t/createcapture-captures-video-but-can-only-draw-first-frame/45015/4 "2024-09-01T00:58:24Z")

</div>

Hello,

_setup()_ runs once:

> **[setup](https://p5js.org/reference/p5/setup/)**
>
> setup

_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.

`:)`