莫道桑榆晚,为霞尚满天。这篇文章主要讲述使用融云SDK在APICloud平台实现单人多人音频通话相关的知识,希望能为你提供帮助。
一、效果展示
二、功能实现的思路
使用之前必须先获取token、init、connect,同时需要到融云后台开通音视频通话功能(开通或者关闭30分钟后生效)。
单人通话逻辑比较简单,主要会用到didReceiveCall、didConnect、didDisconnect等三个事件。
主要通话流程:
(1)发起通话
(2)监听来电
(3)接听或者挂断
多人通话逻辑复杂一点,并且只能应用在群组或者讨论组,会用到didReceiveCall、didConnect、remoteUserDidJoin、remoteUserDidLeft、remoteUserDidInvite、didDisconnect等六个事件。
主要通话流程:
(1)在组里选择几个成员发起通话
【使用融云SDK在APICloud平台实现单人多人音频通话】(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(
target
1、单人通话
调用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();
);
当自己接听电话时开始计时,当对端用户加入了通话时新增用户信息,当对端用户挂断时移除该用户,当通话结束时关闭当前页,长时间不接听系统自动触发通话结束事件。
推荐阅读
- Gitlab调用API更改用户权限属性
- FAQ调用应用内支付SDK时报错,如何用tag对问题进行排查和分析
- java基础 - 数据结构
- 麒麟系统开发笔记(制作安装麒麟系统的启动U盘物理机安装麒麟系统以及搭建Qt开发环境)
- 网站服务器如何选配
- 智慧园区效果不满意(请收下ThingJS这份秘籍)
- 形参与实参的区别,原来形参是庶子所以不得宠
- Navicat 16 for MySQL软件安装包和安装教程
- 前后端分离的好处有哪些()