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

愿君学长松,慎勿作桃李。这篇文章主要讲述APICloud平台使用融云模块实现音视频通话实践经验总结分享相关的知识,希望能为你提供帮助。
需求概要:实现视频拨打、接听、挂断、视频界面大小窗口、点击小窗口实现大小窗口互换。
【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)



)



);
;

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

文章图片
< style>
body
margin-top: 90px;



button

    推荐阅读