WebRtc实现多人视频会议以及视频录制上传

1、前言

 最近公司做的一个项目需求是实现多人视频会议聊天，查阅资料，决定使用HTML5新支持的WebRtc来作为视频通讯。客户端使用支持HTML5浏览器即可，如chrome，服务器段需要提供两个主要的服务功能，一个是信令服务器(Signaling Server)，一个是NAT穿透服务器(ICE Server)。信令服务器使用websocket来实现业务上的功能，如呼叫，加入会议，挂断等等，NAT穿透服务器使用chrome内置的

const peerConnectionConfig = {
    iceServers: [
        {url: 'stun:stun.l.google.com:19302' }
    ]
};

简单的框架图如下:

2、webrtc优势和应用场景：

优势：

1 跨平台(Web、Windows、MacOS、Linux、iOS、Android)

2 实时传输

3 音视频引擎

4 免费、免插件、免安装

5 主流浏览器支持

6 强大的打洞能力

应用场景：

在线教育、在线医疗、音视频会议、即时通讯工具、直播、共享远程桌面、P2P网络加速、游戏(狼人杀、线上KTV)等。

3、关于WebRTC 的一些基本概念

传统的视频推流的技术实现一般是这样的：客户端采集视频数据，推流到服务器上，服务器再根据具体情况将视频数据推送到其他客户端上，类似直播 但是 WebRTC 却截然不同，它可以在客户端之间直接搭建基于 UDP 的数据通道，经过简单的握手流程之后，可以在不同设备的两个浏览器内直接传输任意数据。 这其中的流程包括：

1：打开本地自己的摄像头（目的是本地创建视频流，这个视频流是要发送给对方的）
​
2：初始化双方链接的基础创建PeerConnection
​
3：开始创建链接基础信息，这一步就开始正式建立和对方的通信基础（创建完成后本地保存一份offer）
​
4：A 创建 offer 信息后，先调用 setLocalDescription 存储本地 offer 描述，再将其发送给 B。
   B 收到 offer 后，先调用 setRemoteDescription 存储远端 offer 描述；
   然后又创建 answer 信息，同样需要调用 setLocalDescription 存储本地 answer 描述，再返回        给 A
   A 拿到 answer 后，再次调用 setRemoteDescription 设置远端 answer 描述。
​
5：监听ICE候选信息(这个过程是在发送offer和创建应答之间的)
​
6：成功创建一个 WebRTC 连接

【学习地址】：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

【文章福利】：免费领取更多音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击1079654574加群领取哦~