一、页面效果展示(视频演示http://139.155.81.223/demo/)
二、功能实现的思路
使用之前必须先获取token、init、connect,同时需要到融云后台开通音视频通话功能(开通或者关闭30分钟后生效)。
单人通话逻辑比较简单,主要会用到didReceiveCall、didConnect、didDisconnect等三个事件。
主要通话流程:①发起通话 ②监听来电 ③接听或者挂断。
多人通话逻辑复杂一点,并且只能应用在群组或者讨论组,会用到didReceiveCall、didConnect、remoteUserDidJoin、remoteUserDidLeft、remoteUserDidInvite、didDisconnect等六个事件。通话实体getCallSession个人觉得可以不用。
主要通话流程:①在组里选择几个成员发起通话 ②成员收到来电 ③成员接听或者挂断。
④邀请几个成员加入当前通话 ⑤被邀请组员收到来电 ⑥被邀请组员接听或挂断来电
⑦通话组员监听是否有新成员加入或成员退出。
为了让页面代码逻辑更简单,设计了四个页面
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: 'remoteUserDidLeft'
- }, function (ret) {
- api.sendEvent({
- name: 'remoteUserDidLeft',
- extra: {uid: ret.userId}
- });
- });
- //接听事件
- rong.addCallSessionListener({
- target: 'didConnect'
- }, function (ret) {
- api.sendEvent({
- name: 'didConnect'
- });
- });
- //加入通话事件
- rong.addCallSessionListener({
- target: 'remoteUserDidJoin'
- }, function (ret) {
- api.sendEvent({
- name: 'remoteUserDidJoin',
- extra: { uid: ret.userId}
- });
- });
- //邀请加入通话的事件
- rong.addCallSessionListener({
- target: 'remoteUserDidInvite'
- }, function (ret) {
- api.sendEvent({
- name: 'remoteUserDidInvite',
- extra: {uid: ret.userId}
- });
- });
复制代码
单人通话
调用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需要显示对方用户个人信息、通话计时、接听、挂断等。
当用户挂断或者自己挂断就关闭相应页面,长时间不接听系统自动触发通话结束事件。
多人通话
调用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();
- });
复制代码
当自己接听电话时开始计时,当对端用户加入了通话时新增用户信息,当对端用户挂断时移除该用户,当通话结束时关闭当前页,长时间不接听系统自动触发通话结束事件。
三、测试地址
http://139.155.81.223:9000/ry.apk
测试账号 3000-3005 6个账号
|