Building Custom Audio and Video Recorders in React

In today’s remote and hybrid work environment, asynchronous communication is becoming increasingly important. To facilitate this, organizations need to adopt tools that enable easy recording and sharing of audio and video messages. In this article, we’ll explore how to build custom audio and video recorders in React using the native HTML MediaRecorder API and MediaStream API.

Prerequisites

• Node.js installed on your machine
• Working knowledge of JavaScript and React

Scaffolding a New React App

First, let’s create a new React app using Vite, a fast and lightweight build tool. Run the following command in your terminal:

npm init vite@latest

Follow the prompts to set up your project, choosing React as the framework and JavaScript as the variant.

The MediaRecorder API

To record audio or video, we need to access the user’s media devices. The MediaRecorder API provides a way to do this. We’ll use the MediaDevices.getUserMedia() function to request permission to access the user’s camera and microphone.

Creating the Demo App Interface

Let’s create the interface for our demo app. We’ll have two components: AudioRecorder and VideoRecorder.

AudioRecorder Component

Create a new file called AudioRecorder.jsx and add the following code:
“`jsx
import React, { useState } from ‘react’;

const AudioRecorder = () => {
const [permission, setPermission] = useState(false);
const [mediaRecorder, setMediaRecorder] = useState(null);
const [recordingStatus, setRecordingStatus] = useState(‘inactive’);
const [stream, setStream] = useState(null);
const [audioChunks, setAudioChunks] = useState([]);
const [audio, setAudio] = useState(null);

const getMicrophonePermission = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
setStream(stream);
setPermission(true);
} catch (error) {
console.error(error);
}
};

const startRecording = async () => {
if (permission && stream) {
const mediaRecorder = new MediaRecorder(stream);
setMediaRecorder(mediaRecorder);
mediaRecorder.start();
setRecordingStatus(‘recording’);
}
};

const stopRecording = async () => {
if (mediaRecorder) {
mediaRecorder.stop();
setRecordingStatus(‘inactive’);
}
};

return (

);
};

export default AudioRecorder;
“`
This component requests permission to access the user’s microphone, starts and stops recording, and displays the recorded audio.

VideoRecorder Component

Create a new file called VideoRecorder.jsx and add the following code:
“`jsx
import React, { useState } from ‘react’;

const VideoRecorder = () => {
const [permission, setPermission] = useState(false);
const [liveVideoFeed, setLiveVideoFeed] = useState(null);
const [recordingStatus, setRecordingStatus] = useState(‘inactive’);
const [stream, setStream] = useState(null);
const [videoChunks, setVideoChunks] = useState([]);
const [recordedVideo, setRecordedVideo] = useState(null);

const getCameraPermission = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
setStream(stream);
setPermission(true);
} catch (error) {
console.error(error);
}
};

const startRecording = async () => {
if (permission && stream) {
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
setRecordingStatus(‘recording’);
}
};

const stopRecording = async () => {
if (mediaRecorder) {
mediaRecorder.stop();
setRecordingStatus(‘inactive’);
}
};

return (

);
};

export default VideoRecorder;
“`
This component requests permission to access the user’s camera, starts and stops recording, and displays the recorded video.

Styling Our Application

Add the following styles to your index.css file:
“`css
body {
font-family: Arial, sans-serif;
}

.audio-recorder {
width: 50%;
margin: 20px auto;
}

.video-recorder {
width: 50%;
margin: 20px auto;
}
“`
Rendering Our Components

Update your App.jsx file to render the AudioRecorder and VideoRecorder components:
“`jsx
import React from ‘react’;
import AudioRecorder from ‘./AudioRecorder’;
import VideoRecorder from ‘./VideoRecorder’;

const App = () => {
return (

);
};

export default App;
“`
That’s it! You now have a working custom audio and video recorder application built with React and the MediaRecorder API.

Alternatives

If you don’t want to build your own custom recorders, you can use libraries like RecordRTC, react-media-recorder, or react-video-recorder. These libraries provide pre-built components and utilities for recording audio and video.

Note: This article is for educational purposes only. You should always follow best practices and guidelines when building applications that access user media devices.