1 webrtc介绍

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现Video、Audio、Data数据的传输。WebRTC用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

2 webrtc中的几个概念

2.1 Signal服务器

WebRTC主要实现的是浏览器对浏览器之间的实时通信，通讯双方彼此都不知道对方在哪里，怎么给对方发起视频请求？这时双方都应该先跟一个Signal服务器建立连接，所以这就是信令服务的作用，信令服务器不传递音视频数据。

信令服务器用于交换三种类型的信息：

• 会话控制消息：初始化/关闭，各种业务逻辑消息以及错误报告。
• 网络相关：外部可以识别的IP地址和端口。（ICE消息）
• 媒体能力：客户端能控制的编解码器、分辩率，以及它想与谁通讯。（SDP消息）

结构图.png

2.2 STUN

NAT给设备提供了一个IP地址以使用专用局域网，但是这个地址不能在外部使用。由于没有公用地址，WebRTC对等端就无法进行通信。而WebRTC使用 STUN来解决这个问题。
STUN服务器位于公共网络上，STUN做的事情就是：获取自己的IP、PORT和NAT信息。然后通过信令服务器交换这些信息，最后两个客户端根据各自得到的IP、PORT和NAT信息进行相应的穿透，显示情况如下图：

STUN.png

2.3 TURN

TURN的全称为Traversal Using Relays around NAT，如果终端在NAT之后，那么在特定的情景下（对称型NAT），有可能终端之间无法和其对等端（peer）进行直接的通信，这时就需要公网的服务器作为一个中继， 对来往的数据进行转发。这个转发的协议就被定义为TURN。TURN和其他中继协议的不同之处在于，它允许客户端使用同一个中继地址（relay address）与多个不同的peer进行通信。
当单纯的 STUN没有成功建立连接，所以每个对等端还需要使用TURN服务器。

TURN.png

2.4 ICE

ICE，全名叫交互式连接建立（Interactive Connectivity Establishment）,可以整合各种NAT穿越技术如STUN、TURN（Traversal Using Relay NAT 中继NAT实现的穿透）。ICE会先使用STUN，尝试建立一个基于UDP的连接，如果失败了，就会去TCP，如果依旧失败ICE就会使用一个中继的TURN服务器。
ICE会试着找最好的路径来让客户端建立连接，他会尝试所有可能的选项,，然后选择最合适的方案,

2.5 SDP

会话描述协议Session Description Protocol (SDP) 是一个描述多媒体连接内容的协议，例如分辨率，格式，编码，加密算法等。所以在数据传输时两端都能够理解彼此的数据。本质上，这些描述内容的元数据并不是媒体流本身。
例如：客户端之间交换offer和answer，即进行媒体能力协商，看双方都支持那些编码方式，支持哪些分辨率等。它们就是以SDP格式进行交换。协商的方法是通过信令服务器交换媒体能力信息。

3 webRTC的信令传输流程

WebRTC并不提供Stun服务器和Signal服务器，服务器端需要自己实现。Stun服务器可以用google提供的实现stun协议的测试服务器（stun:stun.l.google.com:19302），Signal服务器则完全需要自己实现了，它需要在ClientA和ClientB之间传送彼此的SDP信息和candidate信息，ClientA和ClientB通过这些信息建立P2P连接来传送音视频数据。

握手流程.png

• 1：ClientA首先创建PeerConnection对象，然后打开本地音视频设备，将音视频数据封装成MediaStream添加到PeerConnection中。
• 2：ClientA调用PeerConnection的CreateOffer方法创建一个用于offer的SDP对象，SDP对象中保存当前音视频的相关参数。ClientA通过PeerConnection的SetLocalDescription方法将该SDP对象保存起来，并通过Signal服务器发送给ClientB。
• 3：ClientB接收到ClientA发送过的offer SDP对象，通过PeerConnection的SetRemoteDescription方法将其保存起来，并调用PeerConnection的CreateAnswer方法创建一个应答的SDP对象，通过PeerConnection的SetLocalDescription的方法保存该应答SDP对象并将它通过Signal服务器发送给ClientA。
• 4：ClientA接收到ClientB发送过来的应答SDP对象，将其通过PeerConnection的SetRemoteDescription方法保存起来。
• 5：在SDP信息的offer/answer流程中，ClientA和ClientB已经根据SDP信息创建好相应的音频Channel和视频Channel并开启Candidate数据的收集，Candidate数据可以简单地理解成Client端的IP地址信息（本地IP地址、公网IP地址、Relay服务端分配的地址）。
• :6：当ClientA收集到Candidate信息后，PeerConnection会通过OnIceCandidate接口给ClientA发送通知，ClientA将收到的Candidate信息通过Signal服务器发送给ClientB，ClientB通过PeerConnection的AddIceCandidate方法保存起来。同样的操作ClientB对ClientA再来一次。
• 7：这样ClientA和ClientB就已经建立了音视频传输的P2P通道，ClientB接收到ClientA传送过来的音视频流，会通过PeerConnection的OnAddStream回调接口返回一个标识ClientA端音视频流的MediaStream对象，在ClientB端渲染出来即可。同样操作也适应ClientB到ClientA的音视频流的传输。

建立连接相关的API

1. A获取媒体流(MediaStream)或数据流

一般通过MediaDevices.getUserMedia()获取媒体流，媒体流包含了请求媒体类型的轨道(MediaStreamTrack)。一个流可以包含视频轨道，音频轨道或其他。通过MediaStream的addTrack方法可以添加轨道。

MediaDevices.getUserMedia()

2. A生成一个RTCPeerConnection接口对象

RTCPeerConnection接口代表一个由本地计算机到远端的WebRTC连接。该接口提供了创建，保持，监控，关闭连接的方法的实现。

pc = new RTCPeerConnection([RTCConfiguration dictionary]) //可选参数包括ice服务器等。

3. A将流加入到RTCPeerConnection对象中

stream.getTracks().forEach(track => pc.addTrack(track, stream));

4. A生成Offer信息

pc.createOffer(function(offer)=>{//创建完成 TODO 5},error)

5. A将生成的Offer设置为本地描述

pc.setLocalDescription(new RTCSessionDescription(offer),function(){},error);

6. A将生成的Offer发给另一端B

send json.stringify(offer)

7. B也生成RTCPeerConnection，并按需求设置流

new RTCPeerConnection()

8. B将收到的Offer设置为远端描述

pc.setRemoteDescription(new RTCSessionDescription(Json.parse(offerString)),function({},error);

9. B生成Answer，并设置为本地描述

pc.createAnswer(function(answer){pc.setLocalDescription(new RTCSessionDescription(answer),function(){ })},error)

10. B把Answer发送给发起方A

send json.stringify(answer)

11. A将Answer设置为远端描述

pc.setRemoteDescription(new RTCSessionDescription(Json.parse(answerString)),function(){},error);

12. 交换ICE候选地址信息

setLocalAndSend中会设置本地sdp，完成设置后会回调onicecandidate事件，传递ICE候选地址，需要将其转发至另一端，并通过另一端的方法addIceCandidate方法设置对方的候选地址。

pc.addIceCandidate(new RTCIceCandidate(iceinfo));

理想情况下，现在已经建立连接了。

13.交换与使用媒体流

当一方addStream或addTrack后，另一方的RTCPeerConnection会触发onaddstream或addTrack事件回调，通过事件参数可以获取对面的流或轨道数据，以此进行媒体显示等。