HTML中如何使用MediaRecorder API录制音视频-html教程-PHP中文网

必须先获取有效mediastream，再调用new mediarecorder(stream)；stream须来自用户授权的媒体设备，且含启用的音视频轨道，否则报typeerror；start()后必须监听dataavailable事件收集blob数据。

html中如何使用mediarecorder api录制音视频

直接调用 new MediaRecorder(stream) 会报错，前提是 stream 必须来自用户主动授权的媒体设备（如摄像头、麦克风），且不能是空流或仅含音频/视频但被静音/禁用的流。

常见错误现象：TypeError: Failed to construct 'MediaRecorder': The stream has no audio and no video tracks 或录制无声/无画面。

务必用 navigator.mediaDevices.getUserMedia({video: true, audio: true}) 显式请求权限，不能只传 {} 或依赖旧版 getUserMedia 写法
检查流中实际 track 状态：stream.getAudioTracks()[0]?.enabled === true，stream.getVideoTracks()[0]?.readyState === 'live'
移动端需注意：Safari 16.4+ 才支持视频录制；iOS Safari 默认禁用自动播放音频，可能影响录制后回放体验

MediaRecorder.start() 只是启动录制，不会自动生成文件。真正拿到音视频数据靠的是 dataavailable 事件触发时的 event.data —— 它是一个 Blob，类型由 options.mimeType 决定。

容易踩的坑：只监听 stop 事件却没处理 dataavailable，导致录制完成但无数据可保存。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

必须在 recorder.ondataavailable = e => { ... } 中收集 e.data，建议用数组暂存：chunks.push(e.data)
若未指定 timeslice，dataavailable 仅在 stop() 时触发一次；设为 1000 毫秒则每秒触发一次，适合大文件分片上传
注意 MIME 类型兼容性：video/webm;codecs=vp9,opus 在 Chrome 支持好，但 Safari 不支持 VP9，推荐 video/webm（自动选默认编码）或 audio/webm（纯音频）

stop() 是终止录制并立即触发 dataavailable 和 stop 事件；而 pause() 会暂停采集但不中断编码器状态，再次 resume() 时时间戳连续、无新初始化开销——但并非所有浏览器都完整支持 pause。

典型问题：调用 pause() 后 resume() 失败，或录制文件出现音画不同步。

把 new Blob(chunks) 转成下载链接，要用 window.URL.createObjectURL(blob)，但这个 URL 是临时的，页面卸载或显式 revokeObjectURL 后即失效。

常见疏漏：生成链接后没做清理，导致内存泄漏；或点击下载时 URL 已被回收，下载为空文件。

创建 a 标签并触发下载后，应尽快调用 window.URL.revokeObjectURL(url)，尤其在单页应用中反复录制时
不要在 click 事件外提前生成 URL 并长期缓存，避免因页面跳转或组件销毁导致失效
文件名扩展名要匹配 MIME 类型：video/webm → .webm，audio/webm → .weba 或 .webm（规范允许），否则某些系统无法识别