uni-app技術分享| 怎么用uni-app實現呼叫邀請

一、前提准備

1. 創建 uniapp 項目
2. 前往 uniapp 插件市場搜索 anyRTC 實時消息 SDK 插件
3. 因為呼叫邀請一般都配合音視頻一起，所以建議大家使用使用雲打包（本項目使用雲打包）
4. 項目導入后必須進入 manifest.json 的 App原生插件中添加雲端插件
5. 重點：添加完插件后必須制作自定義基座在真機上使用自定義基座運行

可參考類似的示例步驟 anyRTC 音視頻 uni 插件集成步驟

二、開發

1. 開發思路

• 呼叫邀請需要全局監聽，可自行封裝成 js 哪里需要哪里調。 (因為要全局使用，實時消息以及呼叫邀請不要使用原生子窗體)

• 呼叫邀請僅初始化一次，不進行銷毀。可把實例初始化放到 app.vue的 onLaunch的方法中

2.開發

• 在根目錄下創建 until/rtm.js 、until/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 對象傳入調用查看是否正常