答案是使用MediaRecorder API实现浏览器端音视频录制需先通过getUserMedia获取媒体流，再创建MediaRecorder实例并监听dataavailable事件收集数据，最后生成Blob文件下载；过程中需处理MIME类型兼容性问题以确保跨浏览器正常运行。
使用 MediaRecorder API 实现浏览器端音视频录制，核心在于获取媒体输入流并将其记录为可用的媒体文件。整个过程不依赖插件，原生支持主流现代浏览器。
获取音视频输入流
调用 getUserMedia() 方法请求用户的摄像头和麦克风权限，获取媒体流：
navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(stream => { // 成功获取流，可绑定到
初始化并控制 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 的生命周期和数据收集，就能在浏览器中完成基础音视频录制功能。
以上就是如何用MediaRecorder API实现浏览器端音视频录制？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527167.html
微信扫一扫 
支付宝扫一扫 
