集成融云 Web 音视频通话踩坑之旅

Posted 2021-09-16 融云RongCloud

前言

最近有个项目需要使用的融云的 CallLib SDK 实现类似微信的视频通话，所以在项目还未正式启动的时候，我已经偷偷的开始进行集成了，以免到时候不熟一顿加班那真的欲哭无泪了，好消息就是我已经使用过融云家的 IMLib SDK 做过即时通讯的功能，所以整个注册流程和开发者后台的使用已经比较熟了，当然，即时不熟也没关系，跟着他们的文档一步一步来，也能很快的就上手了。 融云官网：https://www.rongcloud.cn/

下面是集成的时候碰到的一些需要注意的问题：

1、Web 站点必须为 localhost 或 https 2、必须成功连接 IM 后, 才可进行 CallLib 通话 3、新版谷歌浏览器（86版本）会报错，我集成的 RTC 版本是 3.2.3 4、音视频通话接通不了

综上问题，我会逐一解答，关于具体的集成可以直接参考：https://docs.rongcloud.cn/v4/views/rtc/call/noui/quick/web.html

还有具体的 demo 也可以参考一下 https://github.com/rongcloud-snippets/web-call-quickstart

Web 站点必须为 localhost 或 https： 这个是融云的使用音视频通话的前置条件，本来在本地调试的时候好好的，可是发布到线上的时候就不能用了，最后提交工单询问融云的技术人员上线是否还需要配置什么，最后排查一圈发现生产环境使用的站点是 http（欲哭无泪。。。），童鞋们引以为戒啊！！

必须成功连接 IM 后, 才可进行 CallLib 通话： 直接看代码：

// appKey 可在融云开发者后台获取
const im = RongIMLib.init({ appkey: \'<your-appkey>\' })
// 添加事件监听器
im.watch({
// 连接状态监听
status(evt) {
console.log(\'连接状态码:\', evt.status);
},
// 消息监听
message(evt) {
console.log(\'收到新消息:\', evt.message);
}
})
// CallLib 初始化
var config = {
timeout: 20000,
RongIMLib: RongIMLib,
RongRTC: RongRTC
};
rongCallLib = RongCallLib.init(config);
​
//token 可从开发者后台获取 或 Server API
const token = \'\'
im.connect({ token }).then(user => {
console.log(\'链接成功, 链接用户 id 为: \', user.id);
}).catch(error => {
console.log(\'链接失败: \', error.code, error.msg);
});

新版谷歌浏览器会报错： 由于浏览器更新，导致 SDK 需要升级，升级到最新版本的 RTC SDK 下载地址：https://cdn.ronghub.com/RongRTC-3.2.6.min.js 需要注意，如果使用的 SDK 2.X 也需要升级到 2.5.10 以上

音视频通话接通不了： 这种情况我总结分析了一下几种情况，如下：

代码传参错误或者书写错误 这个好像没什么说的，只能怪自己不仔细吧！跟着文档来呗

结束通话没有调用挂断方法 hungup 用户主动发起挂断，在 rongCallLib.commandWatch 监听中收到 HungupMessage 消息，可以调用 rongCallLib.hungup 来挂断通话，不然下次呼叫时会出现报错，提示对方正忙

如何识别挂断原因 HungupMessage 消息中 reason 字段及 SummaryMessage 消息中 status 字段都为挂断原因，详情地址参考：https://docs.rongcloud.cn/rtc/calllib/web/code/

因为对音视频的集成也刚开始，还在学习当中。后续随着继续深入，也会同步音视频相关的集成问题，方便复习记录也希望能帮到需要的童鞋！！！