写点什么

uni-app 技术分享| 怎么用 uni-app 实现呼叫邀请

发布于: 3 小时前

一、前提准备

  1. 创建 uniapp 项目

  2. 前往 uniapp 插件市场搜索 anyRTC 实时消息 SDK 插件

  3. 因为呼叫邀请一般都配合音视频一起,所以建议大家使用使用云打包(本项目使用云打包)

  4. 项目导入后必须进入 manifest.json 的 App 原生插件中添加云端插件

  5. 重点:添加完插件后必须制作自定义基座在真机上使用自定义基座运行


可参考类似的示例步骤 anyRTC 音视频 uni 插件集成步骤

二、开发

1. 开发思路

  • 呼叫邀请需要全局监听,可自行封装成 js 哪里需要哪里调。 (因为要全局使用,实时消息以及呼叫邀请不要使用原生子窗体)

  • 呼叫邀请仅初始化一次,不进行销毁。可把实例初始化放到 app.vueonLaunch的方法中

2.开发

  • 在根目录下创建 until/rtm.jsuntil/config.js等文件

  • config 文件中设置 anyRTC 所需的基本信息


  ...  RTM_APPID: "", // RTM 应用ID  uid: "123", // 本地用户标识(自定义,符合 anyRTC 需求即可)
复制代码


  • 封装 rtm.js。

  • 引入、使用插件


    //引入 config 配置    import Config from "./config.js";    Config.RTM_APPID    // rtm 实时消息插件引入    const rtmModule = uni.requireNativePlugin('AR-RtmModule');
复制代码


  • 封装呼叫邀请


    // rtm 实时消息封装    const RTM = {      // 初始化      init: async () => {        // 初始化回调        await rtmModule.setCallBack(res => {          RTM.callBack(res)        })        // 初始化实例        await rtmModule.createInstance({          "appId": Config.RTM_APPID        }, res => {          console.log(res);        })        // 登录 RTM 系统        await rtmModule.login({          "token": "",          "userId": Config.uid        }, (res) => {                  })        // 使用 RTM 呼叫邀请(设置邀请呼叫实例的监听器)        await rtmModule.setCallEventListener()      },      // 回调      callBack: (res) => {        switch (res.rtmEvent) {          // SDK 与 RTM 系统的连接状态发生改变回调。          case 'onConnectionStateChanged':            console.log(res.state, res.reason)            break;            // 收到点对点消息回调          case 'onPeerMessageReceived':            console.log(res.text, res.peerId)            break;            // 返回给主叫:被叫已接受呼叫邀请          case 'onLocalInvitationAccepted':            console.log(res)            break;            // 返回给主叫:呼叫邀请已被取消          case 'onLocalInvitationCanceled':            console.log(res)            break;            // 返回给主叫:呼叫邀请进程失败          case 'onLocalInvitationFailure':            console.log(res)            break;            // 返回给主叫:被叫已收到呼叫邀请          case 'onLocalInvitationReceivedByPeer':            console.log(res)            break;            // 返回给主叫:被叫已拒绝呼叫邀请          case 'onLocalInvitationRefused':            console.log(res)            break;            // 返回给被叫:接受呼叫邀请成功          case 'onRemoteInvitationAccepted':            console.log(res)            break;            // 返回给被叫:主叫已取消呼叫邀请          case 'onRemoteInvitationCanceled':            console.log(res)            break;            // 返回给被叫:来自主叫的呼叫邀请进程失败          case 'onRemoteInvitationFailure':            console.log(res)            break;            // 返回给被叫:收到一个呼叫邀请          case 'onRemoteInvitationReceived':            console.log(res)            break;            // 返回给被叫:拒绝呼叫邀请成功          case 'onRemoteInvitationRefused':            console.log(res)            break;          default:            break;        }        // console.log(res);      },      // 查询所有用户是否在线      queryPeersOnlineStatus: async function(peerIdLits) {        return await new Promise((resolve, reject) => {          rtmModule.queryPeersOnlineStatus({        "peerIds": peerIdLits      }, (res) => {        resolve(res);      })      })      },    // 接受来自对方的呼叫邀请        acceptRemoteInvitation: function(calleeId, info = "") {        console.log('接受来自对方的呼叫邀请');        rtmModule.acceptRemoteInvitation({      "calleeId": calleeId, // 供被叫获取主叫的用户 ID      "response": info ? JSON.stringify(info) : "" // 邀请响应        }, (res) => {      console.log(res.code === 0 ? '' :        "调用 acceptRemoteInvitation 接受来自对方的呼叫邀请失败");        })      },      // 拒绝来自对方的呼叫邀请      refuseRemoteInvitation: function(userId, info = "") {          rtmModule.refuseRemoteInvitation({      "calleeId": userId,      "response": info ? JSON.stringify(info) : "" // 邀请内容        }, (res) => {      console.log(res.code === 0 ? "" :        "调用 cancelLocalInvitation 取消呼叫失败");        });      },      // 取消给对方的呼叫邀请      cancelLocalInvitation: function(calleeId, info = "") {        rtmModule.cancelLocalInvitation({      "calleeId": calleeId, // 被呼叫者的 user ID      "content": info ? JSON.stringify(info) : "" // 邀请内容        }, (res) => {      console.log(res.code === 0 ? "" :        "调用 cancelLocalInvitation 取消呼叫失败");        })      }
复制代码


  • 全局调用(将封装的 rtm 方法挂载 app 上


  ~~~
import RTM from './rtm.js' Vue.prototype.$RTM = RTM
复制代码


  • rtm 初始化

  • App.vue 中加入


  onLaunch: function() {        console.log('App Launch 初始化完成时触发');         this.$RTM.init();  },
复制代码


因为 RTM 需要全局使用,跟随程序。因此无释放 RTM 实例,调试过程中出现 Error: [JS Framework] Failed to receiveTasks, instance (1) is not available. 等报错属于正常,因为调试时,多次进行 RTM 初始化操作


  • 呼叫邀请相关正常调用

  • 注意

  • 当使用相关方法虽然调用,但插件的方法没有调用时:

  • 请查看当前方法使用的 rtmModule.相关方法是否存在

  • rtmModule 对象传入调用查看是否正常

发布于: 3 小时前阅读数: 4
用户头像

实时交互,万物互联! 2020.08.10 加入

实时交互,万物互联,全球实时互动云服务商领跑者!

评论

发布
暂无评论
uni-app技术分享| 怎么用uni-app实现呼叫邀请