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
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
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
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.
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