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