Electron录屏webm传输流用ffmpeg生成时间戳的提速及小体积录制方案

基础场景 #

• 参照对应Electron录屏存储教程实现功能，可正常完成屏幕录制与文件生成
• 初始生成的录制文件为Chrome MediaRecorder输出的WebM（VP9编码）流文件：可在Chrome浏览器中正常播放，但无法拖动进度条调整播放位置
• 初始尝试的后处理命令为：ffmpeg -fflags +genpts -i in.webm out.webm
• 命令实际执行效果与预期不符：
  • 预期仅补全视频时间戳，修复进度条拖动失效问题
  • 实际输出的out.webm体积仅为原in.webm的1/15，未观察到画质下降
  • 处理耗时与视频本身时长基本持平，运行效率偏低

现象原理解析 #

通过ffmpeg、ffprobe的输出日志可定位核心原因：

1. 进度条失效原因：ffprobe in.webm返回的元数据中，Duration值为N/A，容器内缺失完整的时间戳索引，播放器无法定位任意时间点的视频帧，因此进度条无法拖动
2. 体积缩小原因：上述ffmpeg命令未指定流拷贝参数，默认触发全量重编码，流映射逻辑为vp9 (native) -> vp9 (libvpx-vp9)；未配置编码参数时，libvpx-vp9默认采用CRF 32的质量等级输出，编码效率远高于Chrome MediaRecorder的默认录制参数，因此输出体积大幅降低
3. 处理耗时偏长原因：2K分辨率下的纯软件VP9重编码速度仅约0.5x实时，因此处理17秒视频需要约34秒，和视频时长基本持平

问题解决方案 #

快速完成时间戳修复（无重编码） #

• 调整ffmpeg命令，增加流拷贝参数，完全跳过解码、重编码步骤：
  ffmpeg -fflags +genpts -c copy -i in.webm out.webm
• 执行该命令时仅会重新生成WebM容器的索引结构、补全缺失的PTS时间戳，完全保留原视频的编码内容，不会改变原文件的画质与体积，处理速度可达数十倍实时，几秒即可完成长视频修复

录制阶段直接生成小体积文件 #

Chrome MediaRecorder默认录制码率冗余度高，仅在webkitGetUserMedia中设置maxFrameRate: 30不足以控制文件体积，需在MediaRecorder初始化时补充配置：

• 明确指定编码格式为mimeType: 'video/webm;codecs=vp9'
• 配置目标视频码率参数videoBitsPerSecond，2K分辨率下设置400kbps~1Mbps的码率，即可达到和ffmpeg重编码后一致的体积水平，无需后续处理

内容的提问来源于stack exchange，提问作者Vlad Feinstein