如何用MediaRecorder API实现浏览器端音视频录制？-js教程-PHP中文网

如何用MediaRecorder API实现浏览器端音视频录制？

狼影

发布： 2025-10-06 22:20:02

原创

661人浏览过

答案是使用MediaRecorder API实现浏览器端音视频录制需先通过getUserMedia获取媒体流，再创建MediaRecorder实例并监听dataavailable事件收集数据，最后生成Blob文件下载；过程中需处理MIME类型兼容性问题以确保跨浏览器正常运行。

如何用mediarecorder api实现浏览器端音视频录制？

使用 MediaRecorder API 实现浏览器端音视频录制，核心在于获取媒体输入流并将其记录为可用的媒体文件。整个过程不依赖插件，原生支持主流现代浏览器。

获取音视频输入流

调用 getUserMedia() 方法请求用户的摄像头和麦克风权限，获取媒体流：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    // 成功获取流，可绑定到 <video> 标签预览
    videoElement.srcObject = stream;
    // 后续启动录制
  })
  .catch(err => {
    console.error("无法获取媒体设备：", err);
  });

登录后复制

初始化并控制 MediaRecorder

拿到媒体流后，创建 MediaRecorder 实例，设置输出格式（如 webm），并监听数据可用事件：

let chunks = [];
const recorder = new MediaRecorder(stream);

recorder.ondataavailable = event => {
  if (event.data.size > 0) {
    chunks.push(event.data);
  }
};

recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'recording.webm';
  a.click();
  URL.revokeObjectURL(url);
  chunks = [];
};

登录后复制

通过调用 start() 和 stop() 控制录制：

叮当好记-AI音视频转图文

AI音视频转录与总结，内容学习效率 x10！

193

查看详情

// 开始录制
recorder.start();

// 停止录制（例如10秒后）
setTimeout(() => {
  recorder.stop();
}, 10000);

登录后复制

处理兼容性与格式问题

不同浏览器支持的 MIME 类型可能不同，建议检测可用类型：

function getSupportedMimeTypes() {
  const types = ['video/webm', 'video/mp4', 'video/x-matroska'];
  return types.filter(type => MediaRecorder.isTypeSupported(type));
}

// 使用时选择第一个支持的
const options = { mimeType: getSupportedMimeTypes()[0] };
const recorder = new MediaRecorder(stream, options);

登录后复制

注意：Safari 对 MediaRecorder 支持较晚，部分旧版本可能不可用。

基本上就这些。掌握流的获取、Recorder 的生命周期和数据收集，就能在浏览器中完成基础音视频录制功能。

以上就是如何用MediaRecorder API实现浏览器端音视频录制？的详细内容，更多请关注php中文网其它相关文章！