用Webrtc实现免费的1对1高清实时视音频会议系统

前言

WebRTC，它是由谷歌推广的实时音视频技术栈，是W3C的标准，WebRTC技术的本质是构建点对点的实时通信，目前主流的浏览器，包括Chrome, Firefox, Edge等，天然就支持WebRTC协议。对入门开发者来说，选用这几款浏览器，连开发客户端的时间都省了。
以下是笔者实现的1队1 Webrtc视频会议系统的界面：

技术实现原理

最简单的Web视频会议，只需要架设一个Web服务器，服务器兼具信令交换的能力(信令服务也可以独立部署)，两个浏览器通过Web Server交换会话信息，就能建立P2P通道来传输媒体流，进行1to1的视频会议。如下图所示：

两个浏览器向Web服务器请求页面，并进行SDP交换，然后在浏览器之间直接建立P2P Transport，进行媒体流传输。这是最简单的WebRTC应用形式。这种简单的媒体流直联的方式，线上有很多教程，也可以参考WebRTC的demo (https://webrtc.github.io/samples/)，这里不展开。

开发Webrtc视频会议系统的步骤

1、A和B分别创建RTCPeerConnection对象 - connection.

2、A和B分别监听各自 connection.onicecandidate 事件，此事件被调用时会提供一个唯一凭证candidate.

3、A首先调用connection.createOffer获得一个凭证offer, 然后调用connection.setLocalDescription(offer).
之后通过S把offer传递给B.

4、B收到A提供的offer, 调用connection.setRemoteDescription(offer),
然后通过connection.createAnswer()得到一个凭证answer,调用connection.setLocalDescription(answer),
并通过S将answer返回给A.

5、A收到B提供的answer, 调用connection.setRemoteDescription(answer).

此时A和B都获取到了本地和远程的基本信息.

6、之后A和B再通过类似流程相互传递拿到的candidate, 分别调用 connection.addIceCandidate(candidate).
注意此时传入的candidate是对方提供的.

以上步骤完成后, A和B之间就建立好了P2P的链接，可以进行通信了.

一些说明
RTCPeerConnection的createOffer和createAnswer方法创建的都是SDP对象，在浏览器中为RTCSessionDescription类.

SDP对象用来描述需要传输内容的一些信息，例如格式，分辨率，编码。因此在调用createOffer和createAnswer前需要先调用传输内容相关的接口，如addStream.

双方交换SDP，即可让双方知道对方要传输内容的一些基本信息。

A和B建立链接则需要分别拿到对方的candidate.

基于以上技术原理，笔者用libuv实现了一个高性能的Websocket服务器，用于信令交互，理论上支持10k以上的并发连接，信令服务器主要用于建立一对一连接时搭桥，以及交换SDP信息。

基于以上思路实现的免费的Webrtc会议系统的测试页面如下：
PC端：https://wschat.iavcast.com/

移动端：https://wschat.iavcast.com/index_phone.html

由于视音频走的是P2P流量，不需要通过服务器中转，因此，不占用Web服务器的带宽，支持的一对一视频会议人数对无限。
PC端建议用Chrome浏览器打开，移动端可以在微信浏览器里测试。
有兴趣的同学可以打开以上地址进行测试。