In this pandemic, a lot has changed with work culture. Something we can’t get rid of yet is . While at one of those meetings, I got curious about the and after some search came to know what our browsers are capable of (inbuilt browser APIs). Remote Meetings Google meeting platform So, I planned to develop a free simple recorder that supports Audio, Video, and Screen Recording available at http://recorder.dhruv479.dev To proceed further, you should be acquainted with some terms: The MediaRecorder interface of the provides functionality to easily record media MediaRecorder: MediaStream API ref: MDN The MediaDevices interface provides access to connected media input devices like cameras and microphones, as well as screen-sharing MediaDevices: ref: MDN Ok, ready to roll? let’s add some code! At first, we will write a function that intakes the stream and mimeType, collect the data chunks and then enable downloading the file on the local machine from the browser. Recording Handler: handleRecord = { recordedChunks = [];
  stopped = ; mediaRecorder = MediaRecorder(stream);

  mediaRecorder.ondataavailable = { (e.data.size > ) {
      recordedChunks.push(e.data);
    } (shouldStop === && stopped === ) {
      mediaRecorder.stop();
      stopped = ;
    }
  };
  mediaRecorder.onstop = { blob = Blob(recordedChunks, { : mimeType
    });
    recordedChunks = [] filename = .prompt( ); downloadLink.href = URL.createObjectURL(blob); downloadLink.download = ; stopRecord();
  };

  mediaRecorder.start( ); }; const ( ) function {stream, mimeType} // to collect stream chunks let false const new ( ) function e if 0 // shouldStop => forceStop by user if true false true ( ) function const new type const window 'Enter file name' // input filename from user for download // create download link for the file ` .webm` ${filename} // naming the file with user provided name 200 // here 200ms is interval of chunk collection First, create a MediaRecorder instance with the input stream. Then, add events for ondataavailable (when data comes in-stream) and onstop (when the stream stops). After chunk is available, it is pushed in the array and after the stop event, all the chunks are put together to form a specifying the mimeType. Blob Later, URL is created for the blob object and can be downloaded from the browser. Going forward, we will write a function to invoke the audio recording that further calls handleRecord with the required parameters. Audio Recorder: { mimeType = ;
  shouldStop = ; stream = navigator.mediaDevices.getUserMedia({ : });
  handleRecord({stream, mimeType})
} async ( ) function recordAudio const 'audio/webm' false const await audio true Here, we will use mediaDevices.getUserMedia to get access to resources on the user’s machine. After calling this,  we will get a prompt asking for permission in the browser and after confirmation, we can access those resources. Also, we can pass additional parameters to the constraints like audio: { echoCancellation: true } which reduces the sound echo. Similar to Audio Recording, we need to add video in the parameter of the function. Video Recorder: getUserMedia { mimeType = ;
  shouldStop = ; constraints = { : , : ,
  }; stream = navigator.mediaDevices.getUserMedia(constraints);
  handleRecord({stream, mimeType})
} async ( ) function recordVideo const 'video/webm' false const audio true video true const await After adding video constraint in getUserMedia, you will get an additional prompt to camera permission and after the confirmation, guess what, we can access the camera stream. Also, additional params can be passed to video such as: video: { width: {min: 640}, height: {min: 480}} Amongst all, this is the most interesting, as the display stream is provided by getDisplayMedia, and the audio is provided by getUserMedia. So, we need to merge different streams here if need an audio background for the screen record. Screen Recorder: { mimeType = ;
  shouldStop = ; constraints = { : }; displayStream = navigator.mediaDevices.getDisplayMedia({ : , : }); voiceStream = navigator.mediaDevices.getUserMedia({ : , : }); tracks = [...displayStream.getTracks(), ...voiceStream.getAudioTracks()] stream = MediaStream(tracks);
  handleRecord({stream, mimeType})
} async ( ) function recordScreen const 'video/webm' false const video true const await video true audio true // voiceStream for recording voice with screen recording const await audio true video false let const new We merged the different streams to create a new stream and passed it to the handleRecord function. Here also, we can add more specific constraints as per the need. Constraints passed to capture media can be more specific like resolution, echo, cursor instead of true/false. Conclusion Voila, well the JavaScript part is done 😁. We just need to add some basic HTML to invoke those functions, stop recording, and of course, download the file. Here is a reference to the complete code: https://github.com/dhruv479/recorder/blob/master/index.html Also published at https://dhruv479.medium.com/583584dd3c75

Here's How I Built a Video, Audio, and Screen Recorder Web App with JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Guide to Handling Express.js Errors in Your Application

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

A Quick Guide to Handling Express.js Errors in Your Application

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps