MediaRecorder API 教程

MediaRecorder API 教程

1. 简介

什么是 MediaRecorder API？

MediaRecorder 是 HTML5 提供的 JavaScript API，用于直接在浏览器中录制音频和视频流。它基于 MediaStream 接口，能够将捕获的媒体数据（如摄像头、麦克风或屏幕共享）编码为指定格式并保存。

应用场景

• 在线会议录制
• 语音/视频留言
• 屏幕录制工具
• 实时媒体处理与分析

浏览器兼容性

• 支持浏览器：Chrome 47+、Firefox 25+、Edge 79+、Safari 14.1+
• 不支持的浏览器：旧版 IE 和 Safari <14.1
• 推荐使用最新版浏览器以获得最佳兼容性。

2. 前置条件

基础知识要求

• HTML/CSS 基础
• JavaScript ES6+ 语法
• 了解异步编程（Promise、async/await）

开发环境配置

• 本地服务器（如 VS Code Live Server、http-server）
• HTTPS 环境（浏览器要求媒体设备权限必须在安全上下文中）

3. 快速入门

步骤 1：获取用户媒体权限

使用 navigator.mediaDevices.getUserMedia() 请求访问麦克风或摄像头：

// 请求音频和视频权限
const constraints = { audio: true, video: true };

navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    // 成功获取媒体流
    setupRecorder(stream);
  })
  .catch((error) => {
    console.error("无法获取媒体设备:", error);
  });

步骤 2：创建 MediaRecorder 实例

function setupRecorder(stream) {
  // 配置录制格式（例如：WebM 格式）
  const options = {
    mimeType: 'video/webm;codecs=vp9',
    audioBitsPerSecond: 128000, // 128 kbps 音频码率
    videoBitsPerSecond: 2500000 // 2.5 Mbps 视频码率
  };

  const mediaRecorder = new MediaRecorder(stream, options);
}

步骤 3：录制并保存数据

let recordedChunks = [];

// 当数据可用时触发
mediaRecorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

// 录制结束时生成文件
mediaRecorder.onstop = () => {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  // 创建下载链接
  const a = document.createElement('a');
  a.href = url;
  a.download = 'recording.webm';
  a.click();
};

// 开始录制（每 1000ms 收集一次数据）
mediaRecorder.start(1000);
// 停止录制
// mediaRecorder.stop();

4. 核心功能详解

配置参数

• mimeType: 指定媒体格式（如 video/webm, audio/webm, video/mp4）
• audioBitsPerSecond / videoBitsPerSecond: 控制音视频码率（影响文件大小与质量）

控制录制过程

• start(timeslice): 开始录制，timeslice 表示数据分片时长（单位：ms）
• stop(): 停止录制并触发 onstop
• pause() / resume(): 暂停或恢复录制

事件监听

• ondataavailable: 数据分片可用时触发
• onstart / onstop / onpause / onresume
• onerror: 错误处理

5. 示例代码

基础录音机（仅音频）

<button id="start">开始录音</button>
<button id="stop" disabled>停止并下载</button>

<script>
  let mediaRecorder;

  document.getElementById('start').addEventListener('click', async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream);
    const audioChunks = [];

    mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);
    mediaRecorder.onstop = () => {
      const blob = new Blob(audioChunks, { type: 'audio/webm' });
      const url = URL.createObjectURL(blob);
      // 自动下载
      const a = document.createElement('a');
      a.href = url;
      a.download = 'recording.webm';
      a.click();
    };

    mediaRecorder.start();
    document.getElementById('stop').disabled = false;
  });

  document.getElementById('stop').addEventListener('click', () => {
    mediaRecorder.stop();
  });
</script>

视频录制 + 实时预览

<video id="preview" autoplay muted></video>
<button id="record">开始录制</button>

<script>
  const videoPreview = document.getElementById('preview');
  const recordButton = document.getElementById('record');
  let isRecording = false;

  recordButton.addEventListener('click', async () => {
    if (!isRecording) {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      videoPreview.srcObject = stream;
      const recorder = new MediaRecorder(stream);
      
      recorder.start();
      isRecording = true;
      recordButton.textContent = '停止录制';

      recorder.onstop = () => {
        stream.getTracks().forEach(track => track.stop());
        videoPreview.srcObject = null;
      };
    } else {
      recorder.stop();
      isRecording = false;
      recordButton.textContent = '开始录制';
    }
  });
</script>

6. 最佳实践与注意事项

性能优化

• 根据需求调整分辨率和码率。
• 避免长时间录制，释放媒体资源（调用 stream.getTracks().stop()）。

错误处理

mediaRecorder.onerror = (event) => {
  console.error('录制错误:', event.error);
};

用户隐私

• 仅在用户交互（如点击按钮）后请求权限。
• 提供清晰的权限说明。