uni-app技术分享| 怎么用uni-app实现呼叫邀请
<h2 id="一前提准备">一、前提准备</h2><ol>
<li>创建 uniapp 项目</li>
<li>前往 uniapp 插件市场搜索anyRTC 实时消息 SDK 插件</li>
<li>因为呼叫邀请一般都配合音视频一起，所以建议大家使用使用云打包（本项目使用云打包）</li>
<li>项目导入后必须进入 <code>manifest.json</code> 的 App原生插件中添加云端插件</li>
<li><strong>重点：添加完插件后必须制作自定义基座在真机上使用自定义基座运行</strong></li>
</ol>
<p><em>可参考类似的示例步骤 anyRTC 音视频 uni 插件集成步骤 </em></p>
<h2 id="二开发">二、开发</h2>
<h3 id="1-开发思路">1. 开发思路</h3>
<ul>
<li>
<p>呼叫邀请需要全局监听，可自行封装成 js 哪里需要哪里调。 (<em>因为要全局使用，实时消息以及呼叫邀请不要使用<code>原生子窗体</code></em>)</p>
</li>
<li>
<p>呼叫邀请仅初始化一次，不进行销毁。可把实例初始化放到 <code>app.vue</code>的 <code>onLaunch</code>的方法中</p>
</li>
</ul>
<h3 id="2开发">2.开发</h3>
<ul>
<li>
<p>在根目录下创建 <code>until/rtm.js</code> 、<code>until/config.js</code>等文件</p>
</li>
<li>
<p>config 文件中设置 anyRTC 所需的基本信息</p>
<pre><code class="language-js">...
RTM_APPID: "", // RTM 应用ID
uid: "123", // 本地用户标识（自定义，符合 anyRTC 需求即可）
</code></pre>
</li>
<li>
<p><strong>封装 rtm.js。</strong></p>
<ul>
<li>
<p>引入、使用插件</p>
<pre><code class="language-js">//引入 config 配置
import Config from "./config.js";
Config.RTM_APPID
// rtm 实时消息插件引入
const rtmModule = uni.requireNativePlugin('AR-RtmModule');
</code></pre>
</li>
<li>
<p>封装呼叫邀请</p>
<pre><code class="language-js">// 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 取消呼叫失败");
})
}
</code></pre>
</li>
</ul>
</li>
<li>
<p>全局调用（将封装的 rtm 方法挂载 app 上</p>
<pre><code class="language-js">import RTM from './rtm.js'
Vue.prototype.$RTM = RTM
</code></pre>
</li>
<li>
<p>rtm 初始化</p>
<p>在 <code>App.vue</code> 中加入</p>
<pre><code class="language-js">onLaunch: function() {
console.log('App Launch 初始化完成时触发');
this.$RTM.init();
},
</code></pre>
<p>因为 RTM 需要全局使用，跟随程序。因此无释放 RTM 实例，调试过程中出现<strong>Error: Failed to receiveTasks, instance (1) is not available.</strong>等报错属于正常，因为调试时，多次进行 RTM 初始化操作</p>
</li>
<li>
<p>呼叫邀请相关正常调用</p>
</li>
<li>
<p><strong>注意</strong></p>
<p>当使用相关方法虽然调用，但插件的方法没有调用时：</p>
<ul>
<li>请查看当前方法使用的 <code>rtmModule.相关方法</code>是否存在</li>
<li>将 <code>rtmModule</code> 对象传入调用查看是否正常</li>
</ul>
</li>
</ul><br><br>
来源：https://www.cnblogs.com/anyrtc/p/15127576.html
頁:
[1]