当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptMediaRecorderAPI入门指南

JavaScriptMediaRecorderAPI入门指南

2025-10-14 19:11:42 0浏览收藏

想轻松实现网页音视频录制？这篇**JavaScript MediaRecorder API使用教程**，带你从零开始掌握媒体录制技术！首先，你需要通过`getUserMedia()`获取用户音视频权限，创建`MediaRecorder`实例。教程详细讲解了如何配置`MediaRecorder`，监听`dataavailable`事件收集录制数据块，以及停止录制后合并数据并导出。本文还包含了MIME类型选择、数据处理、录制流程控制等关键细节，并强调了HTTPS环境的重要性。无论你是想录制音频、视频，还是音视频组合，都能通过本文快速上手，轻松实现网页录制功能。赶快来学习吧！

使用JavaScript的MediaRecorder API录制媒体流需先通过navigator.mediaDevices.getUserMedia()获取音视频权限并得到MediaStream，然后创建MediaRecorder实例，监听dataavailable事件收集Blob数据块，停止录制后合并为完整文件并导出，整个过程需在HTTPS环境下进行以确保权限正常请求。

如何利用JavaScript的MediaRecorder API录制媒体流？

要使用JavaScript的MediaRecorder API录制媒体流，核心是获取媒体输入（如摄像头或麦克风），创建一个MediaRecorder实例，并处理录制的数据。整个过程简单直接，适合录制音频、视频或音视频组合。

获取媒体流

使用navigator.mediaDevices.getUserMedia()请求用户的摄像头和/或麦克风权限，返回一个Promise，解析为MediaStream对象。

调用getUserMedia时传入所需媒体类型，例如只录音频：{ audio: true }，音视频一起：{ audio: true, video: true }
将获取到的流赋值给元素的srcObject以便预览

示例代码：

let stream;
try {
  stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
  document.getElementById('video').srcObject = stream;
} catch (err) {
  console.error("无法获取媒体流：", err);
}

创建并配置MediaRecorder

拿到媒体流后，用它创建MediaRecorder实例。浏览器会根据系统支持自动选择合适的MIME类型，但也可以手动指定。

检查可用的MIME类型可提升兼容性，例如video/webm;codecs=vp8或audio/webm
设置mediaRecorder = new MediaRecorder(stream)

建议判断是否支持特定类型：

const mimeType = 'video/webm';
if (MediaRecorder.isTypeSupported(mimeType)) {
  mediaRecorder = new MediaRecorder(stream, { mimeType });
}

处理录制数据

通过监听dataavailable事件收集录制的二进制数据块（Blob），最终合并成完整文件。

开始录制：mediaRecorder.start()
当停止时，触发dataavailable，把每次输出的Blob存入数组
使用Blob构造函数将所有片段合并

示例处理逻辑：

const chunks = [];
mediaRecorder.ondataavailable = event => {
  if (event.data.size > 0) {
    chunks.push(event.data);
  }
};

mediaRecorder.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();
};

控制录制流程

提供开始和停止按钮来控制录制状态。

点击“开始”触发mediaRecorder.start()
点击“停止”调用mediaRecorder.stop()，此时会触发dataavailable和onstop
注意：必须在停止后才能安全地处理数据

基本控制代码：

document.getElementById('startBtn').onclick = () => {
  chunks.length = 0;
  mediaRecorder.start();
};

document.getElementById('stopBtn').onclick = () => {
  mediaRecorder.stop();
};

基本上就这些。只要正确请求权限、创建记录器、收集数据并导出Blob，就能实现完整的媒体录制功能。不复杂但容易忽略细节，比如MIME类型兼容性和数据清理。确保在HTTPS环境下运行，因为现代浏览器要求安全上下文才能访问媒体设备。

以上就是《JavaScriptMediaRecorderAPI入门指南》的详细内容，更多关于blob,媒体流,MediaRecorderAPI,getUserMedia(),dataavailable的资料请关注golang学习网公众号！

blob 媒体流 MediaRecorderAPI getUserMedia() dataavailable