Building Custom Audio and Video Recorders in React

Prerequisites

To follow along with this tutorial, you’ll need:

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

Scaffolding a New React App

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:

import React, { useState } from 'eact';

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 [audioBlob, setAudioBlob] = 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 (
    <div>
      <button onClick={getMicrophonePermission}>Get Microphone Permission</button>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
    </div>
  );
};

export default AudioRecorder;

We’ll continue building on this component in the next section.