答案是使用MediaRecorder API实现浏览器端音视频录制需先通过getUserMedia获取媒体流，再创建MediaRecorder实例并监听dataavailable事件收集数据，最后生成Blob文件下载；过程中需处理MIME类型兼容性问题以确保跨浏览器正常运行。
使用 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() 控制录制：
叮当好记-AI音视频转图文
193
AI音视频转录与总结，内容学习效率 x10！
193
查看详情
// 开始录制
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 的生命周期和数据收集，就能在浏览器中完成基础音视频录制功能。
相关标签：
浏览器 safari ai stream 浏览器端 safari 事件
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容