愿君学长松,慎勿作桃李。这篇文章主要讲述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)
)
);
;
实现效果如下:
文章图片
< style>
body
margin-top: 90px;
button
推荐阅读
- #yyds干货盘点# 要修改值和原值相等,MySQL还会再执行update吗()
- linux grep 如何搜索出包含某个字符串的所有文件 find
- Python Numpy库教程(超详细)
- linux c之出现warning: implicit declaration of function ‘exit’ [-Wimplicit-function-declaration]这个问题
- RT-Thread快速入门-线程管理(下)
- linuxc之通过管道实现兄弟间进程通信()
- 90%的转型企业需要“零信任”
- JavaScript实现猫吃鱼小游戏
- 7.利用MySQL Router构建读写分离MGR集群 | 深入浅出MGR