MediaRecorder 录制视频

`MediaRecorder`是一个Web API，用于在浏览器环境中捕获音频和视频数据，并将其编码成可存储的文件格式，如MP4。它主要用于实时录制用户的麦克风声音或屏幕内容。以下是使用`MediaRecorder`的基本流程：

1. **初始化**：创建`MediaRecorder`实例，指定要录制的媒体源，通常是`getUserMedia()`返回的媒体流。

if (typeof MediaRecorder === 'undefined') {
  console.log('MediaRecorder not supported in this browser');
} else {
  const mediaStream = getUserMedia({ audio: true, video: true });
  const recorder = new MediaRecorder(mediaStream);
}

2. **设置配置**：你可以选择不同的编码质量、比特率等参数，但这通常不需要显式设置，因为`MediaRecorder`会自动调整。

3. **开始和停止录制**：调用`start()`开始记录，`stop()`停止记录。记录的时间点由`dataavailable`事件触发，这时你可以从`data`属性获取到一帧的记录数据。

recorder.start();

recorder.ondataavailable = event => {
  const chunks = [];
  if (event.data.size > 0) {
    chunks.push(event.data);
  }
  
  if (event.data.size === Infinity || event.isLive) {
    // 如果数据无穷大或直播模式，则持续收集数据直到stop()
  }

  // 当所有数据收集完毕后，停止并生成文件
  recorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'video/mp4' });
    saveOrDownloadBlob(blob);
  };
};

recorder.stop();

4. **保存或下载**：`blob`对象代表了录制好的视频，你可以将其转化为URL或直接下载到本地。例如：

function saveOrDownloadBlob(blob) {
  const url = URL.createObjectURL(blob);
  // 下载或显示在页面上...
}