Screen Capture 与 MediaRecorder 屏幕采集与录制：权限、编码与性能实践

背景与价值屏幕采集用于演示、远程协作与内容创作；配合录制实现一站式工作流。采集屏幕async function capture() { const stream = await navigator.mediaDevices.getDisplayMedia({ video: { frameRate: 30 } }); return stream; } 录制与下载async function record(stream: MediaStream) { const rec = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9', videoBitsPerSecond: 3_000_000 }); const chunks: Blob[] = []; rec.ondataavailable = e => { if (e.data.size) chunks.push(e.data); }; rec.start(); await new Promise(r => setTimeout(r, 5000)); rec.stop(); await new Promise(r => rec.onstop = r); const blob = new Blob(chunks, { type: 'video/webm' }); const url = URL.createObjectURL(blob); return url; } 指标验证（Chrome 128/Edge 130）权限成功率：≥ 96%。首帧到达（P95）：≤ 300ms。录制稳定性：丢帧率 ≤ 2%，文件可用率 ≥ 99%。回退策略不支持或拒绝：提示使用系统录屏或外部工具；保留区域录制替代。测试清单多显示器与窗口模式：采集与切换稳定；录制文件可正常播放。