Capturing Audio and Video in HTML5:
Earlier were the days when internet started that people started using chat as a medium of communication in the mid 90's. People used to capture audio or video and then send it over the internet.These features required the use of plugins like flash and Silverlight and these two had certain technical problems.
With the emergence of WebRTC the plugins has made its way out. One of the API that is derived from WebRTC is getUserMedia API.
Get started with getUserMedia API:
Several multimedia streams such as video, audio and both can be accessed from local devices.The users need not use additional plugins to access the video or audio.It helps the non-technical user to use the software without any additional plugins.However this API allows users to acquire the video and audio without having to send the data or storing it in a file. This API uses one method called as method.getUserMedia() which belongs to the window.navigator object.
Syntax :
navigator.getUserMedia(constraints,successCallback,errorCallback);
Constraints:
It has a constraints parameter which is an object that has two properties called audio and video. The properties contain two values true and false. True means to request the stream and false means do not request the stream.
Example: to request only video the parameter is as follows
{
Video:true,
Audio:false
}
{
video:{
mandatory:{
minWidth:1280,
minHeight:720,
minFrameRate:30
},
optional:[{minFrameRate :60}]
},
audio:true
}
successCallback:
The function on the calling application to invoke when passing the LocalMediaStream object. The getUserMedia() will call the successCallback using the LocalMediaStream object.
Example :
function(localMediaStream) {
var myvideo=document.querySelector(‘video’);
myvideo.src=window.URL.createObjectURL(localMediaStream);
myvideo.onloadedmetadata=function() {
//play or do something with the video.
};
},
errorCallBack:
The getUserMedia() function will call the function called as errorCallback with error codes as follows-
Permission_denied: The user is denied the permission to use a media device required for the operation. Not_supported_error: A constraint specified is not supported by the browser. Mandatory_unsatisfied_error: If no media tracks of the type specified in the constraints are found an error occurs.
To get permissions:
To get getUserMedia() installable on the app the following code should be embedded inside the file-
“permissions”:{
“audio-capture”:{
“description”:”required to capture audio via getUserMedia”
}
} Compatibility of the browser:
The getUserMedia() API is supported by the desktop browser but it’s performance of mobile browser is poor.The current browsers that support this API are Chrome, Opera and Firefox.Some browsers also have a security issue such that upon calling the getUserMedia() API, the browsers give an option to the user saying that the user can grant/deny access to the camera/mic.
Conclusion:
The getUserAPI() derived from WebRTC project has worked wonders in making web applications successful.This API is very flexible allowing user to select its own parameters such as the audio and the video streams.The compatibility among the browsers is not very good but it would increase eventually.
