Show Webcam Stream

p5.js Coding Questions
1

Hi there,
is there any way to display a webcam stream? The Video Element in the example shows only a way to display video files.

Thanks a lot for a hint.

2

check out the video capture example, it should get you going.
https://p5js.org/examples/dom-video-capture.html

& the createCapture() function of the p5.dom library

https://p5js.org/reference/#/p5/createCapture

3

Not a connected Webcam. I want to display a web video stream which ist availble per http://192.168.1.10:8080/?action=stream

4

can you provide more details on that camera stream? this is a local IP camera right? what kind of data or html are you getting at that IP adress’ webpage?

5

The webcam is connected to my server. With mpjg-streamer i steam it. And with the above url i can view it. And this stream i want to show on a webpage.

6

And the stream is a jpeg stream

7

if you view source on the IP page, is the image itself a .jpg image? If so, you should be able to use it like any other image in p5.js with a full filepath ie. something like http://192.168.1.10:8080/image.jpg

which you could then use with p5 like:

var img;
function preload() {
  img = loadImage('http://192.168.1.10:8080/image.jpg');
}
function setup() {
  image(img, 0, 0);
}

You’ll run into an issue where you’ll need to update the image periodically, but you could likely use a modulo % timer or a if/then statement with seconds() to call a new loadimage() at a slower interval than the standard draw loop to overwrite your original image variable

keep in mind that loading an image from a URL or other remote location may be blocked due to your browser’s built-in security. So you might need to find a way to load the image through another type of request and then load it using p5

depending on what you want to do with the image later on, you might use p5.dom and createImg() to load it! if you do want to get it back on the canvas, consider this (which will likely get around some of your browser restrictions):

let img;

function setup() {
  img = createImg('http://192.168.1.10:8080/image.jpg') //note that this is not loadImage(), and is instead using p5.dom to create a <img> html element
  img.hide(); //hide the generated HTML element since we're going to use it later to load it into the canvas.
  createCanvas(600,600)
}

function draw(){
  blendMode(HARD_LIGHT) // proof that this is on the canvas and not a HTML element from p5.dom
  image(img, 100, 100); //load the generated createImg p5.dom image into the canvas.
}