为你揭秘小程序音视频背后的故事......

欢迎你们前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

本文由 腾讯视频云终端团队 发表于 云+社区专栏

转载，本文做者，rexchang（常青），腾讯视频云终端技术总监，2008 年毕业加入腾讯，一直从事客户端研发相关工做，前后参与过 PC QQ、手机QQ、QQ物联 等产品项目，目前在腾讯视频云团队负责音视频终端解决方案的优化和落地工做，帮助客户在可控的研发成本投入之下，得到业内一流的音视频解决方案，目前咱们的产品线包括：互动直播、点播、短视频、实时视频通话，图像处理，AI 等等。

为方便你们消化，请参考本篇文章的思惟导图

本篇文章的脉络

音视频小程序诞生在2017年4月一辆从深圳开往广州的C7172列车上……

常青带着小程序音视频的方案 乘坐动车前往微信事业群

一次偶然的合做

腾讯云与微信团队合做达成

2016年微信开始启动小程序内测以前，腾讯内部的各个团队就已经开始接到消息。咱们每一个人都能预感到小程序将会对移动应用场景产生很大的改变。但在当时，我也是刚加入腾讯视频云团队不久，对于这样的信息更多的是关注，而并没有太多细致的思考。

2017年伊始，随着大量客户的咨询，我以及我所在的腾讯视频云团队都开始意识到这里的需求特别的旺盛。但因为精力有限，以“小团队大成绩”著称的微信工程师团队很难有精力覆盖全部的应用场景，在音视频这里，小程序仅提供了一些基础的采集和播放能力，好比你们最为熟知的 <video>标签就是采用了系统播放器来实现，因此只能支持 HLS 高延时直播和视频点播功能。

而就在此时，腾讯视频云的 SDK 产品在通过了一年多的打磨优化以后，已经像是二战初期的零式战机，随时准备“砍瓜切菜”。这里和合做机会虽然不定，但咱们团队依然坐上了从深圳总部开往广州 T.I.T 的班车。

通过屡次的沟通，以及 jianx 的努力帮助下，这个合做虽然偶然且充满了各类不肯定，但最终达成。

技术的挑战

从0到1 困难重重

在音视频应用场景下，两个团队可以达成合做天然是个好事情。可是微信的市场地位也决定了这是一个不容儿戏的战场，因此咱们所面临的挑战也异常严峻：

（1）接口必须简单易用，最好一两个标签就能解决问题

（2）知足多种应用场景，既要支持直播又要可以支持实时视频通话

（3）功能必须可扩展，开发者能够根据自身的须要构建出各类个性化应用场景

（4）可维护性好，开发者可以自助排查一些技术问题，而不须要自己是个音视频专家

（5）安装包体积增量足够小，否则微信的安装包体积控住不住

除了高标准的要求之外，时间也是一个很是不利的因素。整个项目留给咱们能够证实自身能力的时间只有两周，在短短两周的时间里，咱们须要在一个 G2C 项目落地且成功经过产品演示和方案验收。

化繁为简

面对这些挑战，我想到了苏联卡拉什尼科夫所设计的名枪 AK-47 。

之因此这么成功，源于其所贯彻的简单实用的设计理念：回转式闭锁确保了安全性，杜绝了随机事故的可能性；结构简单易拆卸，所以要生产它并不须要特别精密的加工技术，也不须要投资巨大的生产设备，甚至一个普通小做坊就能开工生产。

没错，化繁为简，追求简单可靠，这就是咱们须要达成的目标。

攻克技术难关

达成这些并不容易，咱们团队一步一步的攻克技术难关

上行和下行

首先，咱们要对腾讯视频云现有的音视频体系进行拆解和抽象，也就是把整个体系打散成一个个积木，其中最重要的两块就是：音视频上行（push）和音视频下行（play）。

-音视频上行（PUSH）

就是把本身手机上的声音和画面实时的上传到云端。咱们将这部分能力用视频云 SDK 进行实现，并封装成一个叫作 <live-pusher> 的标签。

音视频上行

SDK 内部实现机制如上图所示：首先，咱们要对摄像头的画面进行捕获，对麦克风的声音进行采集。可是，原生采集和捕获的画面和声音是须要进行预处理的，直接采集的画面可能有不少噪点，因此咱们要进行图像降噪；好比， 原生采集的人像里，皮肤可能并不符合人们的预期，因此咱们须要进行磨皮和美颜；直接采集的声音可能也有不少的环境噪音，因此咱们须要进行前景和后景音的分离而后进行底噪抑制。

通过预处理以后的画面和声音相比于原始采集的通常会有较大改善，由于全部的预处理都是以“讨好”人类的视听体验为目的，因此这一看似不起眼的部分会吸引不少公司在其上作很多的技术投入。举个身边的例子，以 LCD 平板电视为例，SONY 的 LCD 产品线都没有自家的液晶面板（以台湾和大陆液晶面板为主），却能在整体效果上一直领先其它公司，其背后的秘密就是在图像处理（基于图像数据库作超分辨率显示）和背光技术（全部动物的眼睛都是对亮度最为敏感）上的不间断的积累和投入。

画面和声音都通过“粉饰”以后，就能够送给编码器进行编码压缩了。编码器的工做是将一张张的画面和一段段的声音压缩成 0101001... 的二进制数据，而压缩后的体积要远小于压缩前。最后要作的工做就是将编码后的数据经过网络模块发送出去。在在线直播场景中，通常采用的网络协议都是基于TCP的，而在实时通话场景中，所采用的网络协议则是 UDP 为主。

-音视频下行（PLAY）

也叫播放，就是从云端把编码后的音视频数据实时下载下来并实时的播放，这样一来，您就能看到远程的画面，听到远程的声音。一样的，咱们将这部分能力用视频云 SDK 进行实现，并封装成一个叫作 <live-player> 的标签。

音视频下行

SDK 内部实现机制如上图所示：来自云端的数据会直接送给网络模块，但网络不是完美的，总会有时快时慢的波动，甚至会有可能发生阻塞和闪断。若是服务器来一段数据， SDK 就播一段数据，那么网络稍微一波动，画面和声音就会表现出卡顿。咱们采用抖动缓冲（VideoJitterBuffer）技术解决这个问题，就像是为网络过来的数据准备一个小的蓄水池，音视频数据先在这里暂存一小会儿再送去播放，这样就能够在网络不稳定时有必定的“应急”数据可使用。

数据通过缓冲之后，就能够送给解码器进行解码，解码就是把压缩后的音视频数据还原成图像和声音，而后进行渲染和播放。咱们采用了 openGL 进行画面的渲染，使用 iOS 和 Android 的系统接口来播放声音。

信号放大器

有了这两个简单的标签，咱们就能够进行初步的组合，构建出第一个最简单的应用场景：在线直播。

信号放大器

在线直播是一个很是经典的单向音视频场景，您只须要简单的将两个标签组合在一块儿便可，<live-pusher> 负责将本地画面和声音实时上传到腾讯云，<live-player> 则负责从云端实时拉取音视频流。

若是是简单的一路上行 + 一路下行，那么咱们随便搭建一个中转服务器就能够解决问题了，但这样只能在很小的范围内实现高质量的直播服务，真正要作到高并发和流畅无卡顿，就须要一个强大的视频云。

视频云在这里的做用就像一个信号放大器，它负责未来自 <live-pusher> 的一路音视频进行放大，扩散到全国各地，让每个 <live-player> 都能在离本身比较近的云服务器上拉取到实时且流畅的音视频流。因为原理简单、稳定可靠且支持几百万同时在线的高并发观看，因此从在线教育到体育赛事，从游戏直播到花椒映客，都是基于这种技术实现的。

但在线直播方案只能应用于解决单向音视频问题，由于它有个明显的问题，就是延时通常都是在 2秒 - 5秒左右，这是使用 <live-player> 标签配合腾讯云视频云能够达到的效果。若是是<video> 标签，这个延时会更长，能够到 20 秒以上，那么在一些对时延要求很苛刻的场景下就再也不适用了。

把延迟下降

在安防监控的场景里，家用 IP 摄像头通常都带有云台旋转的功能，也就是摄像头的指向会跟随远程的遥控进行转动，若是画面延时比较大，那么观看端按下操控按钮到看到画面运动所须要等待的时间就会比较长，这样用户体验就会特别很差。

延迟作到最低

再好比 2017 很是流行的在线夹娃娃场景，若是远程玩家视频画面的延时很是高，那么远程操控娃娃机就变得不太可能，没有谁能真正抓到娃娃。

既然要达到这么低的要求，普通的在线直播技术就再也不适用了，咱们须要新引入两个新的科技点：延时控制 和 UDP加速。

- 延时控制

网络不是完美的，网络是波动的。在有波动的网络下，服务器上的音视频数据并非稳稳的来到您的手机上，而是忽快忽慢。慢的时候您可能会看到卡顿，快的时候就会产生堆积，而堆积的后果就是延时的增长。因此，咱们须要采用延迟控制技术，它的原理很简单，当网络慢的时候就播的慢一点，当网络快的时候就播得快一点，这样就起到必定的缓冲做用。固然，真正实现时就会发现，声音是个很不听话的“孩子”，要处理好声音的效果是一个很是高难度的技术活。

- UDP加速

既然网络不那么完美，老是时快时慢，那咱们是否是能够改善一下呢？在经典的单向音视频方案中，通常采用的都是 TCP 协议，由于它简单可靠且兼容性极好。然而 TCP 的拥塞控制特别注重公平，自然就有时快时慢的坏毛病，因此咱们须要用 UDP 协议替代之，相比于设计目标定位于可靠传输的 TCP 协议，UDP 能够作得更稳且更快。

咱们将 延时控制和 UDP 加速技术加入到 <live-player> 标签里，能够将端到端的延时控制在 500ms 左右。这对于操做延时要求比较苛刻的场景，就能够知足需求了。

单向变双向

有了单向低延时技术，那么双向视频通话天然也就比较简单了，只须要通话的双方 A 和 B 各自拉通一路低延时链路就能够了。

好比在车险定损的场景里，遇险的车主经过小程序呼叫保险公司，这个时候保险公司内部的定损客服只要经过一路低延时的链路就能够看到车子的出险状况。可是仅仅这样还不够，视频内容跟图片同样，都容易被实现伪造和做假。因此定损员就须要有一路视频一样到达车主那里，这样两路音视频同时连通，就构成了一个典型的视频通话场景。因为车主和定损员能够经过视频进行交流，所以造假骗保的风险就被极大地下降了。

单向变双向

虽然这样说是没错，但实现上可不是那么简单的。偏偏相反，它很是困难，由于咱们还须要引入额外的不少科技点：

- 噪声消除

噪声抑制的目的是将用户所处环境里的背景噪音去除掉，好的噪声抑制是回音消除的前提，不然声学模块没法从采集的声音辨别出哪些是回声，哪些是应该被保留的声音。

- 回音抑制

在双向视频通话中，用户本身手机的麦克风会把喇叭里播放的声音再次记录下来，若是不将其抹除掉，这些声音会被反送给对端的用户，从而造成回声。

- Qos流控

网络不可能一直都很完美，尤为是中国大陆地区的上行网速一直都有政策限制。Qos流控的做用就是预测用户当前的上行网速，并估算出一个适当的数值反馈给编码器，这样一来，编码器要送出的音视频数据就不会超过当前网络的传输能力，从而减小卡顿的发生。

- 丢包恢复

再好的网络也不免会有丢包的状况，尤为是 WiFi 和 4G 等无线网络，因为传输介质自己就不是能够独享的，因此一旦受到干扰，或者高速运动都会产生大量的丢包，这时就须要引入一些丢包恢复技术，将失去的数据尽可能补救回来。

以上四个科技点，咱们也加入到了 <live-pusher> 和 <live-player> 标签中，并给他们赋予了一个新的模式 RTC（ Real Time Chatting 的 首字母缩写，有点 Chenglish 的味道），这才真正把实时音视频通话搞定。

你看，要保持功能到位，又不能跳出标签这种简单易用的设计风格，这不容易吧。实际上这里的四个科技点实在是太难了，须要不少年的技术积累和沉淀，以致于咱们也不是现用现作的。正所谓站在巨人的肩膀上才能看得更远，这里的技术能力是由腾讯音视频实验室的“天籁”引擎所实现的。

双向变多人

既然双人视频通话已经搞定了，是否是多人也就照葫芦画瓢就能够了？您看，咱们只须要将 A 和 B 之间的 url 置换，变成 A、B、C 甚至更多人之间的 url 置换，不就能够了吗？

思路依然正确，可是真正要将功能作到好用且成熟，仅依靠简单的 url 交换是很是粗糙的，咱们须要继续引入额外的两个科技点：

双向变多人

- 房间管理

以上图所示的 A B C 之间的多人视频场景为例，要让每个人都很清楚其它人的状态（好比播放url，以及当前是否有上行等等），这个事情但是很是困难的，搞很差就容易出现各方信息不对齐。对于更复杂一点的状况，好比当有第四我的 D 进来的时候，或者第五我的 E 进来又出去的时候，这种信息同步几乎就是一场噩梦。

最好的办法就是把参会人的状态和信息都收拢在服务器端，构造一个 房间 的概念，这样就能够确保参会人都能从服务端得到一样的信息，而不须要各自去维护。

- 通知系统

当有新的参与者进入房间，或者有人离开时，就须要对房间里的人进行信息广播，这就须要一个不错的 IM 系统负责收发消息。好比当 D 进入时，就能够向房间内的其它成员广播这个 “I'm coming” 的事件，这样 A B C 就能够在本身的 UI 上展现 D 的视频画面了。

加入房间管理和 通知系统之后，咱们就能够将 <live-pusher> 和 <live-player> 和微信小程序的 websocket 等基础能力组合在一块儿，构建各类功能强大、逻辑复杂的小程序应用。

一路走来

一路走来，你们能够看到咱们在小程序音视频的技术体系上所作的种种努力能够用以下的技术图谱勾勒出来：

小程序音视频的技术体系图

• 首先是化繁为简，将全部的音视频解决方案拆解成两个基础行为：上行和下行，并经过两个标签 <live-pusher> 和 <live-player> 的简单组合，实现最基本的在线直播功能。
• 以后是经过加速线路和延时控制，将一路音视频的时延缩短到 500ms 之内；
• 再以后，咱们经过引入噪声抑制和回声消除等声学处理模块，让一路变两路成为了可能，这也就构成一个最简单的视频通话能力。
• 最后，咱们又经过加入房间服务和状态同步通知，将双路音视频变成了多路音视频，从而将应用范围进一步扩大。

问答
怎样部署小程序？
相关阅读
教你1天搭建本身的“微视”
教你从0到1搭建小程序音视频
教你快速搭建一场发布会直播方案
云学院 · 课程推荐 | 知乎KOL，与你分享机器学习中如何作选择

此文已由做者受权腾讯云+社区发布，完整原文请点击

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

海量技术实践经验，尽在云加社区！