Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on November 5, 2022

 

 

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

 

 

1
2
3
4
5
<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>

 

 

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

 

 

JavaScript
1
2
3
4
5
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

 

 

JavaScript
1
2
3
4
5
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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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.

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

 

 

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme