{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"本文转自“雨夜随笔”公众号，欢迎关注"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在之前的文章中，我们描述了目前直播常用的协议--RTMP。并也说明了为什么目前主流直播平台没有采用RTP和基于它的WebRTC。但是我们也要意识到WebRTC在实时音视频上的广泛应用，比如视屏会议，屏幕共享等场景。并且目前基于WebRTC进行深度定制的直播平台也越来越多，所以我们也来聊一聊WebRTC。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"什么是WebRTC"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC是Web Real-Time Communication，即网页实时通信的缩写，是RTC协议的一种Web实现。项目由Google开源，并和IETF和W3C制定了行业标准，目前已成为下一代视频通话的标准。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"浏览器本身不支持相互之间之间直接建立通信，一般都是通过服务器进行中转。这样的问题在于双方的铜线需要通过两段信道，使得通信的效率受到了更多的限制。所以如何建立浏览器之间的点对点传输，一直困扰着开发者，而这就是WebRTC产生的原因。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC允许网络应用在不借助中间媒介的情况下，建立点对点的连接，从而实现音视频流和其他数据的传输。WebRTC这个项目使得浏览器能为实时通信（RTC）提供简单的JavaScript接口。实现方式是通过一系列的信令，建立浏览器之间的信道。这个信道可以发送任何数据而无需经过服务器。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当然WebRTC的内容不仅仅包含上面这些，还包含媒体、加密、传输等在内的多项标准和协议。通过提供的原生JavaScript API，在不依赖其他插件的情况下，拥有P2P音视频和数据分享的能力。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当然上面所说的不借助中间媒介是指点对点通信时不需要第三方进行转发。而如果需要依赖WebRTC框架，仍需要另外的服务器来传输一些其他的信息，比如双方的基本信息，在没建立连接之前获得对方的IP，协议版本等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的设计"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC的架构图我们可以在官网（地址见文末）中查到，如下图："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/57/57e738ed8019aa6a79b4345aeed5c3bb.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们可以看到整个架构主要分为几个部分："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Web API"},{"type":"text","text":"： 提供给Web开发者的API层。供开发者开发基于视频和音频等的实时通信应用。标准有W3C联盟指定"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"WebRTC C++ API"},{"type":"text","text":"：提供给浏览器厂商的API层，供浏览器厂商实现WebRTC标准的Web API，其中主要是抽象的对数字信号过程进行处理。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"会话层"},{"type":"text","text":"：一个抽象的会话层，提供会话建立和管理功能，该层协议由应用开发者自定义实现。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"传输层"},{"type":"text","text":"：主要包含两个部分，一个RTP协议栈，另一个是STUN/TURN/ICE层，主要通过STUN和ICE组件来建立不同类型网络间的连接。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Engine"},{"type":"text","text":"：音视频引擎，包含一系列多媒体处理的框架，包含从视频采集卡到网络传输等整个解决方案。音频引擎负责音频采集和传输，具有降噪、回声消除等功能。视频引擎负责网络抖动优化，互联网传输编解码优化。这个是WebRTC中极具价值的技术之一，是由Google收购GIPS公司开源的，在整个VoIP界，都算是技术领先的。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"浏览器设备厂商自行实现的硬件接口"},{"type":"text","text":"：包含音频捕捉模块和视频捕捉模块。以及网络IO接口。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基于上面的理解，我们将架构进行进一步简化来梳理WebRTC的流程："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d6/d633e6bf3279696582a2fd048390b38f.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整个流程是：最底层是硬件设备，上面是音频捕获模块和视频捕获模块。中间部分为音视频引擎。在音视频引擎之上是 一套 C++ API，在 C++ 的 API 之上是提供给浏览器的Javascript API。这个就是整个WebRTC的主要流程。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的协议栈"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 "},{"type":"link","attrs":{"href":"https://mp.weixin.qq.com/s?__biz=Mzg4MTIwMTkxNQ==&mid=2247484291&idx=1&sn=70183e3293ee1c6144aca1f615a4e567&chksm=cf68c417f81f4d0129f29c2fcebec94831936f78695f9147949d0692b193a0d32a3000ce1d37&scene=126&sessionid=1597307321&key=8723f2e63c89806b29b9d9e968998dde68a08a0f42638f6bd08d664d7c99829c88e12cfb0620b6619e8fa7a527fa4328d45ce2d28d04ae72cbec3c83740431f86b36605164ff8aeefd945bafa78c7a3b&ascene=1&uin=NTkyMjg4NQ%3D%3D&devicetype=Windows+10+x64&version=62090529&lang=zh_CN&exportkey=AU7WUvUKActcvEnUFPNamnQ%3D&pass_ticket=HpHSEBKMCE1RvudwEPAVf7gfDj5eLLLh5%2BTYyEVpRP0%3D","title":null},"content":[{"type":"text","text":"为什么直播系统不用RTP协议"}]},{"type":"text","text":" 中，我们简单说了主流音视频传输协议在网络协议中的位置："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/bb/bb8c3fd79d2931326c9dc9270109be01.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 我们在这张图可以看到WebRTC主要是基于RTP以及它的伴生协议RTCP。这里我们看一下WebRTC主要涉及到的网络协议栈："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/94/94f94d3c7bd8eb8a3c82f6b6fc4ca791.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里分为两部分，一部分是左半边的WebRTC框架中依赖的信令服务器使用的协议，这个我们之后再讲。这里我们主要关注右半边WebRTC核心的协议栈，包含以下几个部分："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"UDP基础"},{"type":"text","text":"：WebRTC传输层协议主要依靠UDP，这个是关键，和其他基于TCP协议的传输协议相比，传输效率更高，成本也更低。这里WebRTC使用的UDP拓展协议RTP和它的伴生协议RTCP。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"ICE，STUN，TURN"},{"type":"text","text":"：也是传输层协议，主要是用于内网穿透，解决获取与绑定外网映射地址以及keep alive机制。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"DTLS"},{"type":"text","text":"：会话层协议，主要是用于保证数据传输的安全。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"SCTP和SRTP"},{"type":"text","text":"：用于在UDP上提供不同流的多路复用、拥塞和流量控制，以及部分可靠的交付和其他服务。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的现状"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC从发展初期，因为其强大的功能和先进的设计理念。得到很多浏览器厂商的支持，即使是苹果也在2017年宣布Safari 11支持WebRTC。所以目前我们从下图可以看到目前主流的浏览器基本上都支持WebRTC。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/59/599c85accc2c34e04e3fc38352408845.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"图片来自："},{"type":"link","attrs":{"href":"https://caniuse.com/#search=webrtc","title":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"https://caniuse.com/#search=webrtc"}]},{"type":"text","text":" "},{"type":"text","marks":[{"type":"italic"},{"type":"strong"}],"text":"WebRTC浏览器兼容情况"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的使用范围"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过上面的了解，很多人都认为WebRTC就应该在浏览器端使用，但是现实情况反而是相反的，在浏览器端开发是最简单的，因为提供了非常简单的JavaScript API。但是却受到JavaScript和浏览器的限制，而且如果应用场景足够丰富，那么对于浏览器的兼容性也需要考虑在内。同时浏览器在长时间直播或者会议上可能会有问题，并且功能也较弱，比如分辨率控制、多路语音混音都做不了。当然还有其他问题，"},{"type":"text","marks":[{"type":"strong"}],"text":"比如Chrome同时给6个客户端发视频流就很消耗资源了，所以你如果有超过10个用户收看的话，Chrome很容易崩溃。"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"strong"}],"text":"那么WebRTC的最佳使用范围是哪里呢？我们从上面架构图可以看到WebRTC提供了两层API，底层是C++写的Native库，上层是JavaScript封装。所以我们完全可以忽略上层的JavaScript限制，直接使用底层的Native库，这样我们可以开发跨平台的APP，并且可以拥有更高的权限和能力。而且Google在开发WebRTC时已考虑用在app，底层C++库的API已做得很完善了。所以对于"},{"type":"text","text":"WebRTC的最佳使用是基于WebRTC Native库来实现各种平台的APP，以达到最佳的体检**。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"总结"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今天我们主要简单了解一下WebRTC，包括WebRTC是什么，他的设计理念以及目前的现状。通过这些，我们可以了解现在音视频和直播领域依赖的技术背后究竟是什么。在以后的文章中，我们会继续深入了解WebRTC系统的设计，和其他组件的运用。以及其他相关的知识。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC架构："},{"type":"link","attrs":{"href":"https://webrtc.github.io/webrtc-org/architecture/","title":null},"content":[{"type":"text","text":"https://webrtc.github.io/webrtc-org/architecture/"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c9/c939a3a0dd5faddfd4735ad855b3f940.jpeg","alt":null,"title":"欢迎关注","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"https://mp.weixin.qq.com/s?__biz=Mzg4MTIwMTkxNQ==&mid=2247484320&idx=1&sn=ffaa320b075ae4f2b98cae2765698f70&chksm=cf68c434f81f4d2251dd8e532f2a03372a0e5074afb431963d3af511b15b87df9ead1db3c7ef&scene=126&sessionid=1597370660&key=519b8bbaea533f94d7c6d15edc89cca19b0e0e8b57f3652593a7cd70cde84ab897f81f761858c08fdbf60c430fa87819b432f20e41e6ceaa875243af11612357ab8ed77887ccd8594741aca8d1b20a1cb44de240a77ef6ae8e28875607d134ee848414f868842f4071dbe028cc36e78f764894c2cd473c5b6436b34d7cd67ba2&ascene=1&uin=NTkyMjg4NQ%3D%3D&devicetype=Windows+10+x64&version=62090529&lang=zh_CN&exportkey=ATqiytcMSnd3UbcupxYiD10%3D&pass_ticket=BIAIK1A50Z571Ul6pD6x0p8Rxc0uqDbrwBshrLT1gCo%3D","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}
初识WebRTC
{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"本文转自“雨夜随笔”公众号，欢迎关注"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在之前的文章中，我们描述了目前直播常用的协议--RTMP。并也说明了为什么目前主流直播平台没有采用RTP和基于它的WebRTC。但是我们也要意识到WebRTC在实时音视频上的广泛应用，比如视屏会议，屏幕共享等场景。并且目前基于WebRTC进行深度定制的直播平台也越来越多，所以我们也来聊一聊WebRTC。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"什么是WebRTC"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC是Web Real-Time Communication，即网页实时通信的缩写，是RTC协议的一种Web实现。项目由Google开源，并和IETF和W3C制定了行业标准，目前已成为下一代视频通话的标准。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"浏览器本身不支持相互之间之间直接建立通信，一般都是通过服务器进行中转。这样的问题在于双方的铜线需要通过两段信道，使得通信的效率受到了更多的限制。所以如何建立浏览器之间的点对点传输，一直困扰着开发者，而这就是WebRTC产生的原因。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC允许网络应用在不借助中间媒介的情况下，建立点对点的连接，从而实现音视频流和其他数据的传输。WebRTC这个项目使得浏览器能为实时通信（RTC）提供简单的JavaScript接口。实现方式是通过一系列的信令，建立浏览器之间的信道。这个信道可以发送任何数据而无需经过服务器。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当然WebRTC的内容不仅仅包含上面这些，还包含媒体、加密、传输等在内的多项标准和协议。通过提供的原生JavaScript API，在不依赖其他插件的情况下，拥有P2P音视频和数据分享的能力。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当然上面所说的不借助中间媒介是指点对点通信时不需要第三方进行转发。而如果需要依赖WebRTC框架，仍需要另外的服务器来传输一些其他的信息，比如双方的基本信息，在没建立连接之前获得对方的IP，协议版本等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的设计"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC的架构图我们可以在官网（地址见文末）中查到，如下图："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/57/57e738ed8019aa6a79b4345aeed5c3bb.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们可以看到整个架构主要分为几个部分："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Web API"},{"type":"text","text":"： 提供给Web开发者的API层。供开发者开发基于视频和音频等的实时通信应用。标准有W3C联盟指定"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"WebRTC C++ API"},{"type":"text","text":"：提供给浏览器厂商的API层，供浏览器厂商实现WebRTC标准的Web API，其中主要是抽象的对数字信号过程进行处理。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"会话层"},{"type":"text","text":"：一个抽象的会话层，提供会话建立和管理功能，该层协议由应用开发者自定义实现。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"传输层"},{"type":"text","text":"：主要包含两个部分，一个RTP协议栈，另一个是STUN/TURN/ICE层，主要通过STUN和ICE组件来建立不同类型网络间的连接。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Engine"},{"type":"text","text":"：音视频引擎，包含一系列多媒体处理的框架，包含从视频采集卡到网络传输等整个解决方案。音频引擎负责音频采集和传输，具有降噪、回声消除等功能。视频引擎负责网络抖动优化，互联网传输编解码优化。这个是WebRTC中极具价值的技术之一，是由Google收购GIPS公司开源的，在整个VoIP界，都算是技术领先的。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"浏览器设备厂商自行实现的硬件接口"},{"type":"text","text":"：包含音频捕捉模块和视频捕捉模块。以及网络IO接口。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基于上面的理解，我们将架构进行进一步简化来梳理WebRTC的流程："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d6/d633e6bf3279696582a2fd048390b38f.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整个流程是：最底层是硬件设备，上面是音频捕获模块和视频捕获模块。中间部分为音视频引擎。在音视频引擎之上是 一套 C++ API，在 C++ 的 API 之上是提供给浏览器的Javascript API。这个就是整个WebRTC的主要流程。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的协议栈"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 "},{"type":"link","attrs":{"href":"https://mp.weixin.qq.com/s?__biz=Mzg4MTIwMTkxNQ==&mid=2247484291&idx=1&sn=70183e3293ee1c6144aca1f615a4e567&chksm=cf68c417f81f4d0129f29c2fcebec94831936f78695f9147949d0692b193a0d32a3000ce1d37&scene=126&sessionid=1597307321&key=8723f2e63c89806b29b9d9e968998dde68a08a0f42638f6bd08d664d7c99829c88e12cfb0620b6619e8fa7a527fa4328d45ce2d28d04ae72cbec3c83740431f86b36605164ff8aeefd945bafa78c7a3b&ascene=1&uin=NTkyMjg4NQ%3D%3D&devicetype=Windows+10+x64&version=62090529&lang=zh_CN&exportkey=AU7WUvUKActcvEnUFPNamnQ%3D&pass_ticket=HpHSEBKMCE1RvudwEPAVf7gfDj5eLLLh5%2BTYyEVpRP0%3D","title":null},"content":[{"type":"text","text":"为什么直播系统不用RTP协议"}]},{"type":"text","text":" 中，我们简单说了主流音视频传输协议在网络协议中的位置："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/bb/bb8c3fd79d2931326c9dc9270109be01.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 我们在这张图可以看到WebRTC主要是基于RTP以及它的伴生协议RTCP。这里我们看一下WebRTC主要涉及到的网络协议栈："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/94/94f94d3c7bd8eb8a3c82f6b6fc4ca791.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里分为两部分，一部分是左半边的WebRTC框架中依赖的信令服务器使用的协议，这个我们之后再讲。这里我们主要关注右半边WebRTC核心的协议栈，包含以下几个部分："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"UDP基础"},{"type":"text","text":"：WebRTC传输层协议主要依靠UDP，这个是关键，和其他基于TCP协议的传输协议相比，传输效率更高，成本也更低。这里WebRTC使用的UDP拓展协议RTP和它的伴生协议RTCP。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"ICE，STUN，TURN"},{"type":"text","text":"：也是传输层协议，主要是用于内网穿透，解决获取与绑定外网映射地址以及keep alive机制。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"DTLS"},{"type":"text","text":"：会话层协议，主要是用于保证数据传输的安全。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"SCTP和SRTP"},{"type":"text","text":"：用于在UDP上提供不同流的多路复用、拥塞和流量控制，以及部分可靠的交付和其他服务。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的现状"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC从发展初期，因为其强大的功能和先进的设计理念。得到很多浏览器厂商的支持，即使是苹果也在2017年宣布Safari 11支持WebRTC。所以目前我们从下图可以看到目前主流的浏览器基本上都支持WebRTC。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/59/599c85accc2c34e04e3fc38352408845.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"图片来自："},{"type":"link","attrs":{"href":"https://caniuse.com/#search=webrtc","title":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"https://caniuse.com/#search=webrtc"}]},{"type":"text","text":" "},{"type":"text","marks":[{"type":"italic"},{"type":"strong"}],"text":"WebRTC浏览器兼容情况"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的使用范围"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过上面的了解，很多人都认为WebRTC就应该在浏览器端使用，但是现实情况反而是相反的，在浏览器端开发是最简单的，因为提供了非常简单的JavaScript API。但是却受到JavaScript和浏览器的限制，而且如果应用场景足够丰富，那么对于浏览器的兼容性也需要考虑在内。同时浏览器在长时间直播或者会议上可能会有问题，并且功能也较弱，比如分辨率控制、多路语音混音都做不了。当然还有其他问题，"},{"type":"text","marks":[{"type":"strong"}],"text":"比如Chrome同时给6个客户端发视频流就很消耗资源了，所以你如果有超过10个用户收看的话，Chrome很容易崩溃。"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"strong"}],"text":"那么WebRTC的最佳使用范围是哪里呢？我们从上面架构图可以看到WebRTC提供了两层API，底层是C++写的Native库，上层是JavaScript封装。所以我们完全可以忽略上层的JavaScript限制，直接使用底层的Native库，这样我们可以开发跨平台的APP，并且可以拥有更高的权限和能力。而且Google在开发WebRTC时已考虑用在app，底层C++库的API已做得很完善了。所以对于"},{"type":"text","text":"WebRTC的最佳使用是基于WebRTC Native库来实现各种平台的APP，以达到最佳的体检**。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"总结"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今天我们主要简单了解一下WebRTC，包括WebRTC是什么，他的设计理念以及目前的现状。通过这些，我们可以了解现在音视频和直播领域依赖的技术背后究竟是什么。在以后的文章中，我们会继续深入了解WebRTC系统的设计，和其他组件的运用。以及其他相关的知识。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC架构："},{"type":"link","attrs":{"href":"https://webrtc.github.io/webrtc-org/architecture/","title":null},"content":[{"type":"text","text":"https://webrtc.github.io/webrtc-org/architecture/"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c9/c939a3a0dd5faddfd4735ad855b3f940.jpeg","alt":null,"title":"欢迎关注","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"https://mp.weixin.qq.com/s?__biz=Mzg4MTIwMTkxNQ==&mid=2247484320&idx=1&sn=ffaa320b075ae4f2b98cae2765698f70&chksm=cf68c434f81f4d2251dd8e532f2a03372a0e5074afb431963d3af511b15b87df9ead1db3c7ef&scene=126&sessionid=1597370660&key=519b8bbaea533f94d7c6d15edc89cca19b0e0e8b57f3652593a7cd70cde84ab897f81f761858c08fdbf60c430fa87819b432f20e41e6ceaa875243af11612357ab8ed77887ccd8594741aca8d1b20a1cb44de240a77ef6ae8e28875607d134ee848414f868842f4071dbe028cc36e78f764894c2cd473c5b6436b34d7cd67ba2&ascene=1&uin=NTkyMjg4NQ%3D%3D&devicetype=Windows+10+x64&version=62090529&lang=zh_CN&exportkey=ATqiytcMSnd3UbcupxYiD10%3D&pass_ticket=BIAIK1A50Z571Ul6pD6x0p8Rxc0uqDbrwBshrLT1gCo%3D","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.