APICloud平台使用融云模块实现音视频通话实践经验总结分享
Posted ffapi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了APICloud平台使用融云模块实现音视频通话实践经验总结分享相关的知识，希望对你有一定的参考价值。
需求概要：实现视频拨打、接听、挂断、视频界面大小窗口、点击小窗口实现大小窗口互换。
实现思路：一方拨打后，另一方要能收到相应事件，然后接听。接通后，渲染对方视频画面。那么己方视频画面什么时候渲染呢？对于呼叫方，可以在呼叫后开始渲染，也可以接通事件事件发生后再开始渲染。对于接通方可以在点击接听按钮后开始渲染，也可以在接通事件发生后开始渲染。
有了上述思路，在模块文档中查找相应api，编写代码，就可以验证我们的思路是否可以实现。如果遇到问题，再调整实现思路。
以下是融云模块文档链接：https://docs.apicloud.com/Client-API/Open-SDK/rongCloud2
简要介绍用到的主要API：
startCall 发起音视频通话
addCallReceiveListener 音视频来电事件监听
accept 接听来电
addCallSessionListener 音视频通话事件的监听（包含响铃、接通、挂断等多个事件监听）setVideoView 设置视频区域
resetVideoView 重设视频区域
removeVideoView 移除视频区域
hangup 挂断
下面讲解代码。
要调用音视频通话功能前应先调用 api.hasPermission 接口检查是否有麦克风、相机权限，如果没有，要先申请权限。
api.requestPermission(
list: [microphone, camera, storage, photos],
code: 1
)
融云初始化成功之后，可添加相应事件的监听。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 热点网络有限制或不稳定。
以上经验都是无数次排错总结出来的，看了至少能帮你节省两个工作日。
最后贴下完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=2.0,minimum-scale=1.0,user-scalable=1,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<script src="../script/sha1.js"></script>
<style>
body
margin-top: 90px;
button
APICloud平台的融云2.0集成