腾讯在线教育的Web音视频架构方案

音视频技术的应用场景随着 Web 技术的发展越来越丰富，在游戏直播、游戏娱乐、在线教育等领域都有不错的发展。如何利用音视频架构方案提升直播互动体验？WebRTC 音视频通话技术又有哪些优势？

腾讯高级前端开发工程师刘志龙将在 12 月 20～21 日的 GMTC 全球大前端技术大会 (深圳站) 上分享主题为《在线教育的 Web 音视频架构方案》的演讲。GMTC 在会前采访了刘志龙老师，带大家了解腾讯在线教育的 Web 音视频架构方案的研发背景，看看腾讯是如何实践在线教育音视频架构方案的。通过腾讯的 Web 音视频架构方案，迅速了解 WebRTC 如何实现多人场景？下行如何播放多路流？

刘志龙： 随着 WebRTC API 标准的形成，与其生态系统的快速成长，开发者可以轻松地在他们的应用中集成实时通信模块。随着各大主流浏览器对 WebRTC 的支持，所有浏览器之间无插件化的音视频互通已经成为一种可能。

刘志龙：（1）延迟低， 用户体验相对会比较好；（2）浏览器原生支持，接入门槛低，跨平台；（3）兼容性越来越好。

刘志龙：（1）腾讯课堂需要给机构提供录播能力，后来发现盗播严重，所以有了 HLS 防盗链 + 标准加密的方案；（2）Adobe 宣布 2020 年停止支持 Flash，推进了课堂直播方案的更改，目前 PC 直播采用 WebRTC + RTMP，H5 直播采用 WebRTC + HLS，小程序使用 RTMP；（3）机构需要回放能力，所以又有了回放生成、回放混流等方案。

刘志龙：WebRTC P2P 在真正业务实践中不可行，改成了 P2S 方案。WebRTC 浏览器兼容性不好，设计了 Adapter 增加语法前缀等，以及完备的 RTMP 和 HLS 的降级方案。

刘志龙： 连麦互动直播的方式提升了学生的参与感和老师的互动。整个方案大致是主播与连麦观众进行实时音视频互动，同时将直播间连麦的视频画面混流转码，通过旁路直播让普通观众看到“合成画面”。这样实现了连麦观众的低延时，同时也能支持多个普通观众。

刘志龙： 实现 WebRTC 多人场景，最容易想到的是每个端与其他端互连，但是这个方案也有明显的缺陷。以五个人来说，两两建立连接意味着每个人与其他人要建立四个连接，带宽和编解码的消耗都会很大。更合理的是 MCU/SFU 结构（如下图），老师和多个学生的场景，每个端通过中心的 server，只需要建立一个连接，整个方案只消耗四个连接，老师端和学生端的压力都会变得小很多。

刘志龙： 音视频流按照一定的规则生成一个 ssrcid，并把 ssrcid 和 trackid 的映射关系通过信令服务器下发给浏览器。同时在下发音视频包的时候，会带上 ssrcid，浏览器底层解析 RTP 包得到 ssrcid，通过前面获得的映射关系，把解析好的音视频流数据喂给对应 trackid 绑定的 stream 对象上。

刘志龙：PPT 信令化、H265 的一些尝试、录播成功率的提高等。

刘志龙，腾讯 IMWeb 前端团队成员，高级前端开发工程师，负责腾讯课堂的前端开发。专注于 Web 前端，热爱 Web 安全。现在主要负责腾讯课堂移动端 H5/RN 项目的开发，以及腾讯课堂音视频相关业务。

在即将到来的 GMTC 深圳 2019 上，刘志龙老师还会具体分享，腾讯 Web 直播与点播的发展和现状、腾讯在线教育的音视频整体架构、点播架构与教育内容版权保护方案、在线教育实时直播方案及 WebRTC 实践等。

除了让你了解腾讯在线教育点播、直播的整体架构，以及点播、直播在具体业务实践中的优化细节，你还能了解 WebRTC SDK 的实现。

除了刘志龙老师的分享，本次 GMTC 还设置了小程序挑战与应对、音视频技术、Serverless 实践、前端测试与安全、大前端工程化、Flutter 实战、新兴编程语言、团队建设与管理等热门技术专场。目前大会 9 折购票，点击「阅读原文」了解大会日程。有任何问题欢迎联系票务鱼丸：13269078023（微信同号）。