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

1、单人通话

调用startCall发起通话，需要注意userIdLis参数必填否则无法建立通话，对方也无法收到来电事件。

    rong.startCall({targetId: '3001',    //用户iduserIdList: ['3001'] //必填如果不填无法建立通话}, function (ret) {if (ret.callSession.callId) {api.openWin({name: 'send-call',url: 'send-call.html',pageParam: {uid: '3000',                   //自己的用户iduserIdList: ['3001'],callId: ret.callSession.callId,//发送者可以通过通话id挂断通话callType: 'one'                //通话类型单人one 多人more},animation: { type: "fade"}})}})

发送端页面send-call.html需要处理来电接听事件（didConnect）以及通话结束事件（didDisconnect）、显示对方用户个人信息、通话计时。

当用户接听时就开始计时，时间格式00:00:00代码如下：

        timer(){var that = thisclearInterval(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', //群组或者讨论组idconversationType: 'GROUP',//必填必须和targetId类型保持一致。userIdList: ['3001','3002'] //不能填自己的id}, function (ret) {if (ret.callSession.callId) {api.openWin({name: 'send-call',url: 'send-call.html',pageParam: {uid: '3000',                   //自己的用户iduserIdList: ['3001','3002'] ,callId: ret.callSession.callId,//通话idcallType: 'more'               //通话类型单人one 多人more},animation: {type: "fade"}})}})

发送端页面send-call.html需要处理以下业务

通话已接通的事件（didConnect）

对端用户加入了通话的事件（remoteUserDidJoin）

对端用户挂断（remoteUserDidLeft）

有用户被邀请加入通话的事件（remoteUserDidInvite）

通话结束事件（didDisconnect）

以及显示和更新当前通话成员信息、通话计时。

       //通话接通事件api.addEventListener({name: 'didConnect'}, function (ret, err) {vm.Connect = truevm.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 = falsefor (var i in vm.userList) {if (vm.userList[i].uid == ret.value.uid) {has = truevm.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平台实现单人多人音频通话相关推荐

android.intent.action.view 融云,Android 融云SDK集成单聊
一 .下载 SDK 您可以到融云官方网站下载融云 SDK.融云 SDK 各部分功能以插件化的形式独立提供,开发者可以根据自己的需要,自由组合下载.各组件的功能如下: IMKit – 融云 IM 界面组 ...
基于融云SDK实现高仿微信
本篇主要介绍了一下本人正式完成的第一个Android demo应用. 1.demo运行效果图 2.为了实现微信的体验效果,这里面用到了几个特殊的控件或者技术. 2.1 第一张图中的"+&qu ...
iOS---集成融云SDK即时通讯
链接:https://www.jianshu.com/p/eabfb0a93cf9 相信大家在项目中会用到即时通讯功能,自己去写的话会需要前后台合作,会大大加大开发的周期,所以考虑使用第三方的即时通讯 ...
融云 IM 在 Electron 平台上的设计实践
Electron 凭借其相对更低的研发成本投入.强大的跨平台支持.拥有基数庞大的 Javascript 开发者受众等优势,在 PC 端桌面应用软件研发领域异军突起. 本文旨在分享融云 IM 在 Ele ...
android 融云sdk集成,使用融云SDK集成
使用融云开始还是遇到了很多的坑的,特别是看不太明白官方文档.或许自己不够有耐心. 期间还遇到了许多bug,比如,明明配置的没问题了,可我的手机还是连不上融云. 后来还是在融云的知识库中找到了解决办法, ...
Android接入融云sdk流程（思路）
1.导入RongImKit以及v4包. 2.在融云控制台为自己的App申请AppKey和AppSecret. 3.在AndroidManifest中添加相应权限.服务.广播和app对应的AppKey. ...
关于融云 SDK 在使用 p8 证书的坎坷~
s 关于融云 SDK 在使用 p8 证书的坎坷~ 新上的项目使用了融云的 IM SDK,但在项目集成 APNs 推送的时候,尝鲜使用了一下开发者后台的 p8 证书,此文记录使用 p8 的辛酸史~ P8 ...
融云 SDK 集成详解 – Android Studio
一 .下载 SDK 您可以到融云官方网站下载融云 SDK.融云 SDK 各部分功能以插件化的形式独立提供,开发者可以根据自己的需要,自由组合下载.各组件的功能如下: IMKit – 融云 IM 界面组 ...
安卓融云SDK的使用，会话列表，1v1发起单聊
安卓融云SDK的使用,会话列表,1v1发起单聊 1v1发起单聊继承ConversationFragment 前提把融云该导入的SDK和UI包都导入一下,这个不多说,按照官方文档即可不管是会话列表还 ...

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

使用融云SDK在APICloud平台实现单人多人音频通话相关推荐

最新文章

热门文章