Webcam streaming:

Arthur91x

in Processing with Other Languages • 4 months ago

Hello, I'm new to the site and wanted to ask about the possibility of streaming from my webcam to a page. I've checked and successfully ran this code from fellow user Makio135 which I found implements Processing.js. But this one grabs images from the camera that is visiting the site. What I want is to grab frames from a single camera and display it on the webpage for everybody. Is that possible?

And what must I modify?

Thanks in advance!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GetUserMedia API and ProcessingJS</title>
</head>
<body>
<video style="display:none;" id="videoOutput" width="500px" height="660px" autoplay></video>
<canvas id="output" width="500px" height="660px" align="center">
<p>Please upgrade your browser to something new like <a href="https://www.google.com/chrome">Google Chrome</a>.</p>
</canvas>
<script type="text/javascript" src="scripts/processing-js-1.4.1/processing-1.4.1.min.js"></script>
<script type="text/processing" data-processing-target="output">
/*
GetUserMedia script from http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/
*/
var video = document.getElementById("videoOutput");
var getUserMedia = function(t, onsuccess, onerror) {
if (navigator.getUserMedia) {
return navigator.getUserMedia(t, onsuccess, onerror);
} else if (navigator.webkitGetUserMedia) {
return navigator.webkitGetUserMedia(t, onsuccess, onerror);
} else if (navigator.mozGetUserMedia) {
return navigator.mozGetUserMedia(t, onsuccess, onerror);
} else if (navigator.msGetUserMedia) {
return navigator.msGetUserMedia(t, onsuccess, onerror);
} else {
onerror(new Error("No getUserMedia implementation found."));
}
};
var URL = window.URL || window.webkitURL;
var createObjectURL = URL.createObjectURL || webkitURL.createObjectURL;
if (!createObjectURL) {
throw new Error("URL.createObjectURL not found.");
}
getUserMedia({audio:true, video:true},
function(stream) {
var url = createObjectURL(stream);
video.src = url;
},
function(error) {
alert("Couldn’t access webcam.");
}
);
var ctx;
PImage img;
int nb=20;
void setup(){
size(500,660);
ctx = externals.context;
ellipseMode(CORNER);
smooth();
}
void draw(){
pushMatrix();
translate(width,0);
scale(-1,1);//mirror the video
ctx.drawImage(video, 0, 0, width, height); //video is defined inside getUserMedia.js
popMatrix();
//do something
img=get();
img.resize(nb,nb);
background(255);
noStroke();
for(int j=0; j<nb; j++){
for(int i=0; i<nb; i++){
fill(img.get(i, j));
ellipse(i*width/nb, j*height/nb, width/nb, height/nb);
}
}
}
</script>
</body>
</html>

Replies(3)

PhiLho

Re: Webcam streaming:

4 months ago

Moved here from Programming Questions, because it is specifically about JavaScript.
And well, you need to have a server, where the camera is connected and can save an image regularly at a given location.
Then, you only need to load this image from the server.
That's how old webcam pages worked... (refresh the page to see a new image!)

Makio135

Re: Webcam streaming:

4 months ago

You can also check https://github.com/echelon/ip-security-camera-viewer

it works with ipcameras streaming video accessible via their ip

Makio135
http://makio135.com/

Arthur91x

Re: Webcam streaming:

4 months ago

Thanks for the input! In case its useful for someone I was trying this one:

Connect Arduino to Spacebrew using Processing

It works as a server to host applications, but requires the external application Spacebrew and takes some time to set the server. Yesterday I managed to connect Processing as a host in their open server with the danger that anyone can see and manipulate the data.

Will check the link you gave me. Will report on advances.

Thanks!

"Our aspirations are our possibilities."

Top Reply