This post is also published in blog.mallow-tech.com
Recording a screen, camera, and audio stream using a browser has never been easier, with a couple of web APIs we can build a fully functioning MediaRecorder. In this post, we will learn how to implement this MediaRecorder.
So what will we cover in this post?
- What is MediaRecorder?
- How to get media device permissions from users?
- Recording a Media
- Why is Transcoding important?
What is MediaRecorder?
The MediaRecorder API will provide us the functionality to record a stream, this stream is generated by either media stream(data from the camera, audio device or screen) or HTML media elements(like HTML canvas, audio or video elements).
This MediaRecorder API will provide us with most of the basic recorder abilities like play, pause, resume and stop recording. Even most of the modern web browsers like Chrome, Firefox, and Safari support this API.
How to get media device permissions from users?
To record media like camera, audio, and screen we first need to get device permission from the user to get the media stream from the requested device. We can get device permission using MediaDevice API
Using MediaDevices.getUserMedia() we can request camera and audio device permission.
This will prompt users with allow/deny pop-up, if users allow both camera and audio device then a stream object will be returned as a promise, if denied an error will be thrown.
To get screen stream we can replace navigator.mediaDevices.getUserMedia() with navigator.mediaDevices.getDisplayMedia() function but at the time of writing audio capturing is only supported in chrome.
To capture audio along with screen stream in non-supported browsers, we can create a new audio stream and add that audio to that screen stream using MediaStream.addTrack().
Recording a media
Once the stream is available, we can pass it to MediaRecorder API, this will create an object and we can use it to start, pause, resume and stop recording.
In the above code, the media stream is passed to the MediaRecorder to create an object, along with the stream we have also passed a dictionary with a key called mimeType we need to set this mime type based on browser support. We can do that validation using this MediaRecorder.isTypeSupported.
We can start recording by using the MediaRecorder start() method, this will start recording our above logic will stop media recorder when we click on the HTML button with id stopBtn this will call the MediaRecorder stop() method.
Once the recording is stopped, recorder data will be available in ondataavailable event handler where we can get the raw recorded stream, and download function will be called to let user download the recorded stream.
We can also ask the media recorder to return a chunk of recording in a specific timeframe by passing an integer as an argument to MediaRecorder start() method.
mediarecorder.start(15000) will generate a recording chunk every 15 seconds.
Downloaded recording won’t be playable if you don’t have a media player that’s capable of playing WebM files.
If you plan on uploading this media recording and making it available to others then you should consider transcoding it, as some browsers like safari still don’t have full support to play non transcoded WebM at the time of writing some users might not be able to view the playback.
Why is Transcoding important?
Transcoding is a process in which the video is reformatted from one format/codec into a new format/codec. It’s important to make sure the video can be viewable when delivered.
Transcoding a media will cut the storage cut, reduce the bandwidth consumption and ADR(Adaptive bitrate streaming) allow video players to switch between different video sources based on the viewer’s internet connection.
There is a lot of services available for transcoding media, but if you want to do transcoding on your own there is a great suite called FFmpeg, which is a powerful tool that offers more than what a transcoder does.
In this github repository you can find an application in which I have integrated this MediaRecorder and uploaded the recording to a rails application.