使用JavaScript的MediaRecorder API录制媒体流需先通过navigator.mediaDevices.getUserMedia()获取音视频权限并得到MediaStream，然后创建MediaRecorder实例，监听dataavailable事件收集Blob数据块，停止录制后合并为完整文件并导出，整个过程需在HTTPS环境下进行以确保权限正常请求。
要使用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类型，但也可以手动指定。
立即学习“Java免费学习笔记（深入）”；
检查可用的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环境下运行，因为现代浏览器要求安全上下文才能访问媒体设备。
以上就是如何利用JavaScript的MediaRecorder API录制媒体流？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1522595.html
微信扫一扫 
支付宝扫一扫 
