JS 移动端视频处理如何使用 MediaRecorder API 实现视频录制与剪辑

MediaRecorder API是浏览器提供的原生媒体录制接口，支持将麦克风、摄像头采集的媒体流录制为指定格式的媒体文件，在移动端浏览器中兼容性较好，适合实现轻量级的视频录制与剪辑功能。

MediaRecorder API 基础认知

MediaRecorder 是浏览器提供的构造函数，用于录制由 MediaStream 对象生成的媒体数据，录制的文件支持多种格式，移动端常用的是 MP4 和 WebM 格式。

核心属性与方法

• mimeType：指定录制的媒体格式，比如 video/mp4、video/webm 等
• state：录制状态，包含 inactive、recording、paused 三种状态
• start()：开始录制操作
• stop()：停止录制操作
• pause()：暂停录制操作
• resume()：恢复录制操作

事件监听

MediaRecorder 实例支持多个事件，最常用的两个是：

• dataavailable：录制过程中有数据产出时触发，停止录制时会返回完整的录制数据
• stop：录制停止时触发，可以在该事件中获取最终的录制文件

移动端视频录制实现步骤

第一步：获取摄像头媒体流

首先需要调用浏览器的媒体设备接口，获取移动端摄像头的视频流和麦克风的音频流。

// 获取摄像头和麦克风的媒体流
async function getMediaStream() {
  try {
    // 移动端优先使用后置摄像头，可调整 facingMode 参数
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        facingMode: 'environment', // 后置摄像头，front 为前置
        width: { ideal: 1280 },
        height: { ideal: 720 }
      },
      audio: true
    });
    return stream;
  } catch (error) {
    console.error('获取媒体流失败:', error);
    return null;
  }
}

第二步：初始化录制器并开始录制

拿到媒体流之后，初始化 MediaRecorder 实例，绑定事件并开始录制。

let mediaRecorder = null;
let recordedChunks = []; // 存储录制的数据片段

async function startRecord() {
  const stream = await getMediaStream();
  if (!stream) return;
  
  // 初始化 MediaRecorder，指定录制格式
  const options = { mimeType: 'video/mp4' };
  // 检查当前浏览器是否支持该格式
  if (!MediaRecorder.isTypeSupported(options.mimeType)) {
    console.warn('当前浏览器不支持 video/mp4 格式，切换为 video/webm');
    options.mimeType = 'video/webm';
  }
  
  mediaRecorder = new MediaRecorder(stream, options);
  
  // 监听数据产出事件
  mediaRecorder.ondataavailable = (event) => {
    if (event.data && event.data.size > 0) {
      recordedChunks.push(event.data);
    }
  };
  
  // 监听录制停止事件
  mediaRecorder.onstop = () => {
    // 生成最终的录制文件
    const recordedBlob = new Blob(recordedChunks, { type: options.mimeType });
    // 可以将 Blob 转为 URL 用于预览
    const videoUrl = URL.createObjectURL(recordedBlob);
    console.log('录制完成，视频地址:', videoUrl);
    // 清空存储的片段
    recordedChunks = [];
    // 停止所有媒体流轨道，释放资源
    stream.getTracks().forEach(track => track.stop());
  };
  
  // 开始录制，每1000ms收集一次数据
  mediaRecorder.start(1000);
}

第三步：停止录制

调用 stop 方法即可停止录制，触发 onstop 事件获取最终文件。

function stopRecord() {
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop();
  }
}

简单视频剪辑实现

MediaRecorder 本身不支持直接的剪辑操作，我们可以结合 Blob 的切片能力和 MediaSource API 实现简单的片段剪辑，比如截取录制视频的某一段内容。

剪辑核心逻辑

思路是将完整的录制文件转为 ArrayBuffer，根据时间比例计算需要截取的字节范围，再生成新的 Blob 文件。

/**
 * 简单视频剪辑函数
 * @param {Blob} videoBlob 原始视频Blob
 * @param {number} startTime 开始时间（秒）
 * @param {number} endTime 结束时间（秒）
 * @param {number} totalDuration 视频总时长（秒）
 * @returns {Promise<Blob>} 剪辑后的视频Blob
 */
async function clipVideo(videoBlob, startTime, endTime, totalDuration) {
  // 将Blob转为ArrayBuffer
  const arrayBuffer = await videoBlob.arrayBuffer();
  const totalBytes = arrayBuffer.byteLength;
  
  // 根据时间比例计算字节起始和结束位置
  const startByte = Math.floor((startTime / totalDuration) * totalBytes);
  const endByte = Math.floor((endTime / totalDuration) * totalBytes);
  
  // 截取对应范围的字节数据
  const clippedArrayBuffer = arrayBuffer.slice(startByte, endByte);
  // 生成新的视频Blob
  const clippedBlob = new Blob([clippedArrayBuffer], { type: videoBlob.type });
  return clippedBlob;
}

剪辑使用示例

// 假设已经获取到录制完成的 videoBlob，总时长为10秒
// 截取第2秒到第5秒的片段
clipVideo(videoBlob, 2, 5, 10).then(clippedBlob => {
  const clippedUrl = URL.createObjectURL(clippedBlob);
  console.log('剪辑后的视频地址:', clippedUrl);
});

注意事项

• 移动端浏览器需要在 HTTPS 环境下才能调用 getUserMedia 接口，本地开发可以使用 localhost 环境
• 不同浏览器支持的录制格式不同，建议先通过 MediaRecorder.isTypeSupported() 方法检测格式兼容性
• 录制完成后及时停止媒体流轨道，避免占用摄像头和麦克风资源
• 视频剪辑的字节计算方式是近似值，对剪辑精度要求高的场景需要结合视频元数据解析实现

MediaRecorder_APIJS视频录制移动端视频处理视频剪辑修改时间：2026-06-19 02:15:41