APICloud平台使用融云模块实现音视频通话实践经验总结分享 APICloud平台使用融云模块实现音

需求概要：实现视频拨打、接听、挂断、视频界面大小窗口、点击小窗口实现大小窗口互换。
实现思路：一方拨打后，另一方要能收到相应事件，然后接听。接通后，渲染对方视频画面。那么己方视频画面什么时候渲染呢？对于呼叫方，可以在呼叫后开始渲染，也可以接通事件事件发生后再开始渲染。对于接通方可以在点击接听按钮后开始渲染，也可以在接通事件发生后开始渲染。
有了上述思路，在模块文档中查找相应api，编写代码，就可以验证我们的思路是否可以实现。如果遇到问题，再调整实现思路。
以下是融云模块文档链接：https://docs.apicloud.com/Cli...
简要介绍用到的主要API：
**startCall发起音视频通话
addCallReceiveListener音视频来电事件监听
accept 接听来电
addCallSessionListener 音视频通话事件的监听（包含响铃、接通、挂断等多个事件监听）setVideoView设置视频区域
resetVideoView重设视频区域
removeVideoView移除视频区域
hangup 挂断**
下面讲解代码。
要调用音视频通话功能前应先调用 api.hasPermission 接口检查是否有麦克风、相机权限，如果没有，要先申请权限。

api.requestPermission({ list: ['microphone', 'camera', 'storage', 'photos'], code: 1 })

【APICloud平台使用融云模块实现音视频通话实践经验总结分享】融云初始化成功之后，可添加相应事件的监听。didReceiveCall 接到来电事件后，弹出接听页面。接听后，会执行到 didConnect 事件, 此时可设置本地窗口 setVideoView ；稍后会执行到remoteUserDidJoin （对端用户加入通话事件），此时可以通过 setVideoView 设置对端用户窗口。通过videoViewBringToFront 接口将本地小窗口调整到最前方。

apiready = function () {rong = api.require('rongCloud2'); rong.init({ huaweiPush: false }, function (ret, err) { if (ret.status == 'error') { api.toast({ msg: err.code }); } else { console.log('初始化成功'); rong.setConnectionStatusListener(function (ret, err) { console.log("连接状态监听:" + ret.result.connectionStatus); }); //收到来电事件监听 rong.addCallReceiveListener({ target: 'didReceiveCall' }, function (ret) { console.log('didReceiveCall:' + JSON.stringify(ret)) callId = ret.callSession.callId; api.toast({ msg: '来电请接听' })fnopenbtnframe(); //打开接听、挂断按钮所在的frame }); // 通话连接成功监听rong.addCallSessionListener({ target: 'didConnect' }, function (ret) { console.log('didConnect:' + JSON.stringify(ret))var myname = api.getPrefs({ sync: true, key: 'myname' }); //打开本地窗口 fnsetVideoView(api.winWidth - 200, 100, 160, 200, myname); //将本地窗口显示到最前方 setTimeout(function () { rong.videoViewBringToFront({ userId: myname }) }, 1000) })//通话已结束的事件 rong.addCallSessionListener({ target: 'didDisconnect' }, function (ret) { console.log('didDisconnect:' + JSON.stringify(ret)) })//对端用户加入了通话的事件 rong.addCallSessionListener({ target: 'remoteUserDidJoin' }, function (ret) { console.log("对端用户加入了通话的事件:" + JSON.stringify(ret)); var uid = ret.userId; //设置远端窗口 fnsetVideoView(0, 0, api.winWidth, api.winHeight, uid); }); //监听视频区域点击事件，实现大小窗口切换 rong.addVideoViewListener(function (ret) {//判断点击的是否是初始小窗口 if (ret.userId == myname && meissmall) {fnresetVideoView(0, 0, api.winWidth, api.winHeight, ret.userId); fnresetVideoView(api.winWidth - 200, 100, 160, 200, hename); meissmall = false; setTimeout(function () { rong.videoViewBringToFront({ userId: hename }) }, 1000)setTimeout(function () { fnopenbtnframe() }, 1200) }if (ret.userId == hename && !meissmall) {fnresetVideoView(0, 0, api.winWidth, api.winHeight, ret.userId); fnresetVideoView(api.winWidth - 200, 100, 160, 200, myname); meissmall = true; setTimeout(function () { rong.videoViewBringToFront({ userId: myname }) }, 1000)setTimeout(function () { fnopenbtnframe() }, 1200)}})} }); };

实现效果如下：

文章图片

其他经验总结：
返回错误码34001，重启loader可解决，可能换账号登录，wifi 同步重启loader 有缓存用户信息导致。
接听不到来电事件，可尝试用4g 网络测试。有些公司防火墙，或者电脑共享的wifi 热点网络有限制或不稳定。
以上经验都是无数次排错总结出来的，看了至少能帮你节省两个工作日。
最后贴下完整代码：

Hello APP - 锐客网 body { margin-top: 90px; }button { padding: 10px }**用户已登录 1. 测试步骤 2. 准备两部手机A和B 3. A手机在【输入用户名】【输入好友用户名】处分别输入a, b；然后点登录 4. B手机在【输入用户名】【输入好友用户名】处分别输入b, a；然后点登录 5. 一部手机点fnstartCall 6. 另一部手机在弹出‘来电请接听提示后’，会弹出底部按钮frame，点击【接听】 7. 接通后，弹出大小视频窗口。点击小窗口可实现切换。