浏览器录屏：长Canvas合成帧率不稳

单独录屏很简单，但加入摄像头覆盖后，实时Canvas合成在长时间录制中帧率明显下降。开发者分享了其Chrome扩展 Browser Recorder 的架构经验。

要点：
- 浏览器可分别获取屏幕流和摄像头流，但Canvas实时合成需同时解码、绘制、编码，多时钟（60fps屏幕、30fps摄像头等）不同步导致丢帧。
- 5-10分钟录制时问题暴露，且无明显错误，仅导出视频不流畅。
- 解决方案：屏幕与摄像头分开录制，Canvas仅作预览，最终在导出阶段逐帧合成。
- 导出时利用 OffscreenCanvas 实现画中画、缩放、裁剪效果，支持 MP4/WebM/MOV/MKV 格式。
- 一个小坑：视频元数据加载前 videoWidth/videoHeight 为0，需在 loadedmetadata 事件后设置 Canvas 尺寸。

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub