webrtc笔记(2): 1对1实时视频/语音通讯原理概述

开始正文之前,我们先思考1个问题:2个处于不同网络环境的(具备摄像头/麦克风多媒体设备的)浏览器,要相互实现点对点的实时视频/语音通讯,难点在哪?

至少得先搞定下面2个问题:

1、要相互了解对方支持的媒体格式、支持的最大分辨率等媒体信息

webrtc笔记(2): 1对1实时视频/语音通讯原理概述

比如:peerA端可支持MPEG-1/2、H264多种编码格式,而peerB端支持MPEG-4、H264,要保证二端都正确的编解码,最简单的办法就是取它们的交集H264

就象2个不同国家的人交流,1个只会讲英文、中文,另1个只会讲德语、英文,他俩肯定要能相互正常沟通,肯定会用双方都懂的英文来交流一样。

注:有一个专门的协议 ,称为Session Description Protocol (SDP),可用于描述上述这类信息,在webrtc中,参与视频通讯的双方必须要先交换SDP信息,这样双方才能知根知底,交换SDP的过程,也称为"媒体协商"。

 

2、要相互了解对方的网络情况,这样才有可能找到一条相互通讯的链路

类似的道理,在复杂的网络环境中,要建立二个端的连接,得有一条双方都能访问的链路。

webrtc笔记(2): 1对1实时视频/语音通讯原理概述

如上图,peerA端具体有公网ip以及192网段的内网环境,而peerB没有公网,只有192、198二个内网地址,从图中可知,它俩可以使用公用的192网段来通讯。webrtc通讯过程中,这些网络相关的信息,也得相互交换,找到出共同的交集,这个过程也称为“网络协商”。

 

顺着这个思路再琢磨一下,刚开始前,这2个端还没建立连接,既然连都没连上,又如何交换“媒体信息”、“网络信息”?

这时候就该所谓的信令服务器signal server出场了:

webrtc笔记(2): 1对1实时视频/语音通讯原理概述

如上图,2个浏览器的上层,可以抽象出一层信令服务器(可以是1台或多台,看实情情况需求,如果2端的浏览器都能访问某个网络环境,比如公网,可以让它们都连到这公用的信令服务器上;如果没有公共的网络环境,可以在2端各搭一组服务器,即signal serverA、signal server B,但是这二组信令服务器之间要能互通),借助信令服务器,就可以实现上面提到的SDP信息及网络信息交换。

 

webrtc笔记(2): 1对1实时视频/语音通讯原理概述

交换SDP的过程,大致如上图:

1、Amy(1个假想的人名),把自身的SDP信息,通过setLocalDescription方法保存起来,然后通过offer方法,发给信令服务器。

2、信息服务器把Amy的SDP向前传递到另1端的Bob(另1个假想的人名),Bob会先调用setRemoteDescripition把Amy的SDP保存下来。

3、然后Bob调用setLocalDescription方法保存自己的SDP,然后再通过answer方法,把自己的SDP通过信令服务器发给Amy

4、Amy收到Bob的SDP后,调用setRemoteDescription保存起来,这样双方就完成了SDP交换,然后找出其中的交集,如果能达成一致,就可以建立p2p连接,开始通讯了。

 

但是现实往往是残酷的,在中国的网络环境据一些统计数据显示,至少1半的网络是无法直接穿透打通的(我个人认为根本原因是:IP4地址资源在互联网发展早期绝大多数都被国外占用了,轮到中国这些发展中国家使用时,IP地址严重不足,所以大多数网络都在路由器、交换机之后,而很多NAT是对称型的,基本上没法空透),所以这种情况下,只能借助上一节讲到的turn服务器

 

另外,在视频对话框中,通常会有房间(或群)的概念,用于做一些业务上的隔离,这部分逻辑也是在signal server中实现的,综合考虑peer端、信令服务器、stun/turn服务器后,整个1对1实时视频通讯的时序图如下:

webrtc笔记(2): 1对1实时视频/语音通讯原理概述

主要过程如下:

1、双方先调用getUserMedia打开本机摄像头

2、向信令服务器发送加入房间apply_join请求

3、信令服务器通知本人加入成功(joined),同时向其它人广播加入消息(other_joined)

4、二端开始创建peerConnection连接

5、peerB端创建offer,同时将SDP保存到本机(setLocalDescription),并通过信令服务器传递到peerA

6、peerB在setLocalDescription后,会异步触发“候选网络链路”收集,大致是通过Stun确定自己所有的NAT映射出口,如果Stun返回NAT是“对称型”的,基本上就没法穿透了,会再通过Turn拿到中继reply地址,并通过信令服务器,将网络候选链路信息发到peerA(即:开始网络协商过程)

7、peerA收到的peerB的SDP后,开始回应(createAnswer),仍然通过信令服务器,将SDP发送到peerB

8、同时peerA也会开始网络候选链路的收集,并将自己的网络信息,通过信令服务器,发到peerB(即:网络协商)

这样peerA,peerB就相互交换了媒体信息及网络信息,如果能达到一致(即:找到交集,就可以开通通讯了)

 

基于以上原理,做了一个demo示例程序,见:https://github.com/yjmyzz/webrtc-samples

webrtc笔记(2): 1对1实时视频/语音通讯原理概述

 

参考资料:

https://rtcdeveloper.com/t/topic/13742

https://www.html5rocks.com/en/tutorials/webrtc/basics/

https://hpbn.co/webrtc/#standards-and-development-of-webrtc

https://blog.csdn.net/momo0853/article/details/85157775

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Connectivity

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription

上一篇:javascript – 如何在Chrome中为WebRTC调用者设置远程描述而不出错?


下一篇:javascript – 如何将Firefox连接到Chrome以通过WebRTC传输h264?