Happy Coding, Happy Life

WebRTC - Understand the PeerConnection

| Comments

在上篇文章里,我们已经了解了MediaStream。那么这篇文章里,我们就来重点了解RTCPeerConnection。

RTCPeerConnection表示浏览器之间点对点的连接。只有当连接建立后,浏览器的两端才能真正完成流媒体数据的传输。

还记得之前讨论过的WebRTC架构图吗? 实际上,虽然RTCPeerConnection是一个暴露的连接接口, 但其内部封装了大量WebRTC编解码和协议处理的工作,因此使浏览器之间点到点的即时通讯变得简单。

什么是信令处理(Signaling)

WebRTC使得浏览器之间能够点对点通信,但是作为浏览器的一端,茫茫大海,如何知道另一端在哪里?怎么能通过网络连接到对端?如何知道是否能够连接成功?

所以,即便是点对点通信,依然需要服务器协助双方建立连接。不过此时的服务器,其职责更多的是 交换元数据,如编解码机制、数据加密、流量控制等信息。

对于这些看似不重要但却必要的信息交换过程,我们称之为信令处理。

NAT、防火墙和现实的网络世界

NAT(Net Address Translation)是负责网络地址转换的一个协议。通俗的说,它负责把私网内的的IP和端口转换成公网的IP和端口,也即使我们所说的IP地址映射。

由于IPv4地址的数量有限,大多数企业或者团体通常都使用局域网地址,并通过NAT转换,连接到互联网上。另外, 许多企业内部网络都存在防火墙,因此这就为点对点通信带来寻址问题。

STUN,TURN,ICE是由IETF提出的处理网络中NAT穿越问题的协议族。 STUN能够为NAT后的终端定位公网地址,因此它可以被用来在两个同时处于NAT之后的终端建立UDP通信。 TURN是STUN协议的一个增强版,能够通过中继的方式帮助处于NAT之后的终端建立TCP连接。ICE则是综合STUN及TURN的产物,是一个框架。

使用STUN服务器后,通信双方能够完成NAT穿透,从而建立连接,如下图所示:

使用TURN服务器后,通信双方需要通过中继完成NAT穿透,从而建立连接,如下图所示。从某种角度而言,这种方式已经不是传统意义上的点对点连接了,因为它依赖于中继服务器完成数据的传输。

建立RTCPeerConnection

了解了STUN,TURN的相关概念后,是深入了解PeerConnection的时候了。

当创建RTCPeerConnection时,需要指定两个参数:

  • 包括STUN或者TURN服务器的列表。
  • 对于协议元数据的参数设置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  var SERVER = {
    iceServers: [
        {url: "stun:23.21.150.121"},
        {url: "stun:stun.l.google.com:19302"},
        {url: "turn:numb.viagenie.ca", credential: "xxxx", username: "xxx"}
    ]
  };


  var OPTIONS = {
        optional: [
          {DtlsSrtpKeyAgreement: true},
          {RtpDataChannels: true}
        ]
  };
  peerConnection = new RTCPeerConnection(SERVER, OPTIONS);

注意,当RTCPeerConnection执行连接时,首先会尝试使用STUN服务器来协助完成,如果失败,则使用TURN中继服务器完成通信。

开始通信

通信的过程如下如所示:

主动发起者将使用createOffer发起连接,并设置SDP(Session Description Protocol)相关信息.
1
2
3
4
5
6
7
8
9
10
11
12
  navigator.getUserMedia({video: true}, function(stream) {
    var video = document.getElementById("video");
    video.srcObject = stream;
    video.play();
    pc.addStream(stream);

    pc.createOffer(function(offer) {
      pc.setLocalDescription(new RTCSessionDescription(offer), function() {
        // send the offer to a server to be forwarded the friend you're calling.
      }, error);
    }, error);
  }
对端接受者,收到setRemoteDescription并使用createAnswer回复连接请求。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  navigator.getUserMedia({video: true}, function(stream) {
    var video = document.getElementById("video");
    video.srcObject = stream;
    video.play();
    pc.addStream(stream);

    pc.setRemoteDescription(offer, function() {
      pc.createAnswer(function(answer) {
        pc.setLocalDescription(new RTCSessionDescription(answer), function() {
          // send the offer to a server to be forwarded to the caller
        }, error);
      }, error);
    }, error);
  }
主动发起者,处理对端发回的响应,并设置setRemoteDescription信息。
1
2
  var offer = getResponseFromFriend();
  pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);
总结:
  • 创建RTCPeerConnection对象, 指定相关的STUN、TURN服务器。
  • 每个RTCPeerConnection对象都关联一个ICE agent。当创建该对象时,ICE agent的相关状态会被初始化。
  • 每个RTCPeerConnection对象关联两个流媒体集合。
  • 本地流媒体集合(Local stream set), 本地流媒体集合代表当前发送的数据流,
  • 远程流集合(Remote stream set), 远程流媒体集合代表RTCPeerConnection对象接收到的流

Comments

comments powered by Disqus