使用融云SDK在APICloud平台实现单人多人音频通话
source link: https://blog.51cto.com/u_9338896/5391185
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
使用融云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首页融云初始化以及监听代码如下：
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({
target
1、单人通话
调用startCall发起通话，需要注意userIdLis参数必填否则无法建立通话，对方也无法收到来电事件。
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代码如下：
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并传递相关参数
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。
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();
});
当自己接听电话时开始计时，当对端用户加入了通话时新增用户信息，当对端用户挂断时移除该用户，当通话结束时关闭当前页，长时间不接听系统自动触发通话结束事件。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK