React-Media-Recorder 2025 升级版：优化录制流程，支持自定义配置

npm install react-media-recorder

yarn add react-media-recorder

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

const RecordView = () => (
  <div>
    <ReactMediaRecorder
      audio
      video
      render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
        <div>
          <p>{status}</p>
          <button onClick={startRecording}>开始录制</button>
          <button onClick={stopRecording}>停止录制</button>
          <video src={mediaBlobUrl} controls autoPlay loop />
        </div>
      )}
    />
  </div>
);

<ReactMediaRecorder
  audio={{ echoCancellation: true }}
  video={{ width: , height:  }}
  render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
    // 你的 UI 代码
  )}
/>

<ReactMediaRecorder
  blobPropertyBag={{ type: 'video/mp4' }}
  mediaRecorderOptions={{ mimeType: 'video/mp4' }}
  render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
    // 你的 UI 代码
  )}
/>

const {
  pauseRecording,
  resumeRecording,
  muteAudio,
  unmuteAudio
} = useReactMediaRecorder();