This post is a part 17 of Capturing Webcam Video and Microphone Audio Using JavaScript post series.
In this post I will shown you how to capture webcam and microphone stream(data) using JavaScript. Before you continue with this article make sure you have read my article on Blobs and also have watched my course on HTML5 video tag.
navigator.getUserMedia() is a part of WebRTC APIs. This function returns us a MediaStream whose tracks are attached to webcam and microphone.
Let’s see the getUserMedia in action. Read the comments for explanation.
View Demo
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || null;
//we need to pass the stream properties to the getUserMedia function.
var video_audio_properties = {video: true, audio: true};
//we can also set webcam resolution and framerate in the above object.
//mandatory properties must be satisfied by the getuserMedia otherwise thrown an error.
//optional properties will be satisfied if possible. Error will not be through if not satisfied.
video_audio_properties = {video: {mandatory: {minWidth: 300, minHeight: 300, minFrameRate: 30}, optional: [{ minFrameRate: 60 }]}, audio: true};
function onSuccess(stream)
{
document.getElementById("video").src = window.URL.createObjectURL(stream);
//property of video tag.
document.getElementById("video").play();
}
function onError(error)
{
console.log("Video capture error: ", error.code);
}
if(navigator.getUserMedia != null)
{
navigator.getUserMedia(video_audio_properties, onSuccess, onError);
}
else
{
alert("microphone and webcam API not supported");
}
//we need to pass the stream properties to the getUserMedia function.
var video_audio_properties = {video: true, audio: true};
//we can also set webcam resolution and framerate in the above object.
//mandatory properties must be satisfied by the getuserMedia otherwise thrown an error.
//optional properties will be satisfied if possible. Error will not be through if not satisfied.
video_audio_properties = {video: {mandatory: {minWidth: 300, minHeight: 300, minFrameRate: 30}, optional: [{ minFrameRate: 60 }]}, audio: true};
function onSuccess(stream)
{
document.getElementById("video").src = window.URL.createObjectURL(stream);
//property of video tag.
document.getElementById("video").play();
}
function onError(error)
{
console.log("Video capture error: ", error.code);
}
if(navigator.getUserMedia != null)
{
navigator.getUserMedia(video_audio_properties, onSuccess, onError);
}
else
{
alert("microphone and webcam API not supported");
}
Fallback
IE and many older browsers don’t support getUserMedia then use getUserMedia.js. getUserMedia.js provides flash fallback if navigator.getUserMedia is not supported.
