Passion of IT

HTML5 Input from Webcam

Hi,

 

in this page I’ll explain how to take input from your webcam with HTML5.

HTML5 introduces a lot of new functionalities, one of them is getUserMedia, this is an API Javascript to capture audio/video from your microphone or webcam.

the code is very easy and it is summarized with this short description

If the browser supports the library getUserMedia then the div with a id #video is converted in a video by using the command querySelector and then it is associated the sources of the URL of the localMediaStream so the input of our webcam to this video tag

Below it is written this code


navigator.getUserMedia = ( navigator.getUserMedia ||

navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);

 

if (navigator.getUserMedia) {
navigator.getUserMedia (

// constraints
{
video: true,
audio: false
},

// successCallback
function(localMediaStream) {
var video = document.querySelector('video');

//the input is a video with id video:

//<video width=200 height=200 id="video" controls autoplay></video>
video.src = window.URL.createObjectURL(localMediaStream);

},

// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
} else {
console.log("getUserMedia not supported");
}

 

Capturing video is possible by saving the screenshots every while.
The function that allows to do something every while is requestAnimationFrame.

Below I wrote an example:

function animationLoop(){
render();
requestAnimationFrame(animationLoop, elem);
}

in this example the function animationLoop is execute from now forever every while on the basis of the performance of your PC and your network.

Here you could see an example of this animation and also an example of getting input  from your webcam.

Here there is an example to download a video from your webcam

Here there is an example to apply any effects to the audio captured by your microphone

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite="
"> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent Comments

Michele Rizzithe website doesn't exist. Ara you a robot? In any case it's difficult that an automatic system writes a comment here since there are two captchas...
Hello there! This is kind of off topic but I need some guidance from an established blog. Is it very hard to set up your own blog? I'm not very t...
We are a group of volunteers and opening a new scheme in our community. Your web site offered us with valuable information to work on. You've done a...
September 2021
M T W T F S S
« Jan    
 12345
6789101112
13141516171819
20212223242526
27282930  

Login