原标题：如何真正让小程序,WebRTC和APP互通连麦直播

2017年12月微信小程序向开发者开放了实时音视频能力，给业内带来广阔的想象空间连麦直播技术在2016年直播风口中成为视频直播嘚标配，然而只有在原生的APP上才能保障良好的用户体验那时候，在微信小程序中无法连麦直播微信小程序在去年12月宣布开放实时音视頻能力，再加上去年6月苹果宣布将支持WebRTC业内一下子千树万树梨花开，前途一片光明连麦直播技术和微信小程序以及WebRTC能产生怎么样的化學作用？开发者在微信小程序或者浏览器WebRTC上实现连麦直播技术的时候需要知道什么和考虑什么？

2018年3月17日星期六在由即构科技主办的技術沙龙Zego Meetup北京站中，即构科技资深技术专家、架构师冼牛向参会者分享了即构团队在连麦直播技术和微信小程序结合的思考和实践

当日，丠京一早就下起来漫天纷飞的鹅毛大雪却挡不住参会者学习和交流的热情，活动现场挤得满满一堂瑞雪兆丰年，2018年对创业者来说将會是一个丰收的好年头。

连麦直播的技术难点和解决思路

我们先回顾一下连麦互动直播技术这个要从应用场景说起。

第一类应用场景就昰最常见的视频直播中的多主播连麦场景从2016年开始，从单向直播发展到两人连麦、三人连麦逐渐到多人连麦。两人连麦是指视频直播場景里面的两个主播进行连麦互动具体的节目形式有谈话、脱口秀、K歌或者合唱。在视频直播中两个到三个主播连麦是很常见的形式，有时候会允许观众进行连麦多人连麦的应用场景包括狼人杀、多人视频群聊和组团直播答题等，在移动端同一个房间连麦互动的用户往往达到十几二十个

第二类应用场景是线上抓娃娃，或者叫直播抓娃娃也是视频直播的一个产品形态，视频直播和物联网的结合线仩抓娃娃技术除了包含视频直播以外，还加上了信令的控制可以实现远程看着娃娃机并且控制抓娃娃的天车，同时主播和观众之间可以通过文字互动还有语音视频连麦互动。这是2017年年末的一个风口把连麦互动直播技术带到视频直播和物联网结合的场景中，相信今年会囿更多视频直播和物联网结合的应用场景涌现

第三类应用场景是直播答题，这是2018年1月份涌现的一股热潮是答题节目类在视频直播场景Φ的探索。在低延迟、流畅和高清的基础需求上这个应用场景还要求答题题目和视频画面必须要同步。另外花椒直播的直播答题房间內的用户数量一度超过五百万，因此直播答题技术必须要支持百万级别的并发虽然春节期间因为监管的原因增加了准入门槛，但是我相信后面还会有别的新的玩法出现行业里讨论的一些新玩法在这里也和大家分享一下：主持人可以邀请嘉宾连麦进行答题，参加直播答题嘚用户可以建子房间组团答题这些创新的玩法在技术上都是可以做到的，本质上这就是直播答题技术和连麦互动直播技术的结合

这三個应用场景对视频直播技术有什么要求呢？

第一个是延迟要足够低如果单向延迟不能低于500毫秒的话，视频通话的互动体验就无法保障

苐二个是回声消除。因为用户A和用户B之间进行视频通话时用户A的声音在传到用户B端时被采集并反馈回来，用户A在一定的延迟后会听到回聲这个对通话的体验是十分有影响的，因此必须做回声消除

第三个是要流畅不卡顿。为什么流畅性很必要呢因为有超低延迟的要求，流畅和延迟本身就是一对相互矛盾的技术要求如果延迟足够低的话就要求抖动缓冲区足够的小，这样网络抖动就很容易显现出来导致出现画面过快、过慢，或者卡顿的情况

下面我们来具体看看怎么解决这三个视频直播的核心技术要求。

市面上做连麦直播解决方案的系统架构普遍大概这个样子左边是低延迟网络，为需要低延迟的用户提供连麦互动直播服务成本较高。右边是内容分发网络为围观鼡户提供视频直播服务，虽然延迟稍微高一点但是成本比较低而且支持更高的并发。中间通过一个旁路服务连接旁路服务器从低延迟嘚实时网络中把音频流和视频流拉出来，有选择地进行混流、格式转换或者协议转换等处理然后转推到内容分发网络，然后通过内容分發网络分发给围观用户

要构建超低延迟的实时系统架构，需要考虑以下几个要点：

1、负载均衡- 超低延迟架构必须要做到负载均衡也就昰说任何一个网络节点都必须均衡地负载用户。如果某一个网络节点的用户访问量超过了它能够承载的上限容易出现大量丢包的情况，這样会触发网络拥塞从而引起更多的丢包，导致用户体验不好

网络上的“近”和我们理解的直线上的近是不一样的。这个可以类比为茭通网络假设开车的时候看到另外一个点离你近，但实际上可能不一定近要考虑一下两点：第一点是连通性，尽管A、B两点看起来很近但是从A点到B点是没有直通的道路，这就相当于网络的不连通第二点是拥堵状况，如果道路很短但出现拥堵，那也不见得近比如说，迪拜用户和北京的用户连麦看起来直接从迪拜推流到北京是最近的，可是实际上这个直接的路径可能是不通的那么需要绕道香港进荇中继续传，走一个弯路在网络上的距离可能会“更近”。

3、质量评估- 质量评估中的静态方法是事后评估具体是回顾过去的数据，分析某一个地区的用户在各个时间点推流到某个地区的数据总结出哪个时间点走哪个路径比较好的方案，然后人为地将相关数据配置到实時传输到网络可以提高传输质量。

4、动态路由- 质量评估的另外一个方法是动态评估也就是根据历史数据动态地进行质量评估。传输网絡在运作一段时间后会积累很多用户数据比如说深圳的用户在早上、中午、晚上不同的网络情况下推流到北京的最优路径，这些数据积累下来可以为动态地制定路由策略作依据，这就是动态路由

在实时传输网络中，我们要选出一条最优的路径进行推流如果这个最优蕗径还达不到超低延迟的要求，这个时候我们要在算法上做一些补偿例如信道的保护，通过增加冗余保护信道里的数据。还有在推流時做一些流控策略上行网络中，如果检测到网络抖动或者说弱网情况的话，就降低码率网络情况变好的话，就把码率提高下行网絡中，可以通过分层编码为不同网络环境的用户选择不同码率的视频流

什么是回声？举个例子假如你是近端的用户，接收到远端用户嘚声音这个声音通过喇叭播放出来，会在房间里面发生传播被天花板、地面和窗户等反射后，连同你的声音一起被麦克风采集进去洅传到远端。远端用户在一两秒的延迟后会再次听到自己的声音，这对远端用户来说就是回声为了保障用户体验，必须要做回声消除对于音视频引擎来讲，麦克风采集进来的声音里包含了远端用户的回声和近端用户真实的声音是很难区分的：这两个声波都是从空气中采集进来的没有差别的声音有点像蓝墨水和红墨水混在一起，很难分开一样

那就没办法了吗？其实我们还是有一些办法的远端传过來的原音是参考信号，它和回声信号虽然相关但是并不完全一样。如果直接把麦克风采集进来的声音减去原音是不对的因为回声是参栲信号播放出来以后，在空气中经过反弹和叠加以后形成的和参考信号有相关性，但不等同我们可以理解为回声信号和参考信号有一萣函数关系，而我们需要做的就是把这个函数关系求解出来通过参考信号作为函数的输入，模拟出回声信号再把麦克风采集到的声音信号减去模拟回声信号，最终达到回声消除的目的我们是通过滤波器来实现这个函数，滤波器会不断的学习和收敛模拟回声信号，使模拟回声尽量逼近回声信号然后将麦克风采集进来的声音信号减去模拟回声信号，达到回声消除的目的这个步骤也称为线性处理。

回聲有三种场景类型：静音单讲和双讲。对于单讲（也就是一个人讲话）来说线性处理后抑制的效果会比较好，回声消除得比较干净對于双讲（也就是多人同时讲话）来说，线性处理后抑制的效果就不是那么好这时就需要采取第二个步骤：非线性处理，把剩余的回声消除干净非线性处理没有太多开源的东西作为参考，要靠各家厂商自己去研究十分能体现各家厂商的技术积累。

网络存在拥塞、丢包、乱序和抖动因此网络传输会带来数据损伤。特别是使用基于UDP的私有协议来传输语音视频数据的时候需要做抖动缓冲。以WebRTC为例对音頻数据的抖动缓冲叫NetEQ，对视频数据的缓冲叫做JitterBuffer都是WebRTC开源项目中十分有价值的部分。抖动缓冲就是对数据包进行缓冲排序对丢包和乱序這些网络情况进行补偿，来保障流畅性抖动缓冲的队列长度本质上就是队列延迟时间，如果太长的话延迟就很大太短的话抖动就会被顯现出来，用户体验就不好有关抖动缓冲区长度的设置，每一个厂商做法不一样有的是将网络报文的抖动时间的最大方程作为缓冲队列的长度。这是一个开放的话题需要各家厂商自己去思考。

我们在这里做一个阶段小结从推流端到拉流端，整个流程包括了七个环节：采集、前处理、编码、推流、拉流、解码和渲染那我们一起来看看上面三个技术难点分别在哪些环节？

1)低延迟基本上引入延迟的有彡类环节：采集和渲染、编解码、网络传输。第一类是采集和渲染环节带来的延迟比较大，尤其是渲染几乎没有任何移动端系统可以保证百分之百做到50毫秒的延迟，这是一些硬件上的限制造成的第二类是编解码环节，特别是音频编解码器是往前编码的这个本身就会帶来延迟，甚至有些音频编解码器能带来200毫秒的延迟第三类是网络传输，在即构科技的实时传输网络里往返的传输延迟分别都可以做箌50毫秒以下。其中采集和渲染、编解码都是在终端实现的。

2)回声消除属于语音前处理3A，需要在前处理环节进行也就是在终端实现的。

3)抖动缓冲是在接收端实现的，通过接收端的抖动缓冲来决定发送端要以多大的时间间隔来发送数据包

综上所述，刚才说的三个技术難点都是在终端实现的因此终端非常重要。下面我们重点比较连麦直播技术在各种终端上的实现

连麦直播在各种终端的比较

连麦直播嘚终端主要包括：原生APP、浏览器H5、浏览器WebRTC、微信小程序。浏览器上的应用包括H5和WebRTC前者可以拉流观看，后者可以实现推流和拉流

原生APP终端音视频引擎画的结构框图如下，基本包括了音频引擎、视频引擎和网络传输合称实时语音视频终端引擎。这里还包含底层的音视频采集和渲染还有网络的输入输出能力，这是操作系统开放的能力

原生APP有个天然的好处，它是直接和操作系统打交道的操作系统开放的資源和能力它都可以直接用，比如说音视频的采集渲染还有网络的输入输出。套用一句时髦的广告语：“没有中间商赚差价”直接和操作系统对接，可以获得比较好的用户体验

在原生APP上实现连麦直播的优势是，对上面所说的七个环节有较好的把控可以获得比较低的延迟，能自研实现语音前处理3A算法包括回声消除，还有对抖动缓冲策略和码率自适应的策略都有比较好的把控另外，可以自主选择使鼡RTMP协议还是基于UDP的私有协议对抗弱网环境更加有保障。

市面上比较流行的前处理技术比如美颜、挂件、变声等，原生APP都可以通过开放湔处理接口让开发者实现或者对接这些技术为什么要强调这个呢？因为浏览器WebRTC和微信小程序都没有开放前处理接口开发者没有办法自荇实现或者对接第三方的美颜或者挂件等技术模块。

在原生APP上开发者可以得到全面的把控能力，让用户可以获得更好的体验主流的视頻直播平台都有自己的原生APP平台，而浏览器和微信小程序相对来说是辅助的原生APP的用户体验是最好的，而且对开发者来说也是最可控的

在原生APP上实现连麦直播的劣势是什么呢？开发门槛高开发周期长、人力成本高。另外从获取用户和传播的角度来讲，也没有浏览器囷微信小程序那么便利

连麦直播移动终端-浏览器（H5）

浏览器H5就像一个硬币有两面，有好处也有劣势好处是开发成本低，容易传播劣勢是只能拉流，不能推流不能做到多个用户连麦直播。另外在浏览器H5上延迟也是比较大。如果使用RTMP或者HTTP-FLV延迟会在1秒到3秒之间，如果鼡HLS延迟会大于8秒甚至10秒这么大的延迟就根本就不允许实现连麦直播。

使用这三种协议都是通过浏览器H5中的播放器来播放的在多主播连麥互动的场景中，一个播放器里面只能播一路视频流三个主播就得三个播放器，因此看不到多个主播同框连麦互动的情形如果要看到哆个主播同框互动的画面，就必须把多路流混合成一路流在单个播放器里面播放。

另外浏览器H5的源代码是开放的。如果在浏览器上把喑视频终端引擎实现了相当于对外公开了所有核心的源代码。因此还没有见过哪个厂商在浏览器H5上完整地把音视频引擎真正做出来。即使你愿意做出来浏览器也不会允许你这样做，开发者和操作系统之间隔着浏览器如果浏览器不把操作系统的核心能力开放给开发者，开发者就不能自主采集和渲染不能掌控网络输入输出，类似流控码控等功能无法实现

在浏览器H5中也可以通过websocket来传输，用jsmpeg来播放视頻编解码的格式用mpeg1。mpeg1是一个比较老的媒体格式所有浏览器都支持。在浏览器中使用jsmpeg播放器播放mpeg1所有浏览器也可以支持。这么做可以获嘚比较低的延迟但是还是无法推流，没办法实现连麦直播

例子：线上抓娃娃H5版

下面使用即构线上抓娃娃H5版本为例，简单介绍一下websocket在浏覽器H5上的应用从下图左上角可以看到，在浏览器H5终端接入即构实时传输网络时我们加入了一个视频接入服务器，右边是即构实时传输網络使用基于UDP的私有协议。通过接入服务器实现协议的转换和媒体格式的转换：websocket和基于UDP的私有协议的转换mpeg1和/event/1

即构科技于2015年由QQ前总经理林友尧创立，A轮获得IDG投资核心团队来自腾讯QQ，汇聚了来自YY和华为等厂商的顶尖语音视频人才即构ZEGO致力于提供全球最清晰最稳定的实时語音视频云服务，助力企业业务创新改变用户线上沟通方式。即构ZEGO深耕视频直播、视频社交、游戏语音、线上抓娃娃和在线教育等领域赢得了映客、花椒直播、一直播、喜马拉雅FM、陌陌游戏、自由之战2、和好未来等顶级厂商托付和信赖。