How to Capture Audio and Video in HTML5

Chat, which is very useful on the web and includes sharing audio, video or both and send it over the internet. For years, developers relied on plugins such as flash for accessing device media. The rise of HTML5 has brought access to the device hardware and phase out the need of the browser plugins. 

This blog will be introducing  navigator.mediaDevices.getUserMedia() API allowing web applications to access device hardware.

GetUserMedia API

API allowing access to audio, video from local devices have several use cases such as real-time communication, recording etc. GetUserMedia() API is only for allowing media access and not for sending it over the internet. The complete working chat can be achieved using RTCPeerConnection API along with getUserMediaAPI. 

Syntax:-    navigator.getUserMedia(constraints, successCallback, errorCallback)

Let us discuss each of the three parameters. 

1- Constraints:-  This parameter specifies the media to allow access for and also the requirement for each type of media. 

constraints {
		video: true,
		audio: true
	    }

The value of these constraints is boolean. Each type of constraints has two properties- mandatory and optional. Mandatory specifying constraint that media access must satisfy or else called errorCallback. Optional specifying constraint that media access must try to satisfy but may ignore if it cannot be satisfied. If we want our video must be at a high resolution having framerate of 30 and framerate of 60 if available, we can achieve this by following:

{
  video: {
    mandatory: {
      minWidth: 1200,
      minHeight: 700,
      minFrameRate: 30
    },
    optional: [
      { minFrameRate: 60 }
    ]
  },
  audio: true
}

To know more about its properties, check Specification 

2- SuccessCallback:- It is invoked on getUserMedia API success. A function is called having one parameter- MediaStream having your stream which can be assigned to any object.

3- ErrorCallback:- It is invoked on getUserMedia API error in which a MediaError object containing information about the error is passed. 

How does it Work ?

The navigator.mediaDevices.getUserMedia() evoke user for permission to access user's camera or microphone or both as the source for MediaStream. If the user grants permission, MediaStream is passed to specified success callback. In the case of denied permission or if no compatible input device exists, error callback is invoked. No callback is invoked if user have made no choice. 

EXAMPLE 
 

navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia ||
                         navigator.mediaDevices.webkitGetUserMedia ||
                         navigator.mediaDevices.mozGetUserMedia;

if (navigator.mediaDevices.getUserMedia) {
   navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 1200, height: 700 } },
      function(stream) {
         var video = document.querySelector('video');
         video.srcObject = stream;
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("Error: " + err.name);
      }
   );
} else {
   console.log("Browser does not support getUserMedia");
}

This was all about getUserMedia API making device access easy task and also phasing out the use of any browser plugins. You can use it according to your requirement and further use the stream for either sharing over the internet in real time or storing it.