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

Posted 2022-06-18 API_Cloud

一、效果展示

 

二、功能实现的思路

使用之前必须先获取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,    //用户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();
        );

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