# Show Webcam Stream

**URL:** <https://discourse.processing.org/t/show-webcam-stream/1337>\
**Category:** Coding Questions\
**Created:** [June 28, 2018, 1:31pm UTC](https://discourse.processing.org/t/show-webcam-stream/1337 "2018-06-28T13:31:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![oligor77](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/oligor77/32/608_2.png) [@oligor77](https://discourse.processing.org/u/oligor77)\
**Post date:** [June 28, 2018, 1:31pm UTC](https://discourse.processing.org/t/show-webcam-stream/1337/1 "2018-06-28T13:31:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 28, 2018, 2:50pm UTC](https://discourse.processing.org/t/show-webcam-stream/1337/2 "2018-06-28T14:50:14Z")

</div>

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

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

[https://p5js.org/reference/#/p5/createCapture](https://p5js.org/reference/#/p5/createCapture)

---

<div class="post-metadata">

**Author:** ![oligor77](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/oligor77/32/608_2.png) [@oligor77](https://discourse.processing.org/u/oligor77)\
**Post date:** [June 28, 2018, 3:37pm UTC](https://discourse.processing.org/t/show-webcam-stream/1337/3 "2018-06-28T15:37:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 28, 2018, 4:39pm UTC](https://discourse.processing.org/t/show-webcam-stream/1337/4 "2018-06-28T16:39:18Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![oligor77](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/oligor77/32/608_2.png) [@oligor77](https://discourse.processing.org/u/oligor77)\
**Post date:** [June 28, 2018, 5:15pm UTC](https://discourse.processing.org/t/show-webcam-stream/1337/5 "2018-06-28T17:15:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![oligor77](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/oligor77/32/608_2.png) [@oligor77](https://discourse.processing.org/u/oligor77)\
**Post date:** [June 28, 2018, 5:16pm UTC](https://discourse.processing.org/t/show-webcam-stream/1337/6 "2018-06-28T17:16:49Z")

</div>

And the stream is a jpeg stream

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 29, 2018, 11:39pm UTC](https://discourse.processing.org/t/show-webcam-stream/1337/7 "2018-06-29T23:39:41Z")

</div>

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:

```javascript
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):

```javascript
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.
}

```