11-音视频通话-盒子IM论坛

视频聊天功能是基于webrtc实现，对webrtc不熟悉的小伙伴可以先去了解一下相关的web api.

基于webrtc实现的视频聊天需要保证以下几点：

- 用户的浏览器需要支持webrtc
- 服务器需要部署ssl证书，否则浏览器不允许用户访问摄像头和麦克风
- 如果需要跨网段视频聊天，则需要在具有公网IP的服务器搭建一个coturn

目前盒子IM的音视频只开源了web端的单人版，如需升级，可联系作者付费购买：付费-商业版源码

WebRTC（全称 Web Real-Time Communication），即网页实时通信。是一个支持网页浏览器进行实时语音对话或视频对话的技术方案。

作者对webrtc了解其实也十分有限，当时看了几篇博客就开干了，甚至上面这句描述也是网上抄的。

以下是我们用到的webrtc相关的web api：

还有相关的事件：

事件类型	触发时机	目的
onicecandidate	收集到候选信息时触发	将候选信息发送给对方(必须)
oniceconnectionstatechange	连接状态发生变更时触发	连接成功时，开始记录通话时间
ontrack	远程媒体流添加到本地对等连接时触发	获取视频流显示到前端video标签

以下是张三(发起方)呼叫李四(应答方)的时序图：

整个过程过程看起来很复杂，其实就干了两个事情： 交换通信双方的sdp信息(1~10)和候选信息(11~16)

1.发起方调用createOffer获得本地sdp信息

2.发起方调用setLocalDescription把上一步得到的sdp信息设置到本地

3.发起方请求im-platform的/call接口，向应答方发起呼叫，并携带发起方的sdp信息

4.im-platform通过消息推送api将发起方的sdp信息推送到应答方

5.应答方接受到呼叫邀请，并得到发起方的sdp信息，调用setRemoteDescription将发起方的sdp信息设置到本地

6.应答方调用createAnswer获得本地的sdp信息

7.应答方调用setLocalDescription把上一步得到的sdp信息设置到本地

8.应答方请求im-platform的/accept接口,向发起方表示接受呼叫邀请，并携带应答方的sdp信息

9.im-platform通过消息推送api将应答方的sdp信息推送到发起方

10.发起方调用setRemoteDescription将应答方的sdp设置到本地。

至此，双方sdp信息完成交换。

11.发起方调用im-platform的/candiate接口，并携带候选信息

12.im-platform通过消息推送api将发起方的候选信息推送到应答方

13.应答方调用addIceCandidate将候选信息发送给ICE服务器

14.应答方调用im-platform的/candiate接口，并携带候选信息

15.im-platform通过消息推送api将应答方的候选信息推送到发起方

16.发起方调用addIceCandidate将候选信息发送给ICE服务器

11~13是发起方向应答方发送候选信息，14~16则是反过来，应答方向发起方发发送候选信息。注意候选信息的交换双方是同时进行的，而且每次呼叫会发送多个候选信息。

当双方的所有的候选信息都交换完成，webrtc底层会进行检测，选择一个最优候选线路进行视频数据通信。

前端相关代码：

后端相关代码：

类	方法	说明
WebrtcServiceImpl	所有	视频聊天相关接口

11-音视频通话