首页 > 文章 > 前端

浏览器音视频录制教程：MediaRecorder使用详解

时间：2026-01-02 22:31:01 206浏览收藏

今天golang学习网给大家带来了《MediaRecorder实现浏览器音视频录制教程》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

答案是使用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() 控制录制：

// 开始录制
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 的生命周期和数据收集，就能在浏览器中完成基础音视频录制功能。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

前往漫画官网入口并下载 ➜

浏览器录制