官网版本已发布
npm 地址 https://www.npmjs.com/package/@tencentcloud/call-uikit-wechat
接入文档地址 https://cloud.tencent.com/developer/article/2206425
以下不必看了
实现原理:
通话界面为单独的页面,里面使用 TUICallKit,收到邀请后,跳转到通话页面
- 通话界面为一个单独的页面,里面引入 TUICallKit。在 app.json 中配置通话界面页面。
- 在 app.js 中监听 TSignaling 事件。
- 收到邀请信息则跳转到通话界面,通话结束后,返回到原来的页面。
Step1,app.js添加全局监听
新建 app-tuicallkit-delegate.js
import { TUICallEngine } from "./components/TUICallKit/TUICallEngine/tuicall-engine-wx";
var AppTUICallKitDelegate = {
TYPE_INVITE: "invite",
TYPE_CALL: "call",
init({tim,sdkAppId,userId,userSig}) {
//创建TUICallEngine
wx.$TUICallEngine = TUICallEngine.createInstance({
tim: tim,
sdkAppID: sdkAppId,
});
//添加INVITED监听
this.addTUICallEngineEvent();
//初始化TUICallEngine
wx.$TUICallEngine.init({
userID: userId,
userSig: userSig,
})
},
addTUICallEngineEvent() {
wx.$TUICallEngine.on('INVITED', this.handleNewInvitationReceived, this);
},
removeTUICallEngineEvent() {
wx.$TUICallEngine.off('INVITED', this.handleNewInvitationReceived, this);
},
/**
* 监听新的邀请
*/
handleNewInvitationReceived(event) {
this.removeTUICallEngineEvent();
this.navigateTo(this.TYPE_INVITE, event);
},
/**
* 监听主动拨打
*/
handleNewCall(event) {
this.removeTUICallEngineEvent();
this.navigateTo(this.TYPE_CALL, event);
},
navigateTo(type, event) {
wx.navigateTo({
url: '/pages/calling/calling?type=' + type + '&event=' + JSON.stringify(event),
})
}
}
export default AppTUICallKitDelegate
app.js
...省略
import AppTuicallkitDelegate from './app-tuicallkit-delegate';
App({
onLaunch: function () {
...省略
AppTuicallkitDelegate.init({
tim: tim,
userId: this.globalData.config.userID,
sdkAppId: this.globalData.config.SDKAPPID,
userSig: userSig,
});
},
...省略
});
Step2,新增一个独立页面calling,并在app.json注册
calling.js
import AppTuicallkitDelegate from '../../app-tuicallkit-delegate';
// pages/calling/calling.js
Page({
/**
* 页面的初始数据
*/
data: {
config: {
userID: '',
userSig: '',
type: 1,
tim: wx.$TUIKit,
},
number: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(option) {
this.init(option)
},
init(option) {
const {
config
} = this.data;
config.userID = wx.$chat_userID;
config.userSig = wx.$chat_userSig;
config.tim = wx.$TUIKit;
this.setData({
config,
}, async () => {
//初始化TUICallKit
this.TUICallKit = this.selectComponent('#TUICallKit');
this.TUICallKit.init({type:option.type,event:JSON.parse(option.event)});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
if (this.TUICallKit) {
this.TUICallKit.destroyed();
}
setTimeout(() => {
AppTuicallkitDelegate.addTUICallEngineEvent();
}, 1);
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
/**
* 通话结束时,关闭此页面
*/
callEnd() {
wx.navigateBack();
},
})
calling.json
{
"usingComponents": {
"TUICallKit": "/components/TUICallKit/TUICallKit/TUICallKit"
}
}
calling.wxml
<!--pages/calling/calling.wxml-->
<TUICallKit class="calling" id="TUICallKit" config="{{config}}" bind:callEnd="callEnd" bind:sendMessage="sendMessage"></TUICallKit>
app.json
{
"pages": [
"pages/calling/calling"
]
...其他省略
}
Step3,修改部分TUICallKit源码
TUICallKit.js 主要是删除和TUICallEngine有关的内容,以及对reset函数的修改。
import AppTUICallKitDelegate from '../../../app-tuicallkit-delegate.js';
..省略
Component({
..省略
methods: {
..省略
// 数据重置
reset(init) {
..省略
if(!init){
this.triggerEvent("callEnd");
}
},
// 初始化TRTCCalling
async init({type,event}) {
this._addTSignalingEvent();
// const res = await wx.$TUICallEngine.init({
// userID: this.data.config.userID,
// userSig: this.data.config.userSig,
// });
if(type == AppTUICallKitDelegate.TYPE_INVITE){
this.handleNewInvitationReceived(event)
}else if(type==AppTUICallKitDelegate.TYPE_CALL){
if (event.detail.groupID) {
this.groupCall(event.detail);
} else {
this.call(event.detail);
}
}
return 0;
},
// 销毁 TUICallEngine
destroyed() {
this._removeTSignalingEvent();
// TUICallEngine.destroyInstance();
},
},
/**
* 生命周期方法
*/
lifetimes: {
..省略
ready() {
// wx.$TUICallEngine = TUICallEngine.createInstance({
// tim: wx.$TUIKit,
// sdkAppID: wx.$chat_SDKAppID,
// });
this.reset(true);
},
..省略
},
..省略
});
tuicall-engine-wx.js 删除如下代码,注意最后一个逗号。
(原因是因为在init后添加监听会报错,而且报的错是需要after init再添加监听,但其实需要before init添加监听,囧,这部分希望研发大佬看一下报的错对不,暂时不清楚删除会有什么影响)
Tt.getInstance().getAlert().checkSync(new lt({api:"on",attributes:{eventCode:t,handler:e,context:i},initReady:this._initReady})),
Step4 主动拨打
import { TUICallEngine } from "./components/TUICallKit/TUICallEngine/tuicall-engine-wx";
AppTuicallkitDelegate.handleNewCall(event);
Demo:https://github.com/601367322/TUICallKit-miniprogram-demo~~