前端网页录屏方案

目标

我们的短视频项目,出于性能的考虑,需要在浏览器端对动态网页进行录屏

什么是服务端渲染?

我们的应用,其实分为三个部分:

  • 渲染
  • 展示
  • 录制

渲染是真正耗费性能的环节,必须依赖GPU。我们目前就是卡在这一步了,如果渲染本身就很卡了,后面你怎么录制都是有问题的。

展示和录制似乎依赖于硬件的帧数限制。

我们完全可以将渲染云端化,因为真正耗费资源的就是渲染。

显示器只当成一个display的终端即可。

Serverless云渲染

云端WebGPU渲染

服务端不会受限于用户的设备,因此我们可以用最新的技术,比如目前尚处于测试阶段的WebGPU。

(腾讯)Chrome 渲染到虚拟 X-server,并通过 FFmpeg 抓取系统桌桌

通过启动 xvfb 启动虚拟 X-server,Chrome 进⾏全屏显示渲染到虚拟 X-server 上,并通过 FFmpeg 抓取系统屏幕以及采集系统声⾳并进⾏编码写⽂件。这种⽅式的适配性⾮常好, 不仅可以录制 Chrome,理论上也可以录制其他的应⽤。缺点是占⽤的内存和 CPU 较多。

技术方案

OBS

OBS是开源的录屏软件,且在各端都支持。

https://obsproject.com/

这个似乎很强大,可以看做是一组工具的集合?

OBS VS. FFmpeg CLI

This would be good for me as well, as I use OBS as a digital signage/live broadcast graphics system at work. The scenes are already created in OBS, and everything is controlled via OBS-Websockets from a tablet. I’d like the ability to run it headless. This would differ from ffmpeg-cli as it would still use OBS’ compositor to render the scenes/transitions/webpages/3d transformations/etc.

思考:OBS背后是基于FFmpeg实现的?

obs-headless

docker-obs-studio-headless

FFmpeg CLI

参考资料