WebRTC 初体验

WebRTC 是网络实时通讯（Web Real-Time Communication）的缩写，经过它 Web 开发者可以轻易快捷地开发出丰富的实时多媒体应用，而无需下载安装任何插件。

本文总结了我这两天探究 WebRTC 过程当中了解到的相关知识以及我的看法，而且结合我本身的实践说明了 WebRTC 的一些基本用法。

概述

WebRTC 容许网络应用创建浏览器之间的点对点链接，实现视频流、音频流或者其余任意数据的传输。

基本全部现代浏览器都支持 WebRTC：

WebRTC 主要提供了三个核心的 API：

• getUserMedia：能够获取本地的媒体流，一个流包含几个轨道，好比视频和音频轨道。
• RTCPeerConnection：用于创建 P2P 链接以及传输多媒体数据。
• RTCDataChannel：创建一个双向通讯的数据通道，能够传递多种数据类型。

经过这三个 API，咱们能够获取本地的音视频流，而后与其余浏览器创建点对点链接并将音视频流发送给对方，还能够创建一个创建一个双向的数据通道，发送文本、文件等实时数据。

获取本地媒体流

经过 getUserMedia 函数，咱们能够发起获取本地媒体流的请求：

navigator.getUserMedia(constraints, successCallback, errorCallback);
复制代码

函数有三个参数，分别是约束条件，成功的回调和失败的回调。成功获取媒体流后，媒体流能够提供给本地的音频或视频元素进行播放、后期处理的 JavaScript 代理，或者发送给另外一端。

下面是一个简单的示例，访问摄像机并在页面中播放视频：

在 CodePen 上查看。

我添加了 WebRTC Adapter 处理浏览器的兼容。当点击按钮时，经过 getUserMedia 获取本地视频，浏览器会弹框询问用户是否赞成，成功获取视频流以后，将流设置为 video 的源对象。

点对点链接

获取到本地的媒体流以后，为了实现音视频通话，接下来须要作的就是将媒体流发送给对方。在 WebRTC 中，通讯双方直接创建点对点链接，数据不须要通过服务器转发。

要创建一个链接须要知道对方的 IP 地址和端口号，而现实网络环境中，主机一般都处在 NAT 设备以后，也就是常说的内网中。NAT 设备负责内部通讯地址和外部通讯地址之间的互相转换，例如将 192.168.0.3 映射成 120.132.92.21:9202。经过 NAT，使用少许的公有 IP 地址就能够表明较多的私有 IP 地址，有助于解决 IPv4 地址枯竭的问题。若是要与内网中的设备创建链接，就须要 NAT 穿透（内网穿透）技术。

WebRTC 经过 ICE（Interactive Connectivity Establishment，交互式链接创建）来创建 P2P 链接。ICE 是一个框架，它整合了 STUN 和 TURN 协议，为 NAT 穿透技术提供了统一实现。

RTCPeerConnection

WebRTC 中，咱们经过 RTCPeerConnection 创建通讯双方的点对点链接，该接口提供了建立，保持，监控，关闭链接的方法的实现。

为了创建链接，咱们须要一台信令服务器，用于浏览器之间创建通讯时交换各类元数据（信令）。同时，还须要 STUN 或者 TURN 服务器来完成 NAT 穿透。链接的创建主要包含两个部分：信令交换和设置 ICE 候选。

链接创建成功以后，能够经过 addStream 加入流到 RTCPeerConnection 中来传输媒体流数据，还能够监听 addstream 事件获取对方发送过来的流。

信令交换

信令交换过程以下：

1. 通讯双方（甲和乙）各建立一个 RTCPeerConnection（简称 pc） 实例。
2. 甲经过 createOffer 方法建立一个包含甲的 SDP 描述的 offer 信令。
3. 甲经过 setLocalDescription 方法，将甲的 SDP 描述设置给甲的 pc 实例。
4. 甲将 offer 信令经过信令服务器发送给乙。
5. 乙经过 setRemoteDescription 方法将甲的 SDP 描述设置给乙的 pc 实例。
6. 乙 createAnswer 方法创建一个包含乙的 SDP描述 answer 信令。
7. 乙经过 setLocalDescription 方法，将乙的 SDP 描述设置给乙的 pc 实例。
8. 乙将 answer 信令经过信令服务器发送给甲。
9. 甲经过 setRemoteDescription 方法将乙的 SDP 描述设置给甲的 pc 实例。

其中 SDP 是会话描述协议，用于描述流媒体的初始化参数。

信令的传输一般使用 http、WebSocket、DataChannel 三种方式。

添加 ICE 候选

通讯双方各自建立配置了 ICE 服务器的 pc 实例，并监听 icecandidate 事件。当 ICE 候选可用时，将会触发 icecandidate 事件，通讯双方须要将 ICE 候选信息经过信令服务器发送给对方。当收到对方发送过来的 ICE 候选时，调用 addIceCandidate 方法，将其添加到 pc 实例中。

示例

下面是一个简单地示例程序，通讯双方都是本地，省去了信令交换过程。

在 CodePen 上查看。

参考连接

• webrtc.org/
• 实现WebRTC P2P链接
• ICE协议下NAT穿越的实现（STUN&TURN）
• P2P技术之STUN、TURN、ICE详解
• WebRTC介绍及简单应用