How can i use chrome webcam API and the processing.js to manipulate the video?

Processing with Other Languages

karenpunk

How can i use chrome webcam API and the processing.js to manipulate the video?

in Processing with Other Languages • 1 year ago

As topic,

i want to play with the webcam and chrome webcam API comes in handy, no plugin is needed.

However, i am not familiar with javascript syntax, so i still want to use processing.js to manipulate the video.

So how should the code be like?

GetUserMedia in the canvas,then? How can i tell the processing.js that there is a video in the canvas?

Replies(4)

Makio135

Re: How can i use chrome webcam API and the processing.js to manipulate the video?

1 year ago

i posted a simple example at http://p5lyon.tumblr.com/
http://p5lyon.tumblr.com/ProcessingJSGetUserMedia

and also did this using P5js & getUserMedia API: http://www.uglitch.com/webglitcher/

http://makio.free.fr/

karenpunk

Re: How can i use chrome webcam API and the processing.js to manipulate the video?

1 year ago

Thank you Makio,

However i still went wrong even learning from your example :(

My html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Conversation</title>
<script type="text/javascript" src="webcam.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/processing" data-processing-target="output">
var ctx;
PImage img;
int i,j;
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(j=0;j for(i=0;i fill(img.get(i, j));
ellipse(i*width/nb, j*height/nb, width/nb, height/nb);
}
}
}
</script>
</head>
<body>
<video 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>
</body>
</html>

And my webcam.js:

/*
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.");
}
);

Still, although it enables webcam, it displays nothing. I've already put it into my localhost.

So what went wrong?

Many thanks.

Makio135

Re: How can i use chrome webcam API and the processing.js to manipulate the video?

1 year ago

There was two '<' i hadn't converted in < that results in the strange 35th line in your code:

for(j=0;j for(i=0;i fill(img.get(i, j));

it should be:

for(j=0; j<nb; j++){
for(i=0; i<nb; i++){
fill(img.get(i,j));

http://makio.free.fr/

Makio135

Re: How can i use chrome webcam API and the processing.js to manipulate the video?

1 year ago

here is a complete html page working with browser supporting getUserMeia API,
you need to add processing.js and correct its path line 12:

<!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>

http://makio.free.fr/

Top Reply