使用融云sdk在apicloud平台实现单人多人音频通话

API_Cloud API_Cloud     2022-11-28     140

关键词:

一、效果展示

使用融云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(
target

使用融云SDK在APICloud平台实现单人多人音频通话_APICloud_02使用融云SDK在APICloud平台实现单人多人音频通话_应用开发_03

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"
)

)

使用融云SDK在APICloud平台实现单人多人音频通话_融云_04使用融云SDK在APICloud平台实现单人多人音频通话_音视频_05

发送端页面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)

使用融云SDK在APICloud平台实现单人多人音频通话_应用开发_06使用融云SDK在APICloud平台实现单人多人音频通话_应用开发_07

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"
);

);

使用融云SDK在APICloud平台实现单人多人音频通话_APICloud_08使用融云SDK在APICloud平台实现单人多人音频通话_融云_09

接收端页面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"
)

)

使用融云SDK在APICloud平台实现单人多人音频通话_应用开发_10使用融云SDK在APICloud平台实现单人多人音频通话_音视频_11

发送端页面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)
);

使用融云SDK在APICloud平台实现单人多人音频通话_APICloud_12使用融云SDK在APICloud平台实现单人多人音频通话_融云_13

当对端用户加入了通话时更新用户头像同时也通话计时,当对端用户挂断时移除该用户,当有用户被邀请加入通话时新增用户数据但是头像为灰色默认头像,当通话结束时关闭当前页。

 

接收端页面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();
);

使用融云SDK在APICloud平台实现单人多人音频通话_APICloud_14使用融云SDK在APICloud平台实现单人多人音频通话_应用开发_15

当自己接听电话时开始计时,当对端用户加入了通话时新增用户信息,当对端用户挂断时移除该用户,当通话结束时关闭当前页,长时间不接听系统自动触发通话结束事件。

项目基于trtc的实时多人会议实现(代码片段)

...成技术选型之后,我们需要了解该技术是如何实现和使用的。这一部分参考腾讯云对于TRTC的官方文档说明可以得知:实时音视频新手指引-文档中心-腾讯云-腾讯云(tencent.com)二、TRTC的实现TRTC在使用的时候,主要是作... 查看详情

多人/单人测验游戏的数据库设计

】多人/单人测验游戏的数据库设计【英文标题】:DatabaseDesignforaMultiplayer/SingleQuizgame【发布时间】:2019-06-0809:56:44【问题描述】:我在这里看到了很多问题,但没有一个适合我的问题。我正在尝试创建一个可扩展的ER模型,如果... 查看详情

使用融云sdk遇到的一些问题

 官方文档  如果使用IMKit,对话布局可以不用自己做先导入IMKit module,配置好之后,在module的清单文件中,搜索host,我找到2个,把*替换成自己项目的包名,另外搜索 RONG_CLOUD_APP_KEY,把值换成控制台的给的key&n... 查看详情

一把双刃剑--融云即时通讯sdk中的自定义消息使用心得&指南(上)

一把双刃剑--融云即时通讯sdk中的自定义消息使用心得&指南(上)背景:最近公司新上的app要加上即时通讯的功能,自己快速实现一个当然是不可能的了(项目deadline也顶不住哇).就从各家成熟的SDK厂商选来选去的,各有各的好也各有... 查看详情

paypal支付--平行支付(代码片段)

...付方式,因为paypal支付的SDK说是要大客户申请权限了才让使用,简直恶心,之前不知道,测试都弄完了,切换正式环境,提示权限不足,问客服才知道,简直头疼,经测试以及可以正常使用了的,使用的方式为:api签名方式进行... 查看详情

两年游戏经历

...为是单线程,所以做单人玩法就很简单,按照文档的逻辑实现即可,而多人玩法涉及先后顺序,就需要通过一些变量做标记(锁)(因为是单线程,对标记的操作不需要考虑竞争).我自己写功能逻辑的流程是:  1.通读文档一次,... 查看详情

pycharm的license可以多人用吗

PyCharm的License是支持多人使用的,不同的开发者可以使用不同的License版本,但是总的License许可数量需要遵循购买的License数量。你可以根据自己的需要购买相应数量的License,以便多个开发者可以同时使用PyCharm。参考技术Apycharm的... 查看详情

服务端构架干货:快节奏多人游戏的技术实现

一、简介  序  本文是探索如何制作快节奏多人游戏相关技术和算法的系列文章中的第一章。如果你熟悉多人游戏背后的概念,可以放心跳过本章-接下来是一些介绍性的讨论。  作弊问题  一切都始于作弊。  做为... 查看详情

在flutter多人视频通话中实现虚拟背景美颜与空间音效(代码片段)

...拟背景接口文档)。首先,因为我们是在Flutter里使用,所以我们可以在Flutter里放一张assets/bg.jpg图片作为背景,这里有两个需要注意的点:assets/bg.jpg图片需要在pubspec.yaml文件下的assets添加引用assets:-assets/bg.jpg... 查看详情

多人视频直播sdk用哪个比较好?

...看,得到众多客户一致好评,高品质的直播选欢拓。通过使用欢拓进行企业内训直播,将最新的产品介绍快速、高频次地到达业务终端节点,有效提高培训效率,强化培训对业务的支持力度。欢拓自研的高速直播解决方案(全球... 查看详情

游戏引擎设计:多人游戏和监听服务器

...:35【问题描述】:我的游戏引擎现在包含一个可以工作的单人游戏部分。我现在开始考虑如何做多人游戏部分。我发现很多游戏实际上并没有真正的单人模式,但是当你单独玩时,你实际上也是在托管一个本地服务器,几乎所有... 查看详情

《企业微信》公费电话多人通话功能使用说明

参考技术A企业微信正式上线,相信不少用户都已经开使用了。在企业微信中有一个名为公费电话的功能,公费电话功能还支持多人通话,那么企业微信公费电话怎么打多人通话?下面就让我告诉大家企业微信公费电话拨打多人电... 查看详情

融云sdk:获取用户token的方法

融云SDK查看ServerAPI里面有个获取Token的方法,本以为只要传三个参数就可以。后来发现,在请求头有几个必须要传的参数,否则服务器返回401(未授权)。拿获取Token接口为例子  650)this.width=650;"src="https://images2015.cnblogs.com/blog/8... 查看详情

vue实现web端多人语音视频聊天(代码片段)

1多人语音聊天功能介绍本文展示了如何使用ZEGOExpressSDK构造多人音视频通话场景,即实现多对多实时音视频聊天互动。用户可在房间内与其余用户进行实时音视频通话,互相推拉流。该场景可用于多人实时音视频聊天、... 查看详情

有没有支持多人人脸识别的算法,要识别的人脸比较多

人脸识别SDK是否支持/如何实现多人脸识别?/在打开活体开关的情况下如何实现多人同时识别?虹软Android2.2版本demo——在faceHelper里去掉keepMaxFace那句代码(demo画框设置了只画最大人脸框),并关闭活体,通过faceID的判断可以实... 查看详情

单人开发团队(.NET 平台)中的版本控制、部署和持续测试

】单人开发团队(.NET平台)中的版本控制、部署和持续测试【英文标题】:Versioncontrol,deploymentandcontinuoustestinginasingle-persondevteam(.NETplatform)【发布时间】:2010-09-1613:00:08【问题描述】:我是公司中唯一的开发人员,因此我控制着... 查看详情

如何才能实现多人在线编辑excel?

...关于如何才能实现多人在线编辑EXCEL,我们推荐您可考虑使用「金山文档的-在线协作编辑」,可实现多人同时编辑,并实时保存同步更新,例:AB同事同时编辑一个表格,双方可实时看到对方正在编辑哪一个单元格,并实时同步... 查看详情

“无效的应用程序。删除?”仅在使用诺基亚 SDK 编译时

】“无效的应用程序。删除?”仅在使用诺基亚SDK编译时【英文标题】:"InvalidApplication.Delete?"onlywhencompiledwithaNokiaSDK【发布时间】:2010-08-0216:52:32【问题描述】:我正在为我的大学开发一款软件,目前正在尝试实现NFC功... 查看详情