WebRTC初步研究

最新推荐文章于 2024-11-13 17:42:56 发布

doujiao_pengpeng

最新推荐文章于 2024-11-13 17:42:56 发布

阅读量413

点赞数

分类专栏：网络文章标签： WebRTC p2p

本文链接：https://blog.csdn.net/doujiao_pengpeng/article/details/76614879

版权

网络专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 概览

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

首先这个开源项目使用了

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

2. 从WebRTC说起

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

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

2.1 获取音视频并显示

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

2.2 核心：建立P2P通信

寻址问题

IP地址短缺，NAT导致无法直接访问到这些节点，即没有公网IP
即使有公网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);//也是各种触发，各种处理