实现WebRTC群聊会议室(Mesh方案)

时间:2023-02-17 18:09:00

近期需要做一个类似会议室功能,但网络上大多数是一对一通信,故记录分享希望帮助到有用的人

WebRTC一对一聊天原理

关于WebRTC建立一对一聊天的模板网上很多,可参考以下博客:springboot+websocket+webRTC在chrome上实现web视频通话

关于WebRTC原理也在此简单讲解,内容引用:WebRTC通信流程

实现WebRTC群聊会议室(Mesh方案)

上述序列中,标注的场景是ClientA向ClientB发起对聊请求,调用描述如下(此流程图最好对着代码阅读后进行理解):

  • ClientA首先创建PeerConnection对象,然后打开本地音视频设备,将音视频数据封装成MediaStream添加到PeerConnection中。

  • ClientA调用PeerConnection的CreateOffer方法创建一个用于offer的SDP对象,SDP对象中保存当前音视频的相关参数。ClientA通过PeerConnection的SetLocalDescription方法将该SDP对象保存起来,并通过Signal服务器发送给ClientB。

  • ClientB接收到ClientA发送过的offer SDP对象,通过PeerConnection的SetRemoteDescription方法将其保存起来,并调用PeerConnection的CreateAnswer方法创建一个应答的SDP对象,通过PeerConnection的SetLocalDescription的方法保存该SDP对象并将它通过Signal服务器发送给ClientA。

  • ClientA接收到ClientB发送过来的应答SDP对象,将其通过PeerConnection的SetRemoteDescription方法保存起来。

    交换Candidate(Candidate信息是交换SDP对象自动收集的信息。在创建端点(PeerConnection)的时候,添加回调函数(onIceCandidate))
  • 在SDP信息的offer/answer过程中(不要被流程图误导,认为是按流程图顺序执行),ClientA和ClientB已经根据SDP信息创建好相应的音频Channel和视频Channel并开启Candidate数据的收集,Candidate数据可以简单地理解成Client端的IP地址信息(本地IP地址、公网IP地址、Relay服务端分配的地址)。

  • 当ClientA收集到Candidate信息后,PeerConnection会通过OnIceCandidate接口给ClientA发送通知,ClientA将收到的Candidate信息通过Signal服务器发送给ClientB,ClientB通过PeerConnection的AddIceCandidate方法保存起来。同样的操作ClientB对ClientA再来一次。

  • 这样ClientA和ClientB就已经建立了音视频传输的P2P通道,ClientB接收到ClientA传送过来的音视频流,会通过PeerConnection的OnAddStream回调接口返回一个标识ClientA端音视频流的MediaStream对象,在ClientB端渲染出来即可。同样操作也适应ClientB到ClientA的音视频流的传输。

WebRTC多对多设计思路

如果你已经熟悉上述的流程,那么就可以构建群聊,首先看流程图
实现WebRTC群聊会议室(Mesh方案)
理解流程图之后,可以直接下载Demo进行阅读和改造:WebRTC多对多会议室

可以看出上述方案采用P2P客户端直连方式,使得上行客户端的带宽压力(ClientC)随下行客户端(ClientA、ClientB)呈正相关,因此只适合小型会议室(3-4人),如果为了更好的伸缩延展最好采用SFU架构(订阅/发布模式),后续会进行更新讲解。