Javascript MediaRecorder WebRTC API Project to Record Video and Audio From Camera in Browser

Welcome folks today in this blog post we will be recording video and audio from camera in browser using mediarecorder webrtc api in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to create the index.html file and copy paste the following code

<p><video id="video" autoplay width=320/><p>

<p><button onclick="startFunction()">Grab video & start recording</button></p>

<p><button onclick="download()">Download! (and stop video)</button></p>

<p><button onclick="startFunction()">Grab video & start recording</button></p>

<p><button onclick="download()">Download! (and stop video)</button></p>

As you can see we have the video tag inside the html where we will be displaying the webcam feed. And here we are attaching the width of the webcam and also we have attached the autoplay attribute. And then we have two buttons which are Start recording and download video recording as shown below

Starting the User Webcam

Now we will be starting the user webcam inside the javascript code. We will be declaring the webcam configuration options as shown below

const constraints = { "video": { width: { max: 320 } }, "audio" : true };

var theStream;
var theRecorder;
var recordedChunks = [];

const constraints = { "video": { width: { max: 320 } }, "audio" : true };

var theStream;

var theRecorder;

var recordedChunks = [];

As you can see we have declared the constraints object of the webcam. And then inside this object we have the video and audio properties inside that we have set the width of the webcam and also we are setting the audio parameter to boolean value.

Starting the Webcam & Recording Video

Now we will be writing the function once we press the button of start recording so copy paste the below javascript code

function startFunction() {
  navigator.mediaDevices.getUserMedia(constraints)
      .then(gotMedia)
      .catch(e => { console.error('getUserMedia() failed: ' + e); });
}

function startFunction() {

navigator.mediaDevices.getUserMedia(constraints)

.then(gotMedia)

.catch(e => { console.error('getUserMedia() failed: ' + e); });

}

As you can see we are using the navigator api to access the user webcam using the getUserMedia() method and here we are passing the constraints object and then in the callback function we are getting the user webcam stream object and here we are calling a custom function which is called gotMedia and in this we are passing the stream as an argument. Now we need to define this function as shown below

function gotMedia(stream) {
  theStream = stream;
  var video = document.querySelector('video');
  video.srcObject = stream;
  try {
    recorder = new MediaRecorder(stream, {mimeType : "video/webm"});
  } catch (e) {
    console.error('Exception while creating MediaRecorder: ' + e);
    return;
  }
  
  theRecorder = recorder;
  recorder.ondataavailable = 
      (event) => { recordedChunks.push(event.data); };
  recorder.start(100);
}

function gotMedia(stream) {

theStream = stream;

var video = document.querySelector('video');

video.srcObject = stream;

try {

recorder = new MediaRecorder(stream, {mimeType : "video/webm"});

} catch (e) {

console.error('Exception while creating MediaRecorder: ' + e);

return;

}

theRecorder = recorder;

recorder.ondataavailable =

(event) => { recordedChunks.push(event.data); };

recorder.start(100);

}

As you can see guys first of all we are attaching the webcam stream which is coming as an argument inside this function and then we are targeting the video element using queryselector and then we are attaching the video src to the stream. Now the user webcam will be shown. After this we also need to start the webcam recording for that we are writing the try catch block of code in this we are first of all initializing the mediaRecorder variable and here we are calling the new object of the MediaRecorder class and here we are passing two variables first is the actual user webcam stream and secondly we are passing the mimetype of the video. Here we will be saving the recording as an webm file. And after this we will start the recording using start() method.

And after this we need to write the code for stopping the recording and actually download the recorded video as an webm video file inside the browser.

For this we need to write the downloadVideo() function that we binded to the second button inside the DOM.

function download() {
  theRecorder.stop();
  theStream.getTracks().forEach(track => { track.stop(); });

  var blob = new Blob(recordedChunks, {type: "video/webm"});
  var url =  URL.createObjectURL(blob);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = 'test.webm';
  a.click();
  // setTimeout() here is needed for Firefox.
  setTimeout(function() { URL.revokeObjectURL(url); }, 100); 
}

function download() {

theRecorder.stop();

theStream.getTracks().forEach(track => { track.stop(); });

var blob = new Blob(recordedChunks, {type: "video/webm"});

var url = URL.createObjectURL(blob);

var a = document.createElement("a");

document.body.appendChild(a);

a.style = "display: none";

a.href = url;

a.download = 'test.webm';

a.click();

// setTimeout() here is needed for Firefox.

setTimeout(function() { URL.revokeObjectURL(url); }, 100);

}

As you can see here we are using the blob to actually convert the webcam recorded stream to a blob object and here also we are passing the mimetype of the video. And then for downloading it as an attachment we are using the anchor element setting the href property to the base64 code of the video which is generated by using the createObjectURL() method. And then we are simply downloading it as shown below