In the modern web development landscape, interacting with user hardware (like cameras and microphones) has become much easier with the advent of various browser APIs. One such useful API is the MediaRecorder API, which allows developers to record audio and video directly from the browser.
In this post, we'll walk through how to record videos using JavaScript by accessing the user's webcam, recording the video stream, and offering the recorded video for download—all through browser APIs!
Why Use the MediaRecorder API?
Traditionally, recording media content from a user required external tools or plugins (like Flash). However, with the WebRTC stack, you can easily record videos, create peer-to-peer connections, and interact with media devices like cameras, microphones, and screens—without the need for any third-party tools.
The MediaRecorder API is part of this stack, making video recording in the browser a seamless process.
Steps to Record Videos in the Browser
To record videos, we will:
-
Access the webcam using the
getUserMedia()method from thenavigator.mediaDevicesinterface. -
Record the stream using the
MediaRecorderAPI. - Provide a download link so users can save the recorded video.
Let’s look at the code implementation.
Example: Recording Video in the Browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Recorder</title>
</head>
<body>
<h1>Video Recorder using JavaScript</h1>
<video id="video" autoplay></video>
<button id="start-btn">Start Recording</button>
<button id="stop-btn" disabled>Stop Recording</button>
<video id="recorded-video" controls></video>
<a id="download-link" download="recorded-video.webm">Download Recorded Video</a>
<script>
const videoElement = document.getElementById('video');
const startButton = document.getElementById('start-btn');
const stopButton = document.getElementById('stop-btn');
const recordedVideoElement = document.getElementById('recorded-video');
const downloadLink = document.getElementById('download-link');
let mediaRecorder;
let recordedChunks = [];
// Access webcam
async function startVideoStream() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
// Set up MediaRecorder to record the stream
mediaRecorder = new MediaRecorder(stream);
// When data becomes available, store it
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
// When recording stops, create a video blob and show it
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
}
// Start recording
startButton.addEventListener('click', () => {
recordedChunks = [];
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
});
// Stop recording
stopButton.addEventListener('click', () => {
mediaRecorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
});
// Initialize the video stream
startVideoStream();
</script>
</body>
</html>
Breaking Down the Code:
1. Accessing the User's Webcam
We use the navigator.mediaDevices.getUserMedia() method to request access to the user's camera and microphone.
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
This method returns a Promise that resolves to a MediaStream object, which contains the live video and audio from the user's camera. The video is then displayed using the <video> element.
2. Recording the Video Stream
Once we have the live stream, we can create an instance of MediaRecorder to record the video.
mediaRecorder = new MediaRecorder(stream);
The MediaRecorder will capture the stream in chunks, and every time data is available, the ondataavailable event is fired. We store these chunks in an array called recordedChunks.
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
3. Stopping the Recording and Saving the Video
When the recording is stopped, we combine the chunks into a Blob and create a URL for downloading the video.
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
The video can now be played in the <video> element or downloaded using the <a> element.
Buttons and User Interaction
We added two buttons to control the recording:
-
Start Button: Starts the recording by calling
mediaRecorder.start(). -
Stop Button: Stops the recording by calling
mediaRecorder.stop().
The buttons are also disabled or enabled accordingly to prevent unnecessary interactions during the process.
Additional Features You Can Add
-
Pause/Resume Recording: You can add pause and resume buttons using the
mediaRecorder.pause()andmediaRecorder.resume()methods. -
Video Format: By default, the recording is saved as a
.webmfile, but you can change the MIME type depending on the browser's support, such asvideo/mp4. - Uploading Videos: You can extend the functionality to upload the recorded video to a server for further processing or analysis.
Conclusion
Recording videos directly in the browser using JavaScript has become incredibly simple with the MediaRecorder API and the getUserMedia() method. These tools enable you to build powerful, media-rich applications right inside the browser without requiring external software.
By following the example above, you can easily implement video recording functionality in your web applications, offering users the ability to record, preview, and download videos directly from their browser.
Top comments (0)