react-media-recorder

Introduction to `react-media-recorder`

react-media-recorder is a versatile React component and hook that allows users to record audio and video, including screen captures, using the powerful MediaRecorder API. It is fully typed and offers a convenient and flexible approach to integrating media recording functionalities into React applications.

Installation

To get started with react-media-recorder, you need to install it using npm or yarn:

npm i react-media-recorder

yarn add react-media-recorder

Usage

Using React Component

The library provides the ReactMediaRecorder component, which uses a render prop pattern. Here’s a simple example of how to use it:

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>
);

With this setup, users can effectively manage the recording interface, using the status, startRecording, stopRecording, and mediaBlobUrl provided by the render prop function.

Using React Hook

Alternatively, react-media-recorder offers a React hook for component functionalities:

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>
  );
};

This hook simplifies component logic by exposing functions and values to be used directly.

Options / Props

react-media-recorder offers a range of options or props to configure its behavior:

audio: Can be a boolean or a MediaTrackConstraints object. By default, audio recording is enabled (true).
blobPropertyBag: Allows configuration of the Blob property. Defaults are video/mp4 for video, and audio/wav for audio-only recordings.
customMediaStream: A direct media stream can be set for recording.
mediaRecorderOptions: Additional options for the MediaRecorder API, taking higher precedence over audio or video prop specifications.
onStart and onStop: Functions invoked on start and stop actions of recording.
stopStreamsOnStop: Defines if all media streams should stop when recording stops, defaulting to true.
render: A render function that defines the component’s output.
screen: Enables screen recording when set to true.
video: Similar to the audio prop, but defaults to false.
askPermissionOnMount: If set to true, it requests media permissions upon component mount.

Additional Functionalities

The component exposes additional methods and properties such as:

error: Provides information about any errors during the recording.
status: Reports the current status of the recording process.
pauseRecording and resumeRecording: Functions to manage media recording sessions.
muteAudio and unmuteAudio: Functions to control the audio mute state.
mediaBlobUrl: The URL link to the recorded blob, which can be used in video or audio elements.
clearBlobUrl: Resets the media blob URL to clear previous recordings.
isMuted: Indicates if the audio is muted.
previewStream and previewAudioStream: Provide access to the video and audio streams for live previews and sound visualizations.

Contributing

Contributions to react-media-recorder are welcome. If you encounter bugs or have suggestions for enhancements, feel free to submit a pull request on the project’s repository. Happy Recording!

Introduction to react-media-recorder