We Built a Video Rendering Engine by Lying to the Browser About What Time It Is
3 months ago
- #web-development
- #browser
- #video-rendering
- 浏览器是实时系统，由于帧时间不匹配，使得视频屏幕录制极具挑战性。
- 曾考虑过Remotion方案，但因需捕获不受框架限制的任意网页内容而被否决。
- 开发了JavaScript解决方案，通过用可控虚拟时钟替代浏览器时间相关API，实现确定性帧渲染。
- 实施了预热循环机制，通过持续发出'跳帧'指令防止Chrome合成器进入停滞状态。
- 针对<video>元素的复杂解决方案包括：服务端预处理、解复用、解码，以及与虚拟时钟同步的canvas渲染。
- 音频捕获通过拦截Web Audio API和HTMLMediaElement调用实现，追踪播放意图并在服务端重建音频。
- 采取额外措施确保确定性，例如禁用OffscreenCanvas，以及根据SSRF模式验证子资源请求。
- 该方案受WebVideoCreator启发，但针对现代Chrome API和特定云基础设施需求进行了适配。
- 计划开源该实现方案，为网页内容程序化生成视频提供技术参考。