react record

如果你想在 React 中使用 WebRTC 技术来录制音频或视频，可以使用 `MediaRecorder` API。`MediaRecorder` 是一个用于录制媒体流的 API，可以录制音频或视频，并将录制的内容保存为 Blob 对象。

在 React 中使用 `MediaRecorder` 可以分为以下几个步骤：

1. 获取媒体流：通过调用 `navigator.mediaDevices.getUserMedia` 方法获取音频或视频的媒体流。

const [stream, setStream] = useState(null);

const handleStart = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({audio: true, video: false});
  setStream(stream);
};

2. 创建 `MediaRecorder` 实例：通过传入媒体流和一些配置参数，创建一个 `MediaRecorder` 实例。

const [mediaRecorder, setMediaRecorder] = useState(null);

useEffect(() => {
  if (stream) {
    const recorder = new MediaRecorder(stream);
    setMediaRecorder(recorder);
  }
}, [stream]);

3. 开始录制：调用 `MediaRecorder` 实例的 `start` 方法开始录制，录制的数据会存储在 `dataavailable` 事件中。

const handleClick = () => {
  mediaRecorder.start();
};

mediaRecorder.addEventListener('dataavailable', (event) => {
  const blob = new Blob([event.data], {type: 'audio/wav'});
  // 处理录制的数据
});

4. 停止录制：调用 `MediaRecorder` 实例的 `stop` 方法停止录制。

const handleClick = () => {
  mediaRecorder.stop();
};

需要注意的是，`MediaRecorder` API 并不是所有浏览器都支持，因此在使用之前需要先检测浏览器是否支持该 API。此外，由于涉及到媒体流的处理，需要注意对媒体流的释放，以免造成内存泄漏。

完整的 React 录制音频的示例代码如下：

import React, {useState, useEffect} from 'react';

function AudioRecorder() {
  const [stream, setStream] = useState(null);
  const [mediaRecorder, setMediaRecorder] = useState(null);

  const handleStart = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({audio: true, video: false});
    setStream(stream);
  };

  const handleClick = () => {
    mediaRecorder.start();
  };

  useEffect(() => {
    if (stream) {
      const recorder = new MediaRecorder(stream);
      setMediaRecorder(recorder);
    }
  }, [stream]);

  useEffect(() => {
    if (mediaRecorder) {
      const chunks = [];

      mediaRecorder.addEventListener('dataavailable', (event) => {
        chunks.push(event.data);
      });

      mediaRecorder.addEventListener('stop', () => {
        const blob = new Blob(chunks, {type: 'audio/wav'});
        // 处理录制的数据
      });
    }
  }, [mediaRecorder]);

  return (
    <div>
      <button onClick={handleStart}>开始录制</button>
      <button onClick={() => mediaRecorder && mediaRecorder.stop()}>停止录制</button>
    </div>
  );
}