如何搭建浏览器视频会议直播系统
3月30日下午，以“视频技术的演进与实践”为主题的保利威第18期视频极客沙龙在广州·贝塔空间完美收官。本期视频极客沙龙由保利威主办，珠三角技术沙龙社区、安卓巴士技术社群，CSDN、51CTO、APICloud等合作伙伴对本次活动给予了大力支持。
华南师范大学经济与管理学院副院长徐向龙、保利威技术副总裁梁瑛玮、保利威前端技术专家罗礼权、搜狐千帆直播高级技术经理金昊、大牛教育教学传媒部负责人黄思源等5位视频技术大咖和教育专家在本次视频极客沙龙中，对网络视频技术的演进、新一代互联网传输协议QUIC及高校在线教育的探索与需求等话题做了精彩分享。
在分享中，罗礼权详细讲解了视频会议直播流程及相关视频编码技术发展趋势、常见视频封装格式等，并对几种主流推流协议的优点和缺点做了专业解读。
罗礼权
保利威前端技术专家。有11年Web前端开发经验，先后就职于网易、3G门户、56搜狐视频等知名互联网企业，以及美黛拉、贝聊两个创业团队，参与过网易跟贴、网易可视化专题系统，56视频播放页等项目的开发，并维护多个开源项目应用于工作中。
以下是罗礼权的分享实录整理：
视频会议经过几十年的发展，现在分成两大类，一种是硬件视频会议，一种软件视频会议，硬件视频会议效果很好，成本也很高，软件视频会议弥补了这些问题，但是效果要稍差一些。软件视频会议才是比较大众化的产品。
直播系统
▲ 视频会议直播过程
编码环节
编码是为了让视频变得更小，更有利于存储和传输。
H.264/MPEG-4 AVC 是目前应用最为广泛的视频编码标准，下一代的 H.265/HEVC 因为专利费高等问题，还未能普及；
VP8 是一种视频编码格式。Google 收购其研发公司后，将其以开放源代码、无需授权费用的形式发布。VP8 的下一代是 VP9，是 H.265/HEVC 的竞争者；
网页浏览器对这几种编码的支持程度为 H.264 > VP8 > VP9 > H.265；
从目前情况看，Google 主推 VP9，苹果主推 H.265。
封装
就是用一个容器把编码器生成的多媒体内容（视频、音频、字幕、章节信息等）装在一起。
常见的封装格式包括：
MP4：ISO/IEC 制定的容器格式标准，支持多种方式编码后的数据，但最常见的是 H.264/H.265 编码的视频和 AAC 编码的音频；
WebM：Google 基于开源容器格式 Matroska（.mkv）开发的新型容器格式。目的是用来封装 VP8/VP9 编码的视频和 Vorbis 编码的音频以供网络媒体使用；
FLV：Adobe公司推出的流媒体格式，广泛应用于视频网站。
几种常见推流协议剖析
RTMP
Adobe 公司为 Flash/AIR 与服务器之间传输音视频数据而开发的私有协议，也是目前主流的推流协议。
优点：
基于 TCP，延时低，通常只有 1~3s ；
技术成熟，配套完善。
缺点：
在 PC 浏览器中只能通过 Flash 使用，且无法在移动浏览器使用。
Flash 即将和世界说再见，所以在网页播放端基本不会以 RTMP 拉流。
HTTP-FLV
把音视频数据封装成 FLV，然后通过 HTTP 连接传输，与 RTMP 相比只是传输协议变了。对于网页播放端，本来还是需要 Flash 才能播放，但「flv.js」的出现又弥补了这个缺陷。
优点：
低延时，与 RTMP 非常接近；
相较于 RTMP 协议，能有效避免防火墙和代理的影响。
缺点：
它的传输特性，会让流媒体资源缓存在本地客户端，在保密性方面不够好；
仍然不兼容 iOS 的浏览器。
HLS
苹果公司提出的基于 HTTP 的流媒体网络传输协议。它的工作原理是把整个流分成一个个小的 TS 片传输，每次只传输一部分。
优点：
基于 HTTP 协议，接入 CDN 较为容易，且自带多码率自适应。
作为苹果提出的协议，在 macOS/iOS 下有极大优势，Android 中也提供了对应的支持。
缺点：
延时较大，通常不低于 10s 。
大量 TS 片文件，会造成服务器存储和请求的压力。
WebRTC
在不同的上下文中有不同的含义，它可以表示：Google 开源的 WebRTC 项目；W3C 的 WebRTC 标准；浏览器中的 WebRTC 接口。
优点：
RTMP 和 HLS 都是掌握在大企业手中的协议，而 WebRTC 已被纳入 W3C 标准。
无需安装插件，且支持的浏览器越来越多。
缺点：
厂商对浏览器或系统的定制可能会导致可用性问题。
缺乏服务器端设计、部署的方案。
主要面向 Web 端，对原生开发支持不足。
实际应用中，更常见的是把多种协议混合使用，而不是用同一种协议推流和拉流。
Web端播放器，目前为止基本上只有两种选择：
一种是用flash。即将于2020年就停止更新了，部分浏览器已经 阻止Flash加载，需要我们手动点击开启。
另一种是HTML 5 Video。HTML5 Video提供标签，浏览器原生支持的标签，不同平台浏览器里面，格式和编码存在一些差异，其中MP4和H·264普适性比较高。国内有部分用户使用不支持此特性旧版本浏览器，对其普及造成一定阻碍。
保利威云课堂
产品构成
直播只是视频会议的核心。一个合格的视频会议系统还要根据应用场景提供对应的配套功能。接下来以保利威云课堂产品为例，描述一下我们提供了什么样的配套功能以及这些配套功能是怎么实现的。
教师端是PC客户端，管理端是基于Web的后台管理系统；
学员端有PC和移动端的观看页；客户也可以使用我们提供的SDK，自行开发观看页。
这是PC端观看页的大体截图，上面可以看到的模块包括课件、播放器、聊天室。
播放器
协议选择：PC端选择HTTP-PLV，移动端选择HLS，做好适配。
互动功能
除了播放器，还有互动功能，包括屏幕共享、签到、问答，白板、课件展示等等，大部分功能都依赖于聊天室模块做消息传输。
白板部分功能：老师在教师端涂画后，会产生一段数据，并以socket的形式经过服务器传输到学员端展示。在IE浏览器下通过Flash还原画板，其他浏览器下则用Canvas。
学员连麦部分。这是学员连麦部分，老师在教师端发起连麦，学员在观看页点击对应的按钮就可以连上。学员跟老师之间通过WebRTC连接，其他学员通过HTTP-FLV拉流观看。前几年WebRTC还不太成熟，所以我们使用了第三方SDK，近两年技术成熟后又基于开源方案自行搭建相关服务，前端对两者进行了封装调用。
网页版教师端
教师端目前是PC客户端，使用上有一定的不方便，我们内部已经启动了网页版教师端项目。
网页版有一个好处，可以免除下载、安装、更新的成本，通过浏览器打开就可以用。过去浏览器对视频会议相关功能支持较差，而现在大部分已经有实现方案了。其中比较麻烦的是屏幕共享，但在一些高版本浏览器中已经有相关的接口。
然而，最重要的是整套系统的兼容性、稳定性，这需要在长期实践中经验历各种问题洗礼，才能逐步完善。
