腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
1、概述
本文来自腾讯视频云终端技术总监rexchang（常青）技术分享，内容分别介绍了微信小程序视音视频和WebRTC的技术特征、差异等，并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC互通的实现思路以及技术方案。希望能带给你启发。
学习交流：
- 即时通讯开发交流3群：185926912[推荐]
- 移动端IM开发入门文章：《新手入门一篇就够：从零开发移动端IM》
（本文同步发布于：http://www.52im.net/thread-1988-1-1.html）
2、关于作者
rexchang（常青）：腾讯视频云终端技术总监，2008 年毕业加入腾讯，一直从事客户端研发相关工作，先后参与过 PC QQ、手机QQ、QQ物联 等产品项目，目前在腾讯视频云团队负责音视频终端解决方案的优化和落地工作。（常青的另一篇分享你可能也感兴趣：《腾讯技术分享：微信小程序音视频技术背后的故事》）
3、相关文章
微信团队分享的音视频技术文章：
有关WebRTC的技术文章：
《访谈WebRTC标准之父：WebRTC的过去、现在和未来》
《良心分享：WebRTC 零基础开发者教程（中文）[附件下载]》
《新手入门：到底什么是WebRTC服务器，以及它是如何联接通话的？》
《[观点] WebRTC应该选择H.264视频编码的四大理由》
《基于开源WebRTC开发实时音视频靠谱吗？第3方SDK有哪些？》
《开源实时音视频技术WebRTC中RTP/RTCP数据传输协议的应用》
《开源实时音视频技术WebRTC在Windows下的简明编译教程》
《网页端实时音视频技术WebRTC：看起来很美，但离生产应用还有多少坑要填？》
《了不起的WebRTC：生态日趋完善，或将实时音视频技术白菜化》
>> 更多同类文章 ……
4、分别介绍一下小程序音视频和WebRTC
小程序音视频是什么？
2017年腾讯视频云团队跟微信团队联合，将视频云 SDK 跟微信小程序整合在一起，并通过 <live-pusher> 和 <live-player> 两个标签的形式开放内部的功能。通过这两个标签，开发者可以实现在线直播、低延时监控、双人视频通话以及多人视频会议等功能。
微信小视频音视频技术的由来，请看这篇：《腾讯技术分享：微信小程序音视频技术背后的故事》。
那么WebRTC又是什么？
WebRTC（Web Real-Time Communication），是一个支持网页浏览器进行实时语音对话或视频对话的技术，是谷歌收购 GIPS 公司而获得的一项技术，在 Chrome 浏览器上无需安装插件，通过 javascript 就可以编写实时音视频通话程序。
想了解更多WebRTC工程的背后，请阅读：《访谈WebRTC标准之父：WebRTC的过去、现在和未来》。
5、微信小程序音视频和WebRTC的区别在哪里？
如果您跟我一样是一个实用主义者，那我就简单从实用主义角度说一下我的结论：小程序音视频搞定了手机，WebRTC拿下了PC。
如果你对技术比较感兴趣，那我们就可以从多个技术的角度去列举两者的区别，下面是一张详细对比的表格：
实现原理：
小程序音视频是将腾讯视频云的 liteavsdk 嵌入到微信内部实现的，然后通过 <live-pusher> 和 <live-player> 两个标签将 SDK 内部的音视频能力开放出来。所以小程序的标签起到了开发者 API 的作用，而内部的 SDK 则是真正用来实现音视频功能。
WebRTC 由谷歌收购 GIPS 得来（这里不得不提一下，我加入腾讯时所在的第一个团队就是 QQ 团队，当时 QQ 的音视频还是购买的 GIPS 公司的产品，不过由于各种不靠谱，后来就转为自研路线了）。所以其技术被完整的保留并且加入到了 Google 的 Chrome 浏览器内核当中。而且最近苹果也已经开始在 Safari 浏览器中支持 WebRTC 的相关能力。
底层协议：
小程序音视频的主要协议是目前在直播领域最为常用的 RTMP 推流协议，以及 HTTP-FLV 播放协议，这两种协议都已经有多年的沉淀而且在互联网上的资料也是汗牛充栋。
WebRTC的底层则是使用RTP和RTCP两种数据协议，其中RTP主要用于音视频数据传输，而RTCP则一般用于控制。
移动端碎片化问题：
小程序音视频由于是微信统一实现的，而且微信团队每个版本都尽量要求功能对齐，否则宁可不上，所以在碎片化问题上基本不存在。
WebRTC在这里则要尴尬的多，一方面Android系统的碎片化本身让WebRTC的具体表现呈现“百花齐放”的景象，同时，iOS 目前的内嵌WebView（也就是在微信等APP里打开的各种内嵌网页）不支持WebRTC也还是个很麻烦的问题。
扩展性：
小程序音视频跟随微信的版本发布，有什么问题一般是当前代码流修正，然后跟随下一个版本发布，所以一般一个功能点（比如给 pusher 加一个美颜的功能）或者一个问题点（比如不支持手势放大）从确立到最终实现（或解决）仅需要一个月的时间，而且微信APP新版本的覆盖速度也确实挺快。
相比之下，WebRTC则不是一个团队或者一家公司的问题了，因为它现在已经走标准路线，所以每一个新特性都是先确定标准，然后再推动浏览器厂商（包括苹果）进行跟随。这里面的故事就多了，时间也就更久了。
桌面浏览器支持：
相信您已经发现，在前面几个问题的分析上，我的观点都倾向小程序音视频。确实，在目前国内的移动领域里，谷歌和苹果都不能一家说了算，真正说了算的还是微信。
但是在桌面浏览器这个部分，Chrome目前在PC浏览器市场上留到地位的存在决定了 WebRTC 的优势就很大了，开发者可以在不安装插件的情况下就可以实现自己想要的功能。
相比之下，由于没有 Chrome 的原生支持，所以如果我们要在 PC 上对接小程序音视频，就需要安装浏览器插件或者通过 wxlite://start 这样的伪协议唤起本地 exe 应用程序（类似在网页上打开 QQ 聊天窗口）。
6、微信小程序音视频和WebRTC并非零和博弈
小程序音视频和WebRTC支架并非零和博艺，双方都有自己的优势和不足，所以本着“打不过他们，就加入他们”的思路，腾讯视频云团队在2018年春节回来后，就马不停蹄地开始了小程序音视频和WebRTC互通的相关工作。
目前，需要向各位开发者汇报的是，在最新版本的微信中，小程序音视频已经可以跟WebRTC打通，目前在PC 的Chrome浏览器上就可以跟小程序进行实时音视频互通。
7、知己知彼，充分了解WebRTC
就像结婚一样，既然你决定要选择另一个人作为人生下半辈子的伴侣，那你肯定会先深入地了解一下TA这个人，比如性格，脾气，爱好等各个方面。
同样，我们要想很好的将小程序音视频和WebRTC打通，那也必须要多了解一下WebRTC，这里我就说一下我对 WebRTC 这个“人” 在性格上的一些理解。
首先，她虽然长得不太好看，但很有内涵：
说WebRTC长得不好看，只是我的一种比喻，我的意思是想说WebRTC的学习成本不低，虽然Google做了很多浅显易懂的PPT来教你怎么 Getting Start，但真要完整的学进去，还是需要静下心来，慢慢地把她当成自己认可的目标去学下去。但是如果你是第一次恋爱（也就是第一次接触实时音视频），你会发现学习WebRTC的过程，本身就是了解一个实时音视频技术细节的过程。
其次，她非常喜欢迁就别人，各种架构方案她都能支持到：
说WebRTC喜欢迁就比人，也是一种比喻，WebRTC所支持的后台架构非常多（比如 Mixer， Mesh，Router），而且谷歌认为这些后台实现都比较简单，所以既没有开放后台相关的源码，也没有提供统一的后台解决方案。这种开放式的设计思路非常好，但副作用就是实现成本高。在真刀真枪的项目落地时，小规模的公司或者开发者就很容易被这种技术门槛挡在门外。尤其是想要将 WebRTC 真正应用到企业级解决方案中，面对录制和存档的刚性需求，就需要花费大量时间进行定制开发。
8、微信小程序音视频和WebRTC互通方案的确立
了解到 WebRTC 的这些特点后，我们的互通方案也就比较清晰了：
1）首先，小程序音视频的特点是接口简单，快速上手，这是小程序的优势；而这一点恰恰是WebRTC的劣势，所以我们没有必要在小程序端为WebRTC暴露十几个接口类，而是继续采用小程序音视频的 和 标签来解决问题；
2）其次，WebRTC 的后台没有官方实现，那就意味着这里有很大的发挥空间，腾讯视频云就可以实现一套WebRTC后台并将其同小程序音视频所使用RTMP后台进行打通。简单来说，腾讯视频云要在小程序音视频和WebRTC之间充当红娘（更确切的说，应该是翻译员）的角色。
但是看过《新闻联播》里国家领导人之间谈话镜头的人都知道，这种翻译是会影响交流速度的。小程序音视频和WebRTC之间互通，中间引入一个翻译员，是不是通讯延时也就增加了？
其实不会，因为小程序音视频和WebRTC的视频编码标准在常规应用场景中是一致的，都是H.264标准，这是音频格式不同而已。这就意味着，翻译员要做的事情很少，两边基本都能挺对对方在说什么，所以延时不会增加太多。
9、微信小程序音视频和WebRTC的成功握手
下图所展示的就是本次互通问题上所采取的方案：
如上图所示，本次互通方案的原理如下：
1）首先，微信端的小程序通过腾讯视频云SDK将音视频流推送到腾讯云 RTMP 服务器；
2）其次，腾讯云 RTMP 服务器的会对音视频数据进行初步的转化处理，然后透传给腾讯视频云的实时音视频后台集群；
3）再次，实时音视频后台会再次将数据交给一个叫做 WebRTC-Proxy 的模块，就在这里， WebRTC-Proxy 要将来自小程序音视频的音视频数据翻译成 WebRTC 理解的“语言”；
4）最后，在PC上的Chrome浏览器，就可以通过浏览器内置的WebRTC模块跟 WebRTC-Proxy 通讯，进而看到小程序端的视频影像；
5）上面的四个过程倒过来，就可以实现双向视频通话；而将腾讯视频云作为星型结构的中心节点，多个端（不管是小程序还是Chrome浏览器）都接入进来，那就可以形成多人音视频解决方案。
10、微信小程序音视频和WebRTC打通房间逻辑
仅仅完成了音视频数据在小程序和WebRTC之间的握手还远远不够，因为在一次成功的音视频通话背后，不仅仅是把一端的音视频数据传递到另一端这么简单，还有状态的同步和成员间的状态协同。
比如多人视频通话中，涉及到呼叫和接通的流程，其中一方如果挂断了，其他人要收到挂断的通知。同时，如果有新的参与者加入，那么其他人也要收到相应的通知。WebRTC 中有很多组件，比如 RTCPeerConnection 就在处理上诉林林种种的逻辑。但是 WebRTC 的接口中引入的新名词非常多，对于初学者来说还是有一定的入门门槛，为了简化这里的逻辑，我们引入一个叫做“房间”的概念。
所谓房间（Room），就是把同时参与视频通话的各方圈在一起的一个东西。比如双人通话中，通话中的两个人 A 和 B 就可以认为在一个房间中。再比如在多人通话中，通话中的五个人（A B C D E）也可以认为是在一个房间里。
有了房间的概念，那我们就可以对刚才说的状态协同用两个简单的动作描述一下：如果有一个人加入了视频通话，那么就可以理解为他/她已经进房（EnterRoom）了；如果有一个退出了视频通话，那么就可以理解为他/她已经离开房间（LeaveRoom）了。而房间的门板上始终写着：“目前在房间里有哪几个人”。
有了房间的概念，我们就可以将小程序的两个简单的 <live-pusher> 和 <live-player> 标签，同 WebRTC 那一套复杂的 API 进行功能上的对齐，我们甚至不需要修改我们在第一版中定义的接口，就可以达成这个目标：
如上图所示，原理如下：
1） 的 url 接口不再传递 rtmp:// 协议的推流地址，而是传递 room:// 协议的推流地址。room:// 协议的使用方式可以参考我们的原理版文档DOC。；
2）<live-pusher> 标签在 start 成功之后，就相当于成功进入一个 room，之后，您可以通过 onPushEvent (PUSH_EVT_ROOM_USERLIST = 1020) 事件，收到房间里还有那些人的信息。在视频通话期间，房间内各个成员的进进出出，也都会通过这个事件通知给您的小程序代码；
3）ROOM_USERLIST 里每一项都是一个二元组（如果是 1v1 的视频通话，ROOM_USERLIST 里只会有一个人）: userid 和 playurl。 userid 代表是哪个用户， playurl 则是这个用户远程画面的播放地址。您要做的只是使用 <live-player> 标签播放这些远程画面的图像和声音而已；
4）在 WebRTC 这一端，您可以参考我们的 webrtc API，这套 API 相对于 WebRTC 原生的 API，更适合初学者使用。
11、来看看最终的接入效果
如果您希望一天内就打通 webrtc 和 小程序音视频 的互通，那么我推荐您不要从零开始，因为那会耗费您太多时间去踩坑和 bugfix，推荐您直接使用我们封装好的 <webrtc-room> ，这套方案既可以帮助您完成快速接入，又能满足一定的定制需求。
本次方案的最终接入效果，可以在从“微信=>发现=>小程序=>腾讯云视频云”，体验腾讯云官方 Demo 中的 WebRTC 互通效果：
标签说明：
标签是基于 和 实现的用于 WebRTC 互通的自定义组件。如果您希望直接使用 和 标签完成对接，或者想要了解 的内部原理，可以参考 DOC。
版本要求：
微信 6.6.6 版本开始支持。
效果演示：
1）PC 端：用 Chrome 浏览器打开 体验页面 可以体验桌面版 WebRTC 的效果；
2）微信端：发现=>小程序=>搜索“腾讯视频云”，点击 WebRTC 功能卡，就可以体验跟桌面版 Chrome 互通的效果了。
对接资料：
1）小程序源码（包含<webrtc-room>的组件源码以及demo源码）；
2）PC端源码（基于Webrtc API实现的Chrome版WebRTC接入源码（其中 component/WebRTCRoom.js 实现了一个简单的房间管理功能，component/mainwindow.js包含了对 WebRTC API 的使用代码））；
3）后台源码（实现了一个简单的房间列表功能，同时包含<webrtc-room>几个所需参数的生成代码）。
附录：更多音视频技术文章汇总
《即时通讯音视频开发（五）：认识主流视频编码技术H.264》
《即时通讯音视频开发（九）：实时语音通讯的回音及回音消除概述》
《即时通讯音视频开发（十）：实时语音通讯的回音消除技术详解》
《即时通讯音视频开发（十一）：实时语音通讯丢包补偿技术详解》
《即时通讯音视频开发（十三）：实时视频编码H.264的特点与优势》
《即时通讯音视频开发（十五）：聊聊P2P与实时音视频的应用情况》
《即时通讯音视频开发（十六）：移动端实时音视频开发的几个建议》
《即时通讯音视频开发（十七）：视频编码H.264、VP8的前世今生》
《学习RFC3550：RTP/RTCP实时传输协议基础知识》
《基于RTMP数据传输协议的实时流媒体技术研究（论文全文）》
《还在靠“喂喂喂”测试实时语音通话质量？本文教你科学的评测方法！》
《实现延迟低于500毫秒的1080P实时音视频直播的实践分享》
《技术揭秘：支持百万级粉丝互动的Facebook实时视频直播》
《理论联系实际：实现一个简单地基于HTML5的实时视频直播》
《首次披露：快手是如何做到百万观众同场看直播仍能秒开且不卡顿的？》
《腾讯音视频实验室：使用AI黑科技实现超低码率的高清实时视频聊天》
《七牛云技术分享：使用QUIC协议实现实时视频直播0卡顿！》
《实时视频直播客户端技术盘点：Native、HTML5、WebRTC、微信小程序》
《微信多媒体团队访谈：音视频开发的学习、微信的音视频技术和挑战等》
《以网游服务端的网络接入层设计为例，理解实时通信的技术挑战》
《腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践》
>> 更多同类文章 ……
（本文同步发布于：http://www.52im.net/thread-1988-1-1.html）
腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践的更多相关文章
- 鹅厂优文|打通小程序音视频和webRTC
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯视频云终端技术总监常青, 2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手机QQ.QQ物联 等产品 ...
- 腾讯技术分享：微信小程序音视频技术背后的故事
1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
- 《腾讯游戏人生》微信小程序开发总结
为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...
- Django+小程序技术打造微信小程序助手 ✌✌
Django+小程序技术打造微信小程序助手 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 从零到一的完整项目开发实战过程,项目开发聚焦重要知识点,先原理后实战 ...
- Django2.0+小程序技术打造微信小程序助手✍✍✍
Django2.0+小程序技术打造微信小程序助手 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题 ...
- Django+小程序技术打造微信小程序助手
Django+小程序技术打造微信小程序助手 整个课程都看完了,当前这个课程的分享可以往下看,下面有某盘的链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,同时也分享下自己的总结 ...
- 动手搭建第一个小程序音视频Demo
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:小程序音视频产品经理 腾讯云提供了全套技术文档和源码来帮助您快速构建一个音视频小程序,但是再好的源码和文档也有学习成本,为了尽快的能调试起 ...
- 微信小程序存放视频文件到阿里云用到算法js脚本文件
peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...
- 腾讯云开发微信小程序使用体验
主体内容 代码构成 数据:JSON 配置文件 结构:WXML 模版文件 样式:WXSS 页面样式 交互:JS 脚本逻辑文件 云开发 云数据库 云函数 云存储 WXML 是小程序框架设计的一套标签语言, ...
随机推荐
- 关于webservlet 请求异步处理,链接未关闭出现的bug
webservlet +redis 的消息发布订阅 ,挺好的 当请求到来,向redis server申请一个频道 ,然后等着另一端架设是B 处理完毕获得到处理信息调用redis ,使用redis 往 ...
- leetcode8：字符串转整数 (atoi)
实现 atoi,将字符串转为整数. 在找到第一个非空字符之前,需要移除掉字符串中的空格字符.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字符即为整数的值 ...
- 关于java工程打exe包的一些问题
这两天在把一个Java project打包成exe文件时碰到了一些问题,现在把这些问题和解决办法记下来. 1.用java swing做前端时,背景图片无法显示 Solution:把jpg图片换成png ...
- VB 性能优化点
1.将Single,Double和Currency类型的变量替换为Integer或Long类型的变量:10倍 2.避免使用变体: 慢:Dim FSO as object Set FSO = N ...
- day 8：open文件和with的使用
本节内容: 1,open打开文件后的几种操作 2,with和open的连用 3,flush的使用 1:open 1)r权限 f = open("D:\\auto\project\\fulls ...
- CAS SSO单点登录实例
1.因为是本地模拟sso环境,而sso的环境测试需要域名,所以需要虚拟几个域名出来,步骤如下: 2.进入目录C:\Windows\System32\drivers\etc 3.修改hosts文件 12 ...
- Jquery 数组操作大全【转载】
转载于:https://www.jb51.net/article/43164.htm 1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 ...
- MySQL 1053错误 服务无法正常启动的解决方法
MySQL 1053错误 服务无法正常启动的解决方法 1.右键我的电脑,管理,进入服务 2.右键单击Mysql8 属性,选择登陆 选择此账号 登陆管理员账号
- Java容器-个人整理1
1.初始化集合时,若能知道知道容量,尽量初始化时确定容量.容器类一般可以自动扩充,但扩充是有性能代价的. 2.Arrays.asList()的底层表示仍然时数组,因此不能进行调整尺寸的操作. 3.Ha ...
- linux系统下部署DNS反向解析
DNS服务概述 DNS(Domain Name System)域名系统,能够提供域名与IP地址的解析服务. 反向解析 反向解析是从IP地址到域名的解析过程.主要作用于服务器的身份验证. 部署反向解析 ...