WebRTC初步研究

1. 概览

导师给了个项目研究WebRTC的相关的东西，给了一个开源项目。记录一下研究过程。

首先这个开源项目使用了

• express框架，
• socket.io框架
• 基于stream的机制
• WebRTC
  
  • MediaStream(getUserMedia),
  • RTCPeerContection
  • RTCDataChannel（未使用）
• ES6 Promise API

2. 从WebRTC说起

首先需要了解一些WebRTC是什么东西。目前理解就是基于WebRTC建立P2P连接实现音视频以及数据传输。而本项目（demo)就是搭建一个简单的Two-side video chat。先理下思路：

1. 获取音视频，以及展示。使用到WebRTC 的getUserMedia API
2. 建立P2P连接，实现音视频传输并展示。

2.1 获取音视频并显示

使用getUserMedia API 这部分要注意的就是兼容性问题了，具体使用看相关教程。

2.2 核心：建立P2P通信

寻址问题

1. IP地址短缺，NAT导致无法直接访问到这些节点，即没有公网IP
2. 即使有公网IP,也有网络防火墙的问题

解决方案：

• 对称性NAT，使用数据转发的方式实现通信，但是已经不属于P2P通信了
• 其他类型的 NAT 网络 和防火墙，使用“NAT打洞”技术即可实现 P2P 通信

WebRTC 使用了 STUN，TURN，ICE 协议来解决打洞的问题，

• STUN 协议负责打洞
• TURN 协议负责转发
• ICE 协议则规定了打洞的流程和数据结构

通信流程：

• 连接两端节点访问 STUN 服务器获取自己的 ICE 信息
• 连接两端节点将各自的 ICE 信息通过『信号通道』发送给对方
• 连接发起端创建 Offer 信息，并将 Offer 信息通过『信号通道』发送给对端
• 连接接受端收到 Offer 信息后创建 Answer 信息，并通过『信号通道』发送发起
• 发起端创建数据通道，并设置各种回调函数
• 接受端收到数据通道创建事件，设置各种回调函数

其中信号通道作用就是在双方还没建立P2P连接之前，双方需要一个方式来传输配置等相关信息。这个信道可以使用任何技术实现。那前端当然最好使用node了，这就是express和socket.io的由来，其它其实都ok的。

2.3 express部分

这部分还是常规的搭建一个基础的web服务，静态资源管理，地址解析等等情况。

2.4 socket.io部分

之前用到比较少，尽管看过API，但是没有亲自使用过，这次又重新研究了下。大体分为引入连接服务器，使用两部分。

引入不说，连接服务器如果是本地，可以不传地址。

使用整个socket.io大致就是基于事件机制。比如

/* server 服务端 */io.on('connection',function(client){//这里是将socket的实例作为参数，所以可以使用socket    client.on(type,handler);//基本上就是监听各种事件然后做处理    client.emit(type,handler);//也是各种触发，各种处理})/* client客户端 */var client = io('服务器地址')//本地可以不传client.on(type,handler);//基本上就是监听各种事件然后做处理client.emit(type,handler);//也是各种触发，各种处理

基本上就是基于事件的来回触发，传递消息。

socket.io中文文档

具体如何搭建还是看教程吧

3. 后续

刚接触到WebRTC,以为要接触到直播技术了，然而事实上目前的WebRTC并不适合，开销太大，知乎上也有讨论。所以需要更换技术架构，对于多对多的视频会议或者一对多的直播需要配合MCU来控制分发。慢慢了解之后发现一些公司也在商业层面上使用，所以这项技术可以改进目前的实时通信服务。还是有必要研究的。

关于兼容性

目前支持力度不是太好，尽管13年在google I/O大会已经提出来了，关于API方面可以使用adapter.js做垫片隔离API版本和厂商API。同时许多的js框架也实现了一些API的补充和扩展。

4. 相关链接

Getting Started with WebRTC
https://github.com/webrtc/samples

https://webrtc.org/start/ 官网上的一些资源列表