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

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

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

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

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

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

 

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

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

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

 

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

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

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

 

交换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实时视频通讯的时序图如下：

主要过程如下：

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

 

参考资料：

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