HTML5媒体流实时录制与下载需在浏览器内完成“流→录→存→下”闭环。关键步骤：获取本地流（getUserMedia/captureStream/getDisplayMedia/Canvas兜底）、用MediaRecorder录制（指定webm编码）、合并Blob、生成URL下载并及时释放资源。
HTML5 媒体流的实时录制与文件下载，核心是“流→录→存→下”四步闭环，不依赖后端中转，全程在浏览器内完成。关键在于正确获取可录制流、稳定触发录制、可靠合并数据、安全生成下载链接。
确保可录制的媒体流来源
MediaRecorder 只能录制本地 MediaStream，不能直接录远程视频（如 YouTube 直播页的 <video>）。必须先将内容转为本地流：
- 摄像头/麦克风：用
navigator.mediaDevices.getUserMedia({ video: true, audio: true })获取原始流 - 网页内播放的直播或点播：对
<video id="player">调用player.captureStream()（Chrome/Safari 支持良好；Firefox 对 HLS 流支持有限） - 屏幕录制：用
navigator.mediaDevices.getDisplayMedia({ video: true, audio: false })，注意音频需显式声明且系统可能限制系统声音捕获 - 兼容兜底：若
captureStream不可用，可将<video>绘制到<canvas>，再调用canvas.captureStream()，但需额外同步音频轨道
启动与控制 MediaRecorder 实例
流就绪后，创建录制器并监听关键事件：
- 指定 mimeType（推荐
video/webm; codecs=vp9,opus或audio/webm; codecs=opus），避免使用mp4——多数浏览器暂不支持客户端原生 MP4 编码 - 用
recorder.state === 'inactive'判断是否可调用start()；录制中状态为recording - 绑定
dataavailable事件，每次触发都把event.data（Blob）推入数组（如chunks = []） - 录制结束时调用
stop()，不要手动调用requestData()—— 它已被废弃
合并 Blob 并生成可下载文件
停止录制后，dataavailable 会最后一次触发，此时 chunks 已完整：
立即学习“前端免费学习笔记（深入）”；
- 构造 Blob：
const blob = new Blob(chunks, { type: 'video/webm' })，type 必须与录制时 mimeType 一致 - 生成临时 URL：
const url = URL.createObjectURL(blob)，这是唯一安全访问 Blob 的方式 - 创建下载链接：
<a href="${url}" download="recording.webm"></a>，插入 DOM 后调用.click() - 务必在下载完成后执行
URL.revokeObjectURL(url)，释放内存，防止泄漏
资源清理与异常处理
用户交互和浏览器行为可能导致中断，需主动管理：
- 录制结束或取消时，遍历流中所有 track 并调用
track.stop()，尤其摄像头/麦克风流，否则设备指示灯可能常亮 - 监听
recorder.onerror和stream.oninactive，提示“录制失败，请检查权限或刷新页面” - 若用户中途关闭标签页，可在
beforeunload中尝试recorder.stop()，但无法保证 dataavailable 一定触发，建议引导用户主动停止 - 移动端需注意：部分 Android 浏览器对
getDisplayMedia或长时间录制有限制，建议加提示“请使用 Chrome 或 Edge 桌面版以获得最佳体验”
