使用融云SDK在APICloud平台实现单人多人音频通话
原创使用融云SDK在APICloud平台实现单人多人音频通话
原创
一、效果展示
二、功能实现的思路
使用之前必须先获取token、init、connect，同时需要到融云后台开通音视频通话功能（开通或者关闭30分钟后生效）。
单人通话逻辑比较简单，主要会用到didReceiveCall、didConnect、didDisconnect等三个事件。
主要通话流程：
（1）发起通话
（2）监听来电
（3）接听或者挂断
多人通话逻辑复杂一点，并且只能应用在群组或者讨论组，会用到didReceiveCall、didConnect、remoteUserDidJoin、remoteUserDidLeft、remoteUserDidInvite、didDisconnect等六个事件。
主要通话流程：
（1）在组里选择几个成员发起通话
（2）成员收到来电
（3）成员接听或者挂断
（4）邀请几个成员加入当前通话
（5）被邀请组员收到来电
（6）被邀请组员接听或挂断来电
（7）通话组员监听是否有新成员加入或成员退出
为了让页面代码逻辑更简单，设计了四个页面
index.html（融云初始化、所有监听等主要业务代码）
receive-call.html（接收端业务代码，单人多人通话代码）
send-call.html（发送端业务代码，单人多人通话代码）
friends.html（群组或讨论组成员列表）
index.html首页融云初始化以及监听代码如下：
var rong = api.require('rongCloud2');
rong.init(function (ret, err) {
if (ret.status == 'success') {
rong.connect({
token: $api.getStorage('token')
}, function (ret, err) {
});
}
});
//来电事件
rong.addCallReceiveListener({
target: 'didReceiveCall'
}, function (ret) {
if (ret.callSession.status) {
var callType = 'more';
if (ret.callSession.conversationType == 'PRIVATE') {
callType = 'one';
}
api.openWin({
name: 'receive-call',
url: 'receive-call.html',
pageParam: {
uid: ret.callSession.callerUserId,
userIdList: [ret.callSession.observerUserList],
callId: ret.callSession.callId,
callType: callType
},
animation: {type: "fade"}
});
}
});
//通话结束事件
rong.addCallSessionListener({
target: 'didDisconnect'
}, function (ret) {
api.sendEvent({
name: 'didDisconnect'
});
});
//对端挂断事件
rong.addCallSessionListener({
target1、单人通话
调用startCall发起通话，需要注意userIdLis参数必填否则无法建立通话，对方也无法收到来电事件。
rong.startCall({
targetId: '3001', //用户id
userIdList: ['3001'] //必填如果不填无法建立通话
}, function (ret) {
if (ret.callSession.callId) {
api.openWin({
name: 'send-call',
url: 'send-call.html',
pageParam: {
uid: '3000', //自己的用户id
userIdList: ['3001'],
callId: ret.callSession.callId,//发送者可以通过通话id挂断通话
callType: 'one' //通话类型单人one 多人more
},
animation: { type: "fade"}
})
}
})发送端页面send-call.html需要处理来电接听事件（didConnect）以及通话结束事件（didDisconnect）、显示对方用户个人信息、通话计时。
当用户接听时就开始计时，时间格式00:00:00代码如下：
timer(){
var that = this
clearInterval(time)
time = setInterval(function () {
number++
var hour = that.add0(Math.floor(number / 60 / 60));
var min = that.add0(Math.floor(number / 60) % 60);
var s = that.add0(number % 60);
that.time = hour + ':' + min + ':' + s
}, 1000)
}Index.html页面监听来电事件并打开接收端页面receive-call.html并传递相关参数
rong.addCallReceiveListener({
target: 'didReceiveCall'
}, function (ret) {
if (ret.callSession.status) {
var callType = 'more';
if (ret.callSession.conversationType == 'PRIVATE') {
callType = 'one';
}
api.openWin({
name: 'receive-call',
url: 'receive-call.html',
pageParam: {
uid: ret.callSession.callerUserId,
userIdList: [ret.callSession.observerUserList],
callId: ret.callSession.callId,
callType: callType
},
animation: {type: "fade"}
});
}
});接收端页面receive-call.html需要显示对方用户个人信息、通话计时、接听、挂断等。
当用户挂断或者自己挂断就关闭相应页面，长时间不接听系统自动触发通话结束事件。
2、多人通话
调用startCall发起通话，注意targetId为讨论组或者群组id，参数conversationType必填同时要和targetId类型保持一致，参数userIdLis里面用户必须是本群组或者讨论组成员同时不能填自己的id。
rong.startCall({
targetId: 'group318', //群组或者讨论组id
conversationType: 'GROUP',//必填必须和targetId类型保持一致。
userIdList: ['3001','3002'] //不能填自己的id
}, function (ret) {
if (ret.callSession.callId) {
api.openWin({
name: 'send-call',
url: 'send-call.html',
pageParam: {
uid: '3000', //自己的用户id
userIdList: ['3001','3002'] ,
callId: ret.callSession.callId,//通话id
callType: 'more' //通话类型单人one 多人more
},
animation: {type: "fade"}
})
}
})发送端页面send-call.html需要处理以下业务
通话已接通的事件（didConnect）
对端用户加入了通话的事件（remoteUserDidJoin）
对端用户挂断（remoteUserDidLeft）
有用户被邀请加入通话的事件（remoteUserDidInvite）
通话结束事件（didDisconnect）
以及显示和更新当前通话成员信息、通话计时。
//通话接通事件
api.addEventListener({
name: 'didConnect'
}, function (ret, err) {
vm.Connect = true
vm.title = '通话中...'//改变通话状态
vm.timer();//开始计时
});
//对端加入通话事件
api.addEventListener({
name: 'remoteUserDidJoin'
}, function (ret, err) {
var obj = vm.inData(ret.value.uid);
for (var i = 0; i < vm.userList.length; i++) {
var rs = vm.userList[i]
if (ret.value.uid == rs.uid) {
rs.avatar = obj.avatar;//更新用户头像
}
}
});
//对端挂断电话
api.addEventListener({
name: 'remoteUserDidLeft'
}, function (ret, err) {
var obj = vm.inData(ret.value.uid);
for (var i = 0; i < vm.userList.length; i++) {
var rs = vm.userList[i]
if (ret.value.uid == rs.uid) {
vm.userList.splice(i, 1);//删除用户数据
}
}
});
//通话结束
api.addEventListener({
name: 'didDisconnect'
}, function (ret, err) {
api.closeWin();
});
//邀请加入通话的事件
api.addEventListener({
name: 'remoteUserDidInvite'
}, function (ret, err) {
var rs = vm.inData(ret.value.uid);
let obj = { uid: rs.uid, nickname: rs.nickname, avatar: '../res/user.png' }
vm.userList.push(obj)
});当对端用户加入了通话时更新用户头像同时也通话计时，当对端用户挂断时移除该用户，当有用户被邀请加入通话时新增用户数据但是头像为灰色默认头像，当通话结束时关闭当前页。
接收端页面receive-call.html需要处理以下业务
对端用户加入了通话的事件（remoteUserDidJoin）
对端用户挂断（remoteUserDidLeft）
通话结束事件（didDisconnect）
以及显示和更新当前通话成员信息、计时。
监听代码如下：
//对端加入通话
api.addEventListener({
name: 'remoteUserDidJoin'
}, function (ret, err) {
var has = false
for (var i in vm.userList) {
if (vm.userList[i].uid == ret.value.uid) {
has = true
vm.userList[i].avatar = vm.inData(ret.value.uid).avatar;//更新用户头像
}
}
if (has == false) {
var rs = vm.inData(ret.value.uid);
vm.userList.push(rs)//增加用户信息
}
});
//对端挂断电话
api.addEventListener({
name: 'remoteUserDidLeft'
}, function (ret, err) {
var obj = vm.inData(ret.value.uid);
for (var i = 0; i < vm.userList.length; i++) {
var rs = vm.userList[i]
if (ret.value.uid == rs.uid) {
vm.userList.splice(i, 1);//删除用户
}
}
});
//通话结束
api.addEventListener({
name: 'didDisconnect'
}, function (ret, err) {
api.closeWin();
});当自己接听电话时开始计时，当对端用户加入了通话时新增用户信息，当对端用户挂断时移除该用户，当通话结束时关闭当前页，长时间不接听系统自动触发通话结束事件。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。