react-media-recorder

You can install react-media-recorder using npm or yarn.

npm i react-media-recorder

yarn add react-media-recorder

To show a live preview of the camera/screen, use the previewStream provided in the render function. Attach this stream to a <video> element's srcObject. Note that previewStream is muted by default to prevent audio feedback loops.

const VideoPreview = ({ stream }: { stream: MediaStream | null }) => {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (videoRef.current && stream) {
      videoRef.current.srcObject = stream;
    }
  }, [stream]);
  if (!stream) {
    return null;
  }
  return <video ref={videoRef} width={500} height={500} autoPlay controls />;
};

const App = () => (
  <ReactMediaRecorder
    video
    render={({ previewStream }) => {
      return <VideoPreview stream={previewStream} />;
    }}
  />
);

The ReactMediaRecorder component uses a render prop pattern. You provide a render function that receives an object containing the recording state and controls. You must wire up startRecording, stopRecording, and mediaBlobUrl to your UI elements to make them functional.

import { ReactMediaRecorder } from "react-media-recorder";

const RecordView = () => (
  <div>
    <ReactMediaRecorder
      video
      render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
        <div>
          <p>{status}</p>
          <button onClick={startRecording}>Start Recording</button>
          <button onClick={stopRecording}>Stop Recording</button>
          <video src={mediaBlobUrl} controls autoPlay loop />
        </div>
      )}
    />
  </div>
);

For a hook-based approach, use useReactMediaRecorder. The hook accepts an options object with the same properties as the ReactMediaRecorder component (excluding the render prop) and returns the recording state and controls.

import { useReactMediaRecorder } from "react-media-recorder";

const RecordView = () => {
  const { status, startRecording, stopRecording, mediaBlobUrl } =
    useReactMediaRecorder({ video: true });

  return (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
      <video src={mediaBlobUrl} controls autoPlay loop />
    </div>
  );
};

The ReactMediaRecorder component is a render-prop component that wraps the useReactMediaRecorder hook. It is useful for a quick implementation where you want to define your UI within a single component using a render function.

It accepts all the same configuration props as the hook, plus a render prop which receives the recorder's state and control functions.

import { ReactMediaRecorder } from 'react-media-recorder';

const MyRecorder = () => (
  <ReactMediaRecorder
    audio={true}
    video={true}
    render={({ startRecording, stopRecording, status }) => (
      <div>
        <p>Status: {status}</p>
        <button onClick={startRecording}>Start</button>
        <button onClick={stopRecording}>Stop</button>
      </div>
    )}
  />
);

The useReactMediaRecorder hook is the core logic provider for media recording. It manages media stream acquisition, the MediaRecorder lifecycle, and provides state updates for recording status, errors, and the resulting media blob URL.

It supports audio, video, and screen recording. You can pass custom constraints for audio/video tracks or provide a customMediaStream to bypass the default acquisition logic.

import { useReactMediaRecorder } from 'react-media-recorder';

const { 
  startRecording, 
  stopRecording, 
  status, 
  mediaBlobUrl 
} = useReactMediaRecorder({
  audio: true,
  video: true,
  onStop: (blobUrl, blob) => {
    console.log('Recording stopped:', blobUrl);
  }
});

The recorder uses specific enums and types to communicate state and errors.

StatusMessages: "media_aborted", "permission_denied", "no_specified_media_found", "media_in_use", "invalid_media_constraints", "no_constraints", "recorder_error", "idle", "acquiring_media", "delayed_start", "recording", "stopping", "stopped", "paused".

RecorderErrors (mapped to the error prop):

• AbortError: "media_aborted"
• NotAllowedError: "permission_denied"
• NotFoundError: "no_specified_media_found"
• NotReadableError: "media_in_use"
• OverconstrainedError: "invalid_media_constraints"
• TypeError: "no_constraints"
• NO_RECORDER: "recorder_error"