"MediaRecorder API 实战：录制音视频流与编码输出"

概述MediaRecorder 允许将媒体流（摄像头/麦克风/屏幕）录制为可保存的片段（如 WebM）。通过 `dataavailable` 事件读取分片并合并为 Blob，实现本地保存或上传。需关注编码支持与权限。示例const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) const rec = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp8,opus' }) const chunks = [] rec.addEventListener('dataavailable', e => { if (e.data.size) chunks.push(e.data) }) rec.addEventListener('stop', () => { const blob = new Blob(chunks, { type: 'video/webm' }) const url = URL.createObjectURL(blob) const a = document.createElement('a'); a.href = url; a.download = 'record.webm'; a.click() URL.revokeObjectURL(url) }) rec.start(1000) // 每秒一个分片 // 停止录制 setTimeout(() => rec.stop(), 5000) 工程建议编码支持：查询 `MediaRecorder.isTypeSupported()`；根据平台使用不同编码（如 H.264）。权限与 UX：在用户手势下启动；清晰指示录制状态与时长；处理取消。大文件与上传：分片上传与断点续传；记录失败与重试策略。兼容：不支持时回退到 `canvas.captureStream()` 与 WebM 编码方案或原生应用。参考与验证MDN MediaRecorder 文档：https://developer.mozilla.org/docs/Web/API/MediaRecorderweb.dev 捕获与录制指南：https://web.dev/articles/media-recordingChrome 平台文档：https://developer.chrome.com/docs/web-platform/mediarecorder/