有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

uniapp打电话视频呼叫arcall uni-app(前端技术实现)

uni-app 炮渣日记 4周前 (11-09) 27次浏览 已收录 0个评论 扫描二维码

介绍

基本

uniapp_arcall 是通过 uniapp 实现的语音通话、视频通话以及相关配套的呼叫邀请。 解决向指定用户发起呼叫通知,对方接受后进行通话的场景需求。

呼叫邀请基本流程

发起呼叫收到被叫接听收到被叫拒绝通知主叫接听通知主叫拒绝主叫被叫收到呼叫主叫执行 RTC相关逻辑被叫接听被叫拒绝被叫执行 RTC60s 无操作邀请自动失败

通话基本流程

采集音视频本地采集音视频通过回调获取远端音视频初始化 RTC 实例加入房间发布并渲染音视频渲染远端音

呼叫邀请相关逻辑

引入呼叫邀请所需插件

// rtm 实时消息引入
const rtmModule = uni.requireNativePlugin('AR-RtmModule');

呼叫邀请初始化

uniapp_arcall的是项目启动就登陆 RTM,因此写在 onLaunch中,调试时会发生以下错误

Error: [JS Framework] Failed to receiveTasks, instance (1) is not available.

原因是多次将 RTM 实例初始化,会影响到 RTM 相关的使用请将程序杀死后在进行调试

// 初始化回调
await rtmModule.setCallBack(res => {
            switch (res.rtmEvent) {
            // SDK 与 RTM 系统的连接状态发生改变回调。
            case 'onConnectionStateChanged':
                break;
                // 收到点对点消息回调
            case 'onPeerMessageReceived':
            
                break;
                // 被订阅用户在线状态改变
            case 'onPeersOnlineStatusChanged':
                
                break;
                // 返回给主叫:被叫已接受呼叫邀请
            case 'onLocalInvitationAccepted':
                
                break;
                // 返回给主叫:呼叫邀请已被取消
            case 'onLocalInvitationCanceled':
                
                break;
                // 返回给主叫:呼叫邀请进程失败
            case 'onLocalInvitationFailure':
                
                break;
                // 返回给主叫:被叫已收到呼叫邀请
            case 'onLocalInvitationReceivedByPeer':
                
                break;
                // 返回给主叫:被叫已拒绝呼叫邀请
            case 'onLocalInvitationRefused':
            
                break;
                // 返回给被叫:接受呼叫邀请成功
            case 'onRemoteInvitationAccepted':
            
                break;
                // 返回给被叫:主叫已取消呼叫邀请
            case 'onRemoteInvitationCanceled':
                
                break;
                // 返回给被叫:来自主叫的呼叫邀请进程失败
            case 'onRemoteInvitationFailure':
                
                break;
                // 返回给被叫:收到一个呼叫邀请
            case 'onRemoteInvitationReceived':
            
                break;
                // 返回给被叫:拒绝呼叫邀请成功
            case 'onRemoteInvitationRefused':
                
                break;
            default:
                break;
        }
    })
// 初始化实例
await rtmModule.createInstance({
        "appId": "你的 appid"
    }, res => {
        console.log(res);
    })
// 登录 RTM 系统
await rtmModule.login({
    "token": "",
    "userId": "本地用户标识"
}, (res) => {
    console.log("登录 RTM 系统", res);
})
// // 使用 RTM 呼叫邀请(设置邀请呼叫实例的监听器)
await rtmModule.setCallEventListener();

主叫

  • 查询呼叫用户是否在线
rtmModule.queryPeersOnlineStatus({
 "peerIds": ["呼叫用户"]
 }, (res) => {
 console.log(res);
 })
  • 呼叫用户在线时发起呼叫并订阅发起呼叫 把本地创建的频道房间发送过去
rtmModule.sendLocalInvitation({
 "calleeId": calleeId, // 被呼叫者的 user ID
 "content": JSON.stringify(info) // 邀请内容
 }, (res) => {
 resolve(res.code);
 })
  • 订阅(获取对方在线状态)

当结束通话或结束邀请时记得取消订阅

rtmModule.subscribePeersOnlineStatus({
 "peerIds": ["对方 uid"]
 }, (res) => {
 //smething
 console.log("订阅指定单个或多个用户的在线状态", res);
 })
  • 主叫取消呼叫
  rtmModule.cancelLocalInvitation({
            "calleeId": calleeId, // 被呼叫者的 user ID
            "content": JSON.stringify(info) // 邀请内容
        }, (res) => {
            console.log("取消给对方的呼叫邀请", res);
        });

被叫

通过回调
onRemoteInvitationReceived 收到主叫

  • 拒绝呼叫
rtmModule.refuseRemoteInvitation({
            "calleeId": userId,
            "response": JSON.stringify(info) /邀请内容
        }, (res) => {
        });
  • 接受呼叫
rtmModule.acceptRemoteInvitation({
            "calleeId": calleeId, // 供被叫获取主叫的用户 ID
            "response": info ? JSON.stringify(info) : "" // 邀请响应
        }, (res) => {
        });
// 订阅对方在线状态
...

相关提示

相关的提示、逻辑都可通过回调来进行操作

通话相关逻辑

视频组件必须实在 nvue 页面

<AR-CanvasView ref="location" style="flex: 1;" />

不管是主叫还是被叫,收到接听的回调后就可以进入 RTC 的相关逻辑

  • 引入插件
const rtcModule = uni.requireNativePlugin('AR-RtcModule');
  • 初始化
// 初始化回调 
await rtcModule.setCallBack(res => {
        switch (res.engineEvent) {
            case "onConnectionLost":
                console.log("onConnectionLost", res);
                break;
                // 网络连接状态已改变回调
            case "onConnectionStateChanged":
                console.log("网络连接状态已改变回调", res);
                break;
                // 发生警告回调
            case "onWarning":
                
                break;
                // 发生错误回调
            case "onError":
                
                break;
                // 加入频道成功回调
            case "onJoinChannelSuccess":
                // 本地渲染
            
                break;
                // 远端用户加入当前频道回调
            case "onUserJoined":
            
                break;
                // 远端用户离开当前频道回调
            case "onUserOffline":
                console.log("远端用户离开当前频道回调", res);
            
                break;
                // 网络连接状态已改变回调
            case "onConnectionStateChanged":
            
                break;
                // 已显示远端视频首帧回调
            case "onFirstRemoteVideoFrame":
                break;
            case "onFirstRemoteVideoDecoded":
            
                break;
                // 远端用户视频状态发生已变化回调(当频道内的用户超过 17 时,该回调可能不准确)
            case "onRemoteVideoStateChanged":
            
                break;
                //  // 本地网络类型发生改变回调
                // case "onNetworkTypeChanged":
                //  break;
                //  // 网络连接中断
                // case "onConnectionLost":
                //  break;

                //  // 远端音频状态发生改变回调
                // case "onRemoteAudioStateChanged":
                //  break;
                //  // 本地音频状态发生改变回调
                // case "onLocalAudioStateChanged":
                //  break;
                //  // 本地视频状态发生改变回调
                // case "onLocalVideoStateChanged":
                //  break;
                //  // 重新加入频道回调
                // case "onRejoinChannelSuccess":
                //  break;
                //  // 离开频道回调
                // case "onLeaveChannel":
                //  break;
                // 已发送本地音频首帧回调
                // case "onFirstLocalAudioFrame":
                //  break;
                //  // 已显示本地视频首帧回调
                // case "onFirstLocalVideoFrame":
                //  break;
                //  // Token 服务即将过期回调
                // case "onTokenPrivilegeWillExpire":
                //  break;
                //  // Token 过期回调
                // case "onRequestToken":
                //  break;
                //  // 用户角色已切换回调(直播场景下)
                // case "onClientRoleChanged":
                //  break;
                //  // 本地或远端视频大小或旋转信息发生改变回调
                // case "onVideoSizeChanged":
                //  break;
                //  // 通话中远端音频流的统计信息回调
                // case "onRemoteAudioStats":
                //  break;
                //  // 当前通话统计回调。 该回调在通话中每两秒触发一次
                // case "onRtcStats":
                //  break;
                //  // 通话中每个用户的网络上下行 last mile 质量报告回调
                // case "onNetworkQuality":
                //  break;
                //  // 通话中本地视频流的统计信息回调
                // case "onLocalVideoStats":
                //  break;
                //  // 通话中本地音频流的统计信息回调
                // case "onLocalAudioStats":
                //  break;
                //  // 通话中远端视频流的统计信息回调
                // case "onRemoteVideoStats":
                //  break;
        }
        
});
// 初始化实例
await rtcModule.create({
    "appId": '你的 appid'
}, res => {
    console.log('初始化实例 rtc', res);
});
// 开启智能降噪
await rtcModule.setParameters({
            Cmd: 'SetAudioAiNoise',
            Enable: 1
        }, (res) => {
            console.log('私人定制', res);
        });
  • 采集音视频 如果是语音通话可以不执行下列代码
// 设置视频编码属性
await rtcModule.setVideoEncoderConfiguration({},res) => {
console.log('RTC 设置视频编码属性 setVideoEncoderConfiguration 方法调用', res.code ===0 ? '成功' :'失败:' + res);
});
// 启用视频
await rtcModule.enableVideo((res) => {
console.log('RTC 启用视频 enableVideo 方法调用', res.code === 0 ? '成功' : '失败:' +res);
});
  • 加入房间
rtcModule.joinChannel({
            "token": '',
            "channelId": 本地创建的频道/通过呼叫邀请传递过来的频道,
            "uid": 本地的userid,
        }, (res) => {
            console.log('RTC joinChannel 方法调用', res.code === 0 ? '成功' : '失败:' + res);
        });
  • 本地视频渲染
<AR-CanvasView ref="location" style="flex: 1;" />
  • 获取容器
// 请确保可以获取到容器
Store.location = this.$refs.location;
console.log(Store.location);
// 打印后 类似这种
{
 "ref": "68",
 "type": "AR-CanvasView",
 "attr": {
 "@styleScope": "data-v-39c12bd0"
 },
 "style": {
 "flex": "1"
 }
}
// 渲染视频
 await Store.location.setupLocalVideo({
 "renderMode": 1,
 "channelId": 加入的频道房间
 "uid": 本地的userid
 "mirrorMode": 0
 }, (res) => {
 console.log('渲染视频', res);
 });
 // 本地预览
 await Store.location.startPreview((res) => {
 console.log('本地预览', res);
 })
  • 远端视频渲染

通过回调 onFirstRemoteVideoDecoded 获取远端用户发布视频

Store.remote 与 Store.location 类似

await Store.remote.setupRemoteVideo({
 "renderMode": 1,
 "channelId": 加入的频道
 "uid": res.uid
 "mirrorMode": 0
 }, (res) => {
 console.log('渲染远端视频', res);
 })
 // 本地预览
 await Store.remote.startPreview((res) => {
 console.log('远端本地预览', res);
 })
  • 挂断
 // 销毁实例
 rtcModule.destroyRtc((res) => {
 console.log("销毁实例", res);
 });

总结

当前逻辑基本实现呼叫邀请+通话

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址