Bootstrap

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

一、前提准备

可参考类似的示例步骤

二、开发

1. 开发思路

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

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

2.开发

  • 在根目录下创建 、等文件

  • 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 初始化

  • 在 中加入

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

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

  • 呼叫邀请相关正常调用

  • 注意

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

  • 请查看当前方法使用的 是否存在

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