使用cef离屏渲染技术实现在线教育课件和webrtc视频回放融合录制

早先使用声网、即构等第三方实时视频通讯引擎时，引擎提供方会提供服务端视频录制方案，但是在线教育课件是自己的，通常业界采用的方案是，课件保存上课过程的信令，回放时课件回放使用信令回放，即课件不是真实的视频而是HTML执行保存的信令来回放，同时配上录制的老师学生的视频的时间戳同步回放，回放重现整个上课过程。

方案本身就比较绕，使用起来也有很多缺点：

1. 需要专用的回放工具来回放，这就导致回放很难分享，观看也不便；

2. 不能实时生成回放，通常要课程结束一两个小时后才能生成；

3.不能实时转推

后来使用了webrtc方案，实现了老师学生视频和HTML的融合，开始也是参考声网方案，视频有单独的视频录制服务器，鉴于实际使用中的各种问题，后来考虑能否老师端录制上课工具画面，但是也有很多问题，比如上课完后要上传等，怎么录制声音等问题。

后来我偶然记起cef有离屏渲染功能，可以把整个页面渲染到内存，是否可以考虑服务端起一个cef进程，以旁观者的身份加载HTML的课堂，使用离屏渲染保存每一帧即可，于是马上安排人去试验，很顺利就保存了课件画面，遇到的问题是声音怎么录制，当时的问题是发布版本的cef都不支持单独获取一个页面的声音，那就只能录制整个电脑的声音，这样会导致一个问题，一台录制服务器智能同时录一堂课，否则同时录多堂课就串音了。

怎么办呢？没事找google,翻了-墙搜啊搜，发现cef有个未发布版本，支持了单独获取单个网页的声音，参考CefAudioMirrorDestination：

 

https://bitbucket.org/chromiumembedded/cef/src/58e1149c7127314072903d3d45b9ba8b9fd2fc92/libcef/browser/audio_mirror_destination.h?at=master&fileviewer=file-view-default

于是问题解决，下面是一些坑和注意点：

1. 页面上的一下拉框，cef返回是单独返回的，需要我们自行合成到页面背景

2. 一个页面会包含很多路声音流，需要自行混音成一路

3. cef依赖chromium包非常大几十个G，而且要翻他妈的墙，非常容易下载失败，所以找个稳定点的代理

 

此技术为本人原创，转载请附带原文链接，谢谢！