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%。回退策略不支持或拒绝：提示使用系统录屏或外部工具；保留区域录制替代。测试清单多显示器与窗口模式：采集与切换稳定；录制文件可正常播放。