HTML录音不支持媒体流怎么办_HTML录音对媒体流影响【常见问题】-html教程-PHP中文网

mediarecorder 必须依赖 mediastream 才能工作，报错通常源于流未获取、无效或传参错误；需校验流有效性、确保 https 环境、避免手动 stop 流、正确管理生命周期。

html录音不支持媒体流怎么办_html录音对媒体流影响【常见问题】

MediaRecorder 不支持媒体流？这说法本身就不成立——它必须依赖 MediaStream 才能工作。如果你遇到“不支持”的报错，实际是流没拿到、流无效、或传错了对象。

这是最常见的一类错误，说明你根本没传入合法的 MediaStream 实例。

常见错误现象：

Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载
- 直接 new MediaRecorder(null) 或 new MediaRecorder(undefined)
- 忘记 await navigator.mediaDevices.getUserMedia()，导致 stream 还是 undefined
- 在 HTTP 环境下调用（非 https:// 或 @#@#@#@#@#@#@#@#@#@0），浏览器静默拒绝，返回 Promise.reject() 但未捕获
- 误把 HTMLAudioElement.srcObject 当作流使用，却没检查它是否已赋值（srcObject 初始为 null）
实操建议：
- 用 try/catch 包裹 getUserMedia 调用，显式处理 NotAllowedError、NotFoundError、SecurityError
- 拿到 stream 后立刻做校验：if (!stream || !stream.getAudioTracks().length) { /<em> 流无效 </em>/ }
- 非 localhost 的开发环境务必走 HTTPS，否则权限请求直接失败

这说明流虽然构造成功了，但已被关闭、或轨道被停掉，MediaRecorder 失去输入源。

常见错误现象：
- 调用了 stream.getTracks().forEach(t => t.stop()) 后还试图用这个 stream 初始化或启动 recorder
- 页面切后台时监听 visibilitychange 错误地调用了 stream.stop()（应只暂停 MediaRecorder）
- React/Vue 组件卸载时没清理引用，GC 回收了 stream，但 recorder 还持有着“僵尸”对象
实操建议：
- 不要手动 stop 整个 stream 来“关麦”，改用 track.enabled = false
- mediaRecorder.stop() 后，必须新建 MediaRecorder 实例才能再次使用，不能复用
- 监听 stream.oninactive，流失效时主动重置 recorder 状态和 UI

这不是流“不支持”，而是流里没有可用音频轨道，或轨道被静音/禁用。

常见错误现象：
- getUserMedia({ audio: true }) 成功，但设备实际没麦克风（如某些云桌面、无音频硬件的服务器渲染环境）
- Safari 旧版本要求写成 { audio: true, video: false }，单写 { audio: true } 可能返回空流
- 流来自 videoEl.captureStream()，但视频元素没播放、没音频轨道、或 iOS Safari 根本不支持该 API
实操建议：
- 检查 stream.getAudioTracks() 是否为空数组，再检查 track.readyState === 'live' 和 track.enabled === true
- 对 Safari 11+ 兜底：加 video: false 约束；对 iOS，放弃 captureStream()，改用 getUserMedia + Web Audio 合成（若允许录系统声则需服务端中转）
- 不要依赖 stream.clone() —— clone 出的流共享底层轨道，原 stream 一 stop，clone 的也失效