# Url stream to canvas / frame updating

**URL:** <https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810>\
**Category:** Coding Questions\
**Created:** [July 3, 2022, 1:58pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810 "2022-07-03T13:58:02Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sofie](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@Sofie](https://discourse.processing.org/u/Sofie)\
**Post date:** [July 3, 2022, 1:58pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810/1 "2022-07-03T13:58:02Z")

</div>

Hi, i’m struggeling to write a stream to the canvas. I can get one frame every time the sketch loads but its not updating the variable. My thought was that if i call `image()` in `draw()` it updates every cycle, but it doesn’t? I there a more straight forward way of connecting to a url stream?

```auto
var video;

function setup() {
 
  createCanvas(600,600)
  background(51);
  video = createImg('http://192.168.11.122:81/stream', "");
  video.size(320,240);  
  image(video,320, 240);

}

function draw(){
  image(video,320, 240);

}

```

cheers sofie

 ![2022-07-03 15_52_49-p5.js Web Editor _ video stream_in](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/d/adcb3e8829f405b4bf7964461a6ab5d7ba4a8967.jpeg)

my setup:  
p5 web editor  
firefox on win 10  
esp32 cam streaming on local web server

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [July 3, 2022, 2:55pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810/2 "2022-07-03T14:55:24Z")

</div>

I would help if you entered the source code in your question instead of making us re-write it by looking at an image. Edit your question and use two sets of three grave characters with your code sandwiched in between, eg  
```  
your code  
```  
Thanks.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [July 3, 2022, 3:08pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810/3 "2022-07-03T15:08:19Z")

</div>

Is this helpful:  
[https://p5js.org/examples/dom-video-capture.html](https://p5js.org/examples/dom-video-capture.html)

---

<div class="post-metadata">

**Author:** ![Sofie](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@Sofie](https://discourse.processing.org/u/Sofie)\
**Post date:** [July 3, 2022, 3:24pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810/4 "2022-07-03T15:24:01Z")

</div>

i tried to set it up using `createCapture` but it won’t take a url as an input. After reading a bit it looked like it’s only ment to be used with internal audio/video. The only thing i found that would allow me to connect to the url was with `createImg()`.

But maybe my implementation ist wrong?:

```auto
let capture;

function setup() {
  createCanvas(390, 240);
  capture = createCapture('http://192.168.11.122:81/stream');
  capture.size(320, 240);
  //capture.hide();
}

function draw() {
  background(255);
  image(capture, 0, 0, 320, 240);
  filter(INVERT);
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [July 3, 2022, 3:35pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810/5 "2022-07-03T15:35:19Z")

</div>

That issue came up in a previous forum question. They suggested updating the image with a timer of some sort.

[https://discourse.processing.org/t/show-webcam-stream/1337](https://discourse.processing.org/t/show-webcam-stream/1337)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [July 3, 2022, 4:00pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810/6 "2022-07-03T16:00:25Z")

</div>

I’m not getting an image from this url. Is it functional for the rest of us to see? If not, is there a url which is public?

---

<div class="post-metadata">

**Author:** ![Sofie](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@Sofie](https://discourse.processing.org/u/Sofie)\
**Post date:** [July 3, 2022, 4:08pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810/7 "2022-07-03T16:08:58Z")

</div>

it’s a local url. sorry, i don’t ask for help often. i’m looking up a public url for my sketch

---

<div class="post-metadata">

**Author:** ![Sofie](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@Sofie](https://discourse.processing.org/u/Sofie)\
**Post date:** [July 3, 2022, 4:50pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810/8 "2022-07-03T16:50:42Z")

</div>

i will try tomorrow to forward the stream to public. i can’t find something useful online.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [July 3, 2022, 6:27pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810/10 "2022-07-03T18:27:25Z")

</div>

This should be a live stream, but I can’t get an image with this one either (Safari or Chrome):

[https://www.skylinewebcams.com/en/webcam/espana/canarias/santa-cruz-de-tenerife/playa-los-cristianos.html](https://www.skylinewebcams.com/en/webcam/espana/canarias/santa-cruz-de-tenerife/playa-los-cristianos.html)