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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-06

浏览次数：次

返回列表

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

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

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

获取音视频输入流

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

n*igator.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.ondata*ailable = 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() 控制录制：

UXbot

AI产品设计工具

185 查看详情 UXbot

// 开始录制
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实现浏览器端音视频录制？的详细内容，更多请关注其它相关文章！

# 能在 # 谷歌seo排名需要多久时间 # 青岛seo数据监控 # 医学文献网站建设 # 热点内容营销软文推广 # 淄博seo方案公司排名 # 西苑商城网站建设 # 网站性能优化服务器设计 # 短视频推广官方入口网站 # 购物网站做优化推广价格 # 网站建设维护文案策划 # 中文网 # 相关文章 # 浏览器录制 # 第一个 # 有哪些 # 更受欢迎 # 它比 # 如何用 # 如何使用 # 音视频 # 浏览器端 # stream # ai # safari # 浏览器