react-media-recorder :o2: :video_camera: :microphone: :computer:

react-media-recorder 是一个完全类型化的 React 组件，具有渲染属性或 React hook，可用于：

录制音频/视频
录制屏幕

安装

npm i react-media-recorder

或

yarn add react-media-recorder

使用方法

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

const RecordView = () => (
  <div>
    <ReactMediaRecorder
      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>
);

由于 react-media-recording 使用渲染属性，您可以定义要在视图中渲染的内容。只需记得将 startRecording、stopRecording 和 mediaBlobUrl 连接到您的组件即可。

使用 React Hooks

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

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

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

该 hook 接收一个对象作为参数，该对象具有与 ReactMediaRecorder 相同的选项/属性（除了 render 函数）。

选项 / 属性

audio

可以是布尔值或 MediaTrackConstraints 对象。

类型：boolean 或 object
默认值：true

blobPropertyBag

来自 MDN：
一个可选的 BlobPropertyBag 字典，可以指定以下两个属性（用于 mediaBlob）：

type，表示将放入 blob 中的数组内容的 MIME 类型。
endings，默认值为 "transparent"，指定如何写出包含换行符 \n 的字符串。它有两个值之一："native"，表示换行符会更改以匹配主机操作系统文件系统约定，或 "transparent"，表示结尾存储在 blob 中时不会更改。

类型：object
默认值：
如果启用了 video，

{
   type: "video/mp4"
}

如果只启用了 audio，

{
  type: "audio/wav"
}

customMediaStream

媒体流对象本身（可选）

mediaRecorderOptions

一个可选的选项对象，将传递给 MediaRecorder。请注意，如果您通过 audio 或 video 属性和通过这个 mediaRecorderOptions 指定 MIME 类型，mediaRecorderOptions 具有更高的优先级。

类型：object
默认值：{}

onStart

当 MediaRecorder 开始时将被调用的 function。

类型：function()
默认值：() => null

onStop

当 MediaRecorder 停止时将被调用的 function。它将提供 blob 和 blob URL 作为其参数。

类型：function(blobUrl: string, blob: Blob)
默认值：() => null

stopStreamsOnStop

是否在停止时停止所有流。默认为 true

render

一个 function，接受一个包含字段：status、startRecording、stopRecording 和 mediaBlob 的对象。这个函数将返回一个 React 元素/组件。

类型：function
默认值：() => null

screen

一个 boolean 值。允许您录制当前屏幕。并非所有浏览器都支持此功能。请在此处查看可用性。请注意，目前 MediaRecorder 不会同时录制两个相同的流，如果您同时提供 screen 和 video 属性，屏幕捕获将优先于视频捕获。但是，您可以提供 video 属性（作为 MediaTrackConstraints），然后它将被屏幕捕获利用（例如，height、width 等）。

video

可以是布尔值或 MediaTrackConstraints 对象。

类型：boolean 或 object
默认值：false

askPermissionOnMount

一个布尔值。如果设置为 true，将在挂载时请求媒体权限。

类型：boolean 默认值：false

`render` 函数中可用的属性

error

一个字符串枚举。可能的值：

media_aborted
permission_denied
no_specified_media_found
media_in_use
invalid_media_constraints
no_constraints
recorder_error

status

一个字符串 enum。可能的值：

media_aborted
permission_denied
no_specified_media_found
media_in_use
invalid_media_constraints
no_constraints
recorder_error
idle
acquiring_media
recording
stopping
stopped

startRecording

一个 function，调用时开始录制。

pauseRecording

一个 function，调用时暂停录制。

resumeRecording

一个 function，调用时恢复录制。

stopRecording

一个 function，调用时停止录制。

muteAudio

一个 function，调用时静音音频轨道。

unmuteAudio

一个 function，调用时取消静音音频轨道。

mediaBlobUrl

一个 blob URL，可以连接到 <audio />、<video /> 或 <a /> 元素。

clearBlobUrl

一个 function，清除现有生成的 blob URL（如果有）并将工作流重置为初始 idle 状态。

isMuted

一个布尔属性，表示音频是否静音。

previewStream

如果您想为用户创建视频的实时预览，可以使用这个 stream 并将其附加到 <video /> 元素。请注意，这是一个静音流。这是设计如此，以避免笔记本电脑等机器上的内部麦克风反馈。

例如：

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