完成上一篇的配置过后我们就可以进行代码操作了
废话不多说我们直接上代码!!!!
一、VoIP 通话插件
在「小程序管理后台」添加插件后,使用者还需要要在小程序的 app.json
中声明本插件。可以在主包引入,也可以在分包引入。
// 主包引入
{
"plugins": {
"wmpf-voip": {
"version": "latest", // latest 表示自动使用最新版本。也可使用具体版本,如 2.3.8
"provider": "wxf830863afde621eb"
}
}
}
// 分包引入
{
"subpackages": [
{
"root": "xxxx",
"pages": [],
"plugins": {
"wmpf-voip": {
"version": "latest", // latest 表示自动使用最新版本。也可使用具体版本,如 2.3.8
"provider": "wxf830863afde621eb"
}
}
}
]
}
完成声明后,可以在小程序中来确认是否引入成功
const wmpfVoip = requirePlugin('wmpf-voip').default
console.log(wmpfVoip) // 有结果即表示引入插件成功
二、用户授权设备
-
请求授权
用户授权前,需要从开发者的后台通过获取设备票据 接口拿到设备票据 snTicket。
拿到 snTicket 后,需要在小程序内调用 wx.requestDeviceVoIP 请用户进行授权
wx.requestDeviceVoIP({
sn, // 向用户发起通话的设备 sn(需要与设备注册时一致)
snTicket: res.data.snticket, // 获取的 snTicket
modelId: "*****", // 「设备接入」从微信公众平台获取的 model_id
deviceName: "视频通话", // 设备名称,用于授权时显示给用户
success(res) {
if (res.errMsg == "requestDeviceVoIP:ok") {
wx.showToast({
title: "设备授权成功",
});
that.getDeviceVoIPList();
}
},
fail(err) {
wx.showModal({
title: "授权失败",
content: "errCode:" + err.errCode + "; errMsg:" + err.errMsg,
complete: (res) => {
if (res.cancel) {
}
if (res.confirm) {
}
},
});
},
});
注意:
- 如果用户拒绝授权或在设置页中取消授权,再次调用
requestDeviceVoIP
不会出现授权弹框。开发者应引导用户在设置页中手动开启。 - 授权框中「设备名字」= 「deviceName」 + 「modelId 对应设备型号」。如「devcieName」为「iot」,modelId 对应设备型号是「校园电话」,最终名字为「iot 校园电话」
当授权完成后,并且设备端开发完成后,就可以进行呼叫手机微信了
三、设备呼叫手机微信
发起通话前,一般需要用户选择拨打给的用户和通话的类型(音频/视频)。
根据业务场景不同,发起通话前的流程(如选择联系人和房间类型)可以在小程序的另一个页面中或者安卓应用中进行。
小程序页面进入通话页面
发起通话时,设备端需要在之前的页面中调用插件的 initByCaller 接口,然后跳转到插件的发起通话页面。
wmpfVoip
.initByCaller({
caller: {
id: that.data.telsn, // 设备 SN
// 不支持传 name,显示的是授权时「deviceName」+「modelId 对应设备型号」
},
listener: {
id: that.data.telopenid, // 接听方 用户 openId
name: that.data.telname, // 接听方名字,仅显示用
},
roomType: roomType, // 房间类型。voice: 音频房间;video: 音视频房间
businessType: 1, // 1 为设备拨打手机微信;2 为手机微信拨打设备
voipToken: that.data.caller_ticket, // 使用设备认证 SDK 注册的设备传入 deviceToken,使用 WMPF RegisterMiniProgramDevice 接口注册的设备无需传入(插件 2.3.0 支持)
miniprogramState: "formal", // 指定接听方使用的小程序版本。formal/正式版(默认);trial/体验版;developer/开发版
})
.then(({ groupId, isSuccess }) => {
if (isSuccess) {
wx.setStorageSync("callerData", {
name: that.data.telname,
roomType: roomType,
});
// 跳转到插件的通话页面
const callPagePlugin =
"plugin-private://wxf830863afde621eb/pages/call-page-plugin/call-page-plugin";
// 如果小程序启动直接进入插件页面,则不要调用 wx.redirectTo
wx.redirectTo({
url: `${callPagePlugin}?isCaller=1&roomType=${roomType}&groupId=${groupId}`,
});
} else {
wx.showToast({
title: "拨打失败",
icon: "error",
});
}
})
.catch((e) => {
console.error("发起通话失败", e); // 参数错误的情况会通过异常抛出
});
四、 手机微信端接听通话
用户在手机端可以收到「响铃+振动」的强提醒通知,点击接听按钮后,会启动小程序并直接进入「VOIP 通话」插件页面接听通话。
完成通话后,微信客户端内会显示本次通话的信息与「关闭」按钮,用户点击「关闭」按钮后再跳转开发者调用setVoipEndPagePath设置的页面。开发者未设置时则直接关闭小程序。