### Install react-media-recorder with npm

Source: https://github.com/deltacircuit/react-media-recorder/blob/master/README.md

Use npm to install the react-media-recorder package.

```bash
npm i react-media-recorder
```

--------------------------------

### Install react-media-recorder with yarn

Source: https://github.com/deltacircuit/react-media-recorder/blob/master/README.md

Use yarn to install the react-media-recorder package.

```bash
yarn add react-media-recorder
```

--------------------------------

### Screen Recording with Audio and Custom Video Constraints

Source: https://context7.com/deltacircuit/react-media-recorder/llms.txt

Enables screen recording, optionally including microphone audio. This example configures specific video constraints like resolution and frame rate, sets the MIME type for the recording, and uses `stopStreamsOnStop` to ensure streams are properly terminated. It also demonstrates how to exclude the current tab from screen sharing options using `selfBrowserSurface`.

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

const ScreenRecorder = () => {
  const {
    status,
    startRecording,
    stopRecording,
    mediaBlobUrl,
    error,
  } = useReactMediaRecorder({
    screen: true,
    audio: true, // Include microphone audio
    video: {
      width: 1920,
      height: 1080,
      frameRate: 30,
    },
    selfBrowserSurface: "exclude", // Exclude current tab from options
    preferCurrentTab: false,
    mediaRecorderOptions: {
      mimeType: "video/webm;codecs=vp9",
      videoBitsPerSecond: 2500000,
    },
    stopStreamsOnStop: true,
  });

  return (
    <div>
      <p>Status: {status}</p>
      {error && <p>Error: {error}</p>}
      <button onClick={startRecording} disabled={status === "recording"}>
        Share Screen
      </button>
      <button onClick={stopRecording} disabled={status !== "recording"}>
        Stop Sharing
      </button>
      {mediaBlobUrl && (
        <video src={mediaBlobUrl} controls style={{ maxWidth: "100%" }} />
      )}
    </div>
  );
};

```

--------------------------------

### Basic Video Recording with useReactMediaRecorder Hook

Source: https://context7.com/deltacircuit/react-media-recorder/llms.txt

Demonstrates basic video recording using the `useReactMediaRecorder` hook. It includes controls for starting, stopping, pausing, resuming, and clearing recordings, along with displaying the recording status and any errors. A live preview of the recorded video is shown.

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

// Basic video recording
const VideoRecorder = () => {
  const {
    status,
    startRecording,
    stopRecording,
    pauseRecording,
    resumeRecording,
    mediaBlobUrl,
    error,
    clearBlobUrl,
  } = useReactMediaRecorder({ video: true });

  return (
    <div>
      <p>Status: {status}</p>
      {error && <p>Error: {error}</p>}
      <button onClick={startRecording} disabled={status === "recording"}>
        Start Recording
      </button>
      <button onClick={pauseRecording} disabled={status !== "recording"}>
        Pause
      </button>
      <button onClick={resumeRecording} disabled={status !== "paused"}>
        Resume
      </button>
      <button onClick={stopRecording} disabled={status !== "recording" && status !== "paused"}>
        Stop Recording
      </button>
      <button onClick={clearBlobUrl} disabled={!mediaBlobUrl}>
        Clear
      </button>
      {mediaBlobUrl && <video src={mediaBlobUrl} controls autoPlay loop />}
    </div>
  );
};

```

--------------------------------

### Handle Recording Errors with Custom Messages

Source: https://context7.com/deltacircuit/react-media-recorder/llms.txt

Implement robust error handling for media recording. This snippet maps specific error codes to user-friendly messages, guiding users on how to resolve issues like permission denial or device conflicts.

```typescript
import { useReactMediaRecorder, RecorderErrors } from "react-media-recorder";

const RobustRecorder = () => {
  const { status, startRecording, stopRecording, mediaBlobUrl, error } = 
    useReactMediaRecorder({
      video: true,
      audio: true,
      askPermissionOnMount: true,
    });

  const getErrorMessage = (errorCode: string): string => {
    const errorMessages: Record<string, string> = {
      media_aborted: "Recording was aborted by the system.",
      permission_denied: "Camera/microphone permission was denied. Please allow access in browser settings.",
      no_specified_media_found: "No camera or microphone found on this device.",
      media_in_use: "Camera or microphone is being used by another application.",
      invalid_media_constraints: "The specified media constraints are not supported.",
      no_constraints: "No audio or video constraints were specified.",
      recorder_error: "An error occurred with the media recorder.",
    };
    return errorMessages[errorCode] || "An unknown error occurred.";
  };

  return (
    <div>
      <p>Status: {status}</p>
      {error && (
        <div className="error-panel" style={{ color: "red", padding: "10px" }}>
          <strong>Error:</strong> {getErrorMessage(error)}
        </div>
      )}
      <button onClick={startRecording} disabled={!!error || status === "recording"}>
        {error ? "Fix Error to Record" : "Start Recording"}
      </button>
      <button onClick={stopRecording} disabled={status !== "recording"}>
        Stop
      </button>
      {mediaBlobUrl && <video src={mediaBlobUrl} controls />}
    </div>
  );
};

```

--------------------------------

### Video Preview with React Media Recorder

Source: https://github.com/deltacircuit/react-media-recorder/blob/master/README.md

Demonstrates how to use the `previewStream` prop to display a live video preview to the user. The stream is muted by default to prevent audio feedback.

```tsx
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} />;
    }}
  />
);
```

--------------------------------

### Live Video Preview with useReactMediaRecorder

Source: https://context7.com/deltacircuit/react-media-recorder/llms.txt

Displays a live preview of the camera feed during recording. Requires the 'previewStream' from the hook. Ensure 'video: true' is set in the hook options.

```typescript
import {
  useReactMediaRecorder
} from "react-media-recorder";
import {
  useEffect,
  useRef
} from "react";

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={640} height={480} autoPlay muted />;
};

const LivePreviewRecorder = () => {
  const {
    status,
    startRecording,
    stopRecording,
    mediaBlobUrl,
    previewStream,
  } = useReactMediaRecorder({
    video: true,
    audio: true,
    askPermissionOnMount: true, // Request permissions immediately
  });

  return (
    <div>
      <h3>Live Preview (Status: {status})</h3>
      <VideoPreview stream={previewStream} />
      <div>
        <button onClick={startRecording}>Start</button>
        <button onClick={stopRecording}>Stop</button>
      </div>
      {mediaBlobUrl && (
        <div>
          <h3>Recorded Video</h3>
          <video src={mediaBlobUrl} controls />
          <a href={mediaBlobUrl} download="recording.mp4">
            Download Recording
          </a>
        </div>
      )}
    </div>
  );
};

```

--------------------------------

### Audio-Only Recording with Custom Constraints and Callbacks

Source: https://context7.com/deltacircuit/react-media-recorder/llms.txt

Configures the `useReactMediaRecorder` hook for audio-only recording, specifying custom audio constraints like echo cancellation and sample rate. It also includes `blobPropertyBag` for setting the MIME type to WAV and defines `onStart` and `onStop` callbacks to log recording events and handle the recorded blob, such as uploading it to a server.

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

const AudioRecorder = () => {
  const {
    status,
    startRecording,
    stopRecording,
    mediaBlobUrl,
    muteAudio,
    unMuteAudio,
    isAudioMuted,
  } = useReactMediaRecorder({
    audio: {
      echoCancellation: true,
      noiseSuppression: true,
      sampleRate: 44100,
    },
    video: false,
    blobPropertyBag: { type: "audio/wav" },
    onStart: () => console.log("Recording started"),
    onStop: (blobUrl, blob) => {
      console.log("Recording stopped, blob size:", blob.size);
      // Upload blob to server
      const formData = new FormData();
      formData.append("audio", blob, "recording.wav");
      // fetch("/api/upload", { method: "POST", body: formData });
    },
  });

  return (
    <div>
      <p>Status: {status} | Muted: {isAudioMuted ? "Yes" : "No"}</p>
      <button onClick={startRecording}>Record</button>
      <button onClick={stopRecording}>Stop</button>
      <button onClick={isAudioMuted ? unMuteAudio : muteAudio}>
        {isAudioMuted ? "Unmute" : "Mute"}
      </button>
      {mediaBlobUrl && <audio src={mediaBlobUrl} controls />}
    </div>
  );
};

```

--------------------------------

### Usage with React Hooks

Source: https://github.com/deltacircuit/react-media-recorder/blob/master/README.md

Shows how to integrate react-media-recorder using the useReactMediaRecorder hook for managing recording state and controls within a functional component.

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

```

--------------------------------

### Usage with React Component (Render Prop)

Source: https://github.com/deltacircuit/react-media-recorder/blob/master/README.md

Demonstrates how to use the ReactMediaRecorder component with a render prop to manage recording status, start/stop functions, and display the recorded media.

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

--------------------------------

### Default Media Recorder Options

Source: https://github.com/deltacircuit/react-media-recorder/blob/master/README.md

An empty object is the default for mediaRecorderOptions, which are passed directly to the MediaRecorder constructor.

```javascript
{}
```

--------------------------------

### Real-time Audio Visualization with Canvas

Source: https://context7.com/deltacircuit/react-media-recorder/llms.txt

Visualize audio input in real-time using the HTML Canvas element. This component processes the audio stream to draw frequency-based bars, providing visual feedback during recording.

```typescript
import { useReactMediaRecorder } from "react-media-recorder";
import { useEffect, useRef } from "react";

const AudioVisualizer = ({ stream }: { stream: MediaStream | null }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const animationRef = useRef<number>();

  useEffect(() => {
    if (!stream || !canvasRef.current) return;

    const audioContext = new AudioContext();
    const analyser = audioContext.createAnalyser();
    const source = audioContext.createMediaStreamSource(stream);
    source.connect(analyser);
    analyser.fftSize = 256;

    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d")!;

    const draw = () => {
      analyser.getByteFrequencyData(dataArray);
      ctx.fillStyle = "#000";
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      const barWidth = (canvas.width / bufferLength) * 2.5;
      let x = 0;

      for (let i = 0; i < bufferLength; i++) {
        const barHeight = dataArray[i] / 2;
        ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
        ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
        x += barWidth + 1;
      }

      animationRef.current = requestAnimationFrame(draw);
    };

    draw();

    return () => {
      if (animationRef.current) cancelAnimationFrame(animationRef.current);
      audioContext.close();
    };
  }, [stream]);

  return <canvas ref={canvasRef} width={400} height={100} />;
};

const RecorderWithVisualizer = () => {
  const { status, startRecording, stopRecording, mediaBlobUrl, previewAudioStream } = 
    useReactMediaRecorder({ audio: true, video: false, askPermissionOnMount: true });

  return (
    <div>
      <AudioVisualizer stream={previewAudioStream} />
      <p>Status: {status}</p>
      <button onClick={startRecording}>Record</button>
      <button onClick={stopRecording}>Stop</button>
      {mediaBlobUrl && <audio src={mediaBlobUrl} controls />}
    </div>
  );
};

```

--------------------------------

### Custom MediaStream Recording with useReactMediaRecorder

Source: https://context7.com/deltacircuit/react-media-recorder/llms.txt

Records using a custom MediaStream, ideal for canvas-based content or stream combinations. Set 'customMediaStream' in hook options and 'stopStreamsOnStop: false' to keep the custom stream active.

```typescript
import {
  useReactMediaRecorder
} from "react-media-recorder";
import {
  useEffect,
  useRef,
  useState
} from "react";

const CanvasRecorder = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [customStream, setCustomStream] = useState<MediaStream | null>(null);

  useEffect(() => {
    if (canvasRef.current) {
      // Create a stream from the canvas at 30fps
      const stream = canvasRef.current.captureStream(30);
      setCustomStream(stream);

      // Example: animate something on the canvas
      const ctx = canvasRef.current.getContext("2d");
      let frame = 0;
      const animate = () => {
        if (ctx) {
          ctx.fillStyle = `hsl(${frame % 360}, 70%, 50%)`;
          ctx.fillRect(0, 0, 640, 480);
          ctx.fillStyle = "white";
          ctx.font = "48px Arial";
          ctx.fillText(`Frame: ${frame}`, 200, 250);
        }
        frame++;
        requestAnimationFrame(animate);
      };
      animate();
    }
  }, []);

  const {
    status,
    startRecording,
    stopRecording,
    mediaBlobUrl,
  } = useReactMediaRecorder({
    customMediaStream: customStream,
    video: true,
    stopStreamsOnStop: false, // Keep canvas stream alive
  });

  return (
    <div>
      <canvas ref={canvasRef} width={640} height={480} />
      <p>Status: {status}</p>
      <button onClick={startRecording}>Record Canvas</button>
      <button onClick={stopRecording}>Stop</button>
      {mediaBlobUrl && <video src={mediaBlobUrl} controls />}
    </div>
  );
};

```

--------------------------------

### ReactMediaRecorder Render-Prop Component

Source: https://context7.com/deltacircuit/react-media-recorder/llms.txt

Provides a render-prop API for the media recorder, suitable for class components or declarative patterns. Handles recording controls and playback. The 'render' prop receives all recorder states and methods.

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

const RecordingComponent = () => (
  <ReactMediaRecorder
    video
    audio
    blobPropertyBag={{ type: "video/mp4" }}
    onStop={(blobUrl, blob) => {
      console.log("Recorded blob:", blob);
    }}
    render={({
      status,
      startRecording,
      stopRecording,
      pauseRecording,
      resumeRecording,
      mediaBlobUrl,
      error,
      previewStream,
      isAudioMuted,
      muteAudio,
      unMuteAudio,
      clearBlobUrl,
    }) => (
      <div className="recorder-container">
        <p>Recording Status: {status}</p>
        {error && <p className="error">Error: {error}</p>}

        <div className="controls">
          <button onClick={startRecording} disabled={status === "recording"}>
            Start
          </button>
          <button onClick={pauseRecording} disabled={status !== "recording"}>
            Pause
          </button>
          <button onClick={resumeRecording} disabled={status !== "paused"}>
            Resume
          </button>
          <button onClick={stopRecording} disabled={status === "idle" || status === "stopped"}>
            Stop
          </button>
          <button onClick={isAudioMuted ? unMuteAudio : muteAudio}>
            {isAudioMuted ? "Unmute" : "Mute"}
          </button>
        </div>

        {mediaBlobUrl && (
          <div className="playback">
            <video src={mediaBlobUrl} controls autoPlay loop />
            <button onClick={clearBlobUrl}>Clear Recording</button>
          </div>
        )}
      </div>
    )}
  />
);

```

--------------------------------

### ReactMediaRecorder Props

Source: https://github.com/deltacircuit/react-media-recorder/blob/master/README.md

This section details the props available for the ReactMediaRecorder component, which are accessible within the `render` function's callback.

```APIDOC
## ReactMediaRecorder Props

### error

A string enum representing the error that occurred during media recording. Possible values include:
- `media_aborted`
- `permission_denied`
- `no_specified_media_found`
- `media_in_use`
- `invalid_media_constraints`
- `no_constraints`
- `recorder_error`

### status

A string enum indicating the current status of the media recorder. Possible values include:
- `idle`
- `acquiring_media`
- `recording`
- `stopping`
- `stopped`
- `media_aborted`
- `permission_denied`
- `no_specified_media_found`
- `media_in_use`
- `invalid_media_constraints`
- `no_constraints`
- `recorder_error`

### startRecording

A function that initiates the media recording process when called.

### pauseRecording

A function that temporarily halts the ongoing media recording when called.

### resumeRecording

A function that resumes a paused media recording when called.

### stopRecording

A function that terminates the media recording process when called.

### muteAudio

A function that mutes the audio tracks of the media stream.

### unmuteAudio

A function that unmutes the audio tracks of the media stream.

### mediaBlobUrl

A Blob URL that can be used to reference the recorded media. This URL can be assigned to the `src` attribute of `<audio>`, `<video>`, or `<a>` elements.

### clearBlobUrl

A function that clears the currently generated Blob URL and resets the recorder to its initial `idle` state.

### isMuted

A boolean value indicating whether the audio is currently muted.

### previewStream

A `MediaStream` object that can be used to display a live video preview. This stream is muted by default to prevent audio feedback. It can be attached to a `<video />` element.

Example Usage:
```tsx
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} />;
    }}
  />
);
```

### previewAudioStream

A `MediaStream` object providing access to the live audio stream. This can be used for audio visualizations by connecting it to the Web Audio API's `AudioContext` and `AnalyserNode`.

### selfBrowserSurface

An enumerated value specifying browser behavior for tab capture. Possible values are:
- `include`: Hints the browser to include the current tab in capture choices.
- `exclude`: Hints the browser to exclude the current tab from capture choices.

Type: `undefined` | `'include'` | `'exclude'`
Default: `undefined`
```

--------------------------------

### Default Blob Property Bag for Audio Recording

Source: https://github.com/deltacircuit/react-media-recorder/blob/master/README.md

Specifies the default blob property bag when only audio recording is enabled, setting the MIME type to 'audio/wav'.

```javascript
{
  type: "audio/wav"
}
```

--------------------------------

### Default Blob Property Bag for Video Recording

Source: https://github.com/deltacircuit/react-media-recorder/blob/master/README.md

Specifies the default blob property bag when video recording is enabled, setting the MIME type to 'video/mp4'.

```javascript
{
   type: "video/mp4"
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.