初探WebRTC

本文同步自我得博客：http://www.joeray61.com

简介

WebRTC is a new front in the long war for an open and unencumbered web.

这句话是JavaScript之父Brendan Eich对于WebRTC的评价，大体意思是『WebRTC是争取开放和无阻碍Web的漫长战争中一条新战线』。

那么WebRTC究竟是一种什么样的技术呢？WebRTC是一个免费的开放项目，提供了几个简单的API让浏览器、手机平台还有其余设备经过一个通用的协议进行实时通讯，帮助开发者开发出丰富并且高质量的跨平台实时通讯应用。

本文的目的就是经过简洁的介绍和引导让开发者了解WebRTC的工做流程并可以快速上手开发WebRTC应用。

API

• MediaStream(getUserMedia)

  MediaStream表示一段多媒体流，获取多媒体流的一个简单方式就是经过 getUserMedia函数，该函数能够调用设备的摄像头和麦克风，并拿到这些硬件生成的多媒体流。这些多媒体流能够输出到video标签或者一个RTCPeerConnection。

  getUserMedia接受3个参数：

  1. 一个限制对象，用于指定接受的流

  2. 获取stream成功后的回调函数，被调用时能获取到对应的流

  3. 获取stream失败后的回调函数，被调用时能获取到一个错误对象

  具体用法以下所示：

  var getUserMedia = navigator.getUserMedia || 
                     navigator.webkitGetUserMedia ||
                     navigator.mozGetUserMedia;
  var constraints = {video: true};
  getUserMedia(constraints, function (stream) {
      var video = document.querySelector("video");
      //URL.createObjectURL方法把stream转换成blob，做为video的src属性进行播放
      video.src = window.URL.createObjectURL(stream);
      video.play();
  }, function (error) {
      console.log(error);
  });

• RTCPeerConnection

这是WebRTC的架构图，看完这张图，我表示彻底不懂这是什么鬼，太复杂了。不过不懂不要紧，RTCPeerConnection已经帮咱们作了不少事情，咱们只须要把RTCPeerConnection理解成一种p2p传输音视频数据的通道，可是咱们仍然还须要服务器来为咱们传递消息，由于在创建p2p以前须要先互相交换session、网络配置、媒体适配等信息。另外，WebRTC还须要服务器帮助完成NAT穿越，以及在p2p创建失败的时候做为中转服务器。具体用法将在流程讲解中说明。

• RTCDataChannel

  WebRTC除了支持视频和音频流以外，还支持其余类型的数据。RTCDataChannel用于点到点的任意数据交换，具备低延迟和高吞吐量的特色。RTCDataChannel必须创建在RTCPeerConnnection之上，没办法单独工做。

  这个API潜在的应用场景不少，例如：

  • 游戏

  • 远程桌面应用

  • 实时文字聊天

  • 文件传输

  建立一个RTCDataChannel的方式以下：

  var RTCPeerConnection = webkitRTCPeerConnection || mozRTCPeerConnection;
  var peerConn = new RTCPeerConnection();
  var dc = peerConn.createDataChannel("label");

流程讲解

看完上面的内容，你们应该仍是处于云里雾里的状态，不知道WebRTC应用要如何开发，3个API如何配合使用。不要紧，这里才是重点，看完这一段，相信你的全部疑惑就都解开了。

要用WebRTC创建一个p2p通道须要经历2个步骤：

1. 得到本机SDP描述符并交换

   • A、B均实例化一个RTCPeerConnection(如下简称rpcA和rpcB),调用rpcA的createOffer()方法创建一个offer信令，而且拿到A的SDP

   • 经过rpcA的setLocalDescription()方法设置A机器的本地描述

   • A经过服务器将offer信令发给B

   • B接收到A的offer信令，经过rpcB的setRemoteDescription()方法设置远程机器（即A）的描述

   • B调用rpcB的createAnswer()方法创建一个answer信令，而且拿到B的SDP

   • 经过rpcB的setLocalDescription()方法设置B机器的本地描述

   • B经过服务器将answer信令发送给A

   • A接收到B的answer信令，经过rpcA的setRemoteDescription()方法设置远程机器B的描述

   这个过程完成后，A和B就都拿到各自的SDP描述符了

2. 经过ICE框架链接两段主机的网络地址

   ICE框架具体内容我不清楚，我们姑且先了解在WebRTC中如何使用，对ICE感兴趣的同窗能够自行谷歌。

   在实例化RTCPeerConnection对象的时候能够传入ICE服务器的地址，咱们可使用谷歌提供的『stun:stun.l.google.com:19302』或者Mozilla提供的『stun:stun.services.mozilla.com』，代码以下：

   var configuration = {iceServers: [{url: "stun:stun.l.google.com:19302"}]};
   var rpc = new RTCPeerConnection(configuration);

   在rpc上绑定onicecandidate事件的回调函数，当网络候选可用时这个函数会被调用，在这个回调函数中，本机能够拿到ice candidate信令，而后经过服务器发给远程机器，远程机器经过本身的rpc实例的addIceCandidate()方法添加，一样地，远程机器也应该将本身的ice candidate信令经过服务器发送给本机。

   当双方的ice candidate交换完成时，链接就创建成功了，能够在rpc示例上调用addStream()来添加流，另外一边经过绑定onaddstream事件就能够获取到传过去的流。

   服务器通讯部分，没有规定必需要用某种协议，因此只要能在两边传输消息的技术可使用，例如WebSocket、XHR等，你们自行选择便可。

示例

原本想本身写个例子给你们参考的，后来发现网上有个很是棒的实例教程，我就直接上地址了https://bitbucket.org/webrtc/codelab

小结

写这篇文章的目的是为了让学习WebRTC的同窗可以快速上手，对WebRTC技术有个总体的概念，因此文章写的比较简短，专一于讲解WebRTC的运做流程，对一些相关技术，好比ICE、SDP等没有深刻探讨（固然我也不太懂）。若是你想快速上手制做WebRTC应用，看完这篇文章再对着codelab提供的例子一步一步跟着作应该就没问题了。Good luck!

参考资料

• http://www.html5rocks.com/en/...

• http://www.webrtc.org/

• http://www.w3.org/TR/webrtc/

• https://developer.mozilla.org...