Url stream to canvas / frame updating

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?

var video;

function setup() {
  video = createImg('', "");
  image(video,320, 240);


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


cheers sofie

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

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


Is this helpful:

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?:

let capture;

function setup() {
  createCanvas(390, 240);
  capture = createCapture('');
  capture.size(320, 240);

function draw() {
  image(capture, 0, 0, 320, 240);

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


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?

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

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

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