基于微信官方提供的wx.setEnable1v1Chat和wx.join1v1Chat 实现的小程序音视频通话功能
小程序api wx.setEnable1v1Chat和wx.join1v1Chat实现的音视频通话功能
1、申请开通功能接口
目前暂只针对国内主体如下类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发」-「开发管理」-「接口设置」中自助开通该接口权限。
支持的服务类目:
在微信公众股平台开通服务:
2、购买服务
这个音视频通话的功能微信官方是要付费的,有一个基础款(0元,1000次/月),这个按次收费的作为调研的试用版,上线按需购买,购买地址 微信服务市场
购买成功之后,授权指定的小程序就可以了。
3、功能分析
音视频对话的功能有多种,双人的和多人的,在我们的项目中,主要实现双人通话功能,实现双人通话的基础要有两个唯一的标识,这种标识微信提供了一个openid作为小程序里面的唯一标识,有这两个标识就可以实现音视频对话的对接。
要在实际应用中可以拿到对方的openid,可以实现的思路就是加好友,用户登录了之后会有一个固定的id,把这个id和openid绑定,加上好友的双方就可以拿到对方的openid,作为基础功能调研,我在小程序界面做了一个openid的获取和对方openid的输入,得到这两个openid就可以播视频电话了。
4、功能实现
前端在没有登录的时候是不能开启视频通话的,做一个按钮登录获取发起方的openid,使用wx.login获得openid;
代码如下:
wx.login({
success(res) {
console.log(res)
if (res.code) {
console.log(res, 'res')
let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${that.data.appId}&secret=${that.data.secret}&js_code=${res.code}&grant_type=authorization_code`
console.log(url)
wx.request({
url: url,
success: (res) => {
console.log(res);
that.setData({
openId: res.data.openid
})
console.log('openId', res.data.openid);
}
})
}
}
})
通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。
请求地址
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
注意:微信官方是禁止代码里面有明文的appid和secret出现的,我这儿做的是体验版,就写在代码里面了,上线版本应该从后端获取或者以其他方式获取。
获取到openid后复制发给另一个用户,当有两个openid(一个是自己的【呼叫方】,另一个是被呼叫方的【接听方】)的时候,就可以开启视频通话了。
wx.join1v1Chat的listener(接收方)和caller(呼叫方)的openid是全小写,不要用驼峰命名。
5、真机调试
视频通话在开发工具上调用会报20001的错,当两个用户都登录了小程序之后,手机上开启视频成功。
注意:接收方和呼叫方都必须授权麦克风和摄像头;
被呼叫方应该登录小程序,并且小程序处于运行中;
最后贴上完整代码:
wxml:
<view class="video-page">
<!--
t-divider和t-input是引入tdesign框架的 在json里面导入就可以
"usingComponents": {
"t-divider": "tdesign-miniprogram/divider/divider",
"t-input": "tdesign-miniprogram/input/input"
}
-->
<t-divider dashed content="请输入对方的openId" align="left" />
<t-input placeholder="openId" model:value="{{otherOpenId}}"/>
<view class="video-div" wx:if="{{openId == null}}" catch:tap="getLogin">立即登录</view>
<view class="video-div" wx:else catch:tap="openVideo"> 开启通话 </view>
<t-divider dashed content="我自己的openId" wx:if="{{openId != null}}" align="left" />
<view class="video-div my-openId" wx:if="{{openId != null}}">
<text>{{openId}}</text>
<button mini catch:tap="copyText">复制</button>
</view>
</view>
js:
Component({
data: {
appId: '********', // 填自己小程序的appid
secret: '*******', // 小程序秘钥
otherOpenId: null, // 接听方openid
openId: null, // 这里保存自己的openId
},
methods: {
copyText(e) {
let key = this.data.openId;
wx.setClipboardData({ //设置系统剪贴板的内容
data: key,
success(res) {
console.log(res, key);
wx.getClipboardData({ // 获取系统剪贴板的内容
success(res) {
wx.showToast({
title: '复制成功',
})
}
})
}
})
},
getLogin() {
wx.showToast({
title: '获取openId',
})
console.log('获取openId')
let that = this;
wx.login({
success(res) {
console.log(res)
if (res.code) {
console.log(res, 'res')
let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${that.data.appId}&secret=${that.data.secret}&js_code=${res.code}&grant_type=authorization_code`
console.log(url)
wx.request({
url: url,
success: (res) => {
console.log(res);
that.setData({
openId: res.data.openid
})
console.log('openId', res.data.openid);
}
})
}
}
})
},
openVideo() {
console.log('开启视频通话')
let that = this;
if(this.data.otherOpenId == null){
wx.showModal({
title: '请输入对方的openid再试',
duration: 1500,
})
return
}
wx.setEnable1v1Chat({
enable: true,
success(res) {
console.log(res, 'res')
wx.join1v1Chat({
listener: {
nickname: '接听方',
headImage: 'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669741200&t=76c06e790922f54389ce78305245b994',
openid: that.data.otherOpenId, //获取小程序用户的openId
},
caller: {
nickname: '呼叫方',
headImage: 'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669741200&t=76c06e790922f54389ce78305245b994',
openid: that.data.openId, //获取小程序用户的openId
},
success(res) {
console.log('[呼叫成功]res', res)
console.log('呼叫方:',that.data.openId)
console.log('接听方:',that.data.otherOpenId,)
},
fail(err) {
console.log('[呼叫失败]err', err)
}
})
},
fail(err) {
console.error("拨通失败", err)
}
})
}
}
})
更多推荐
所有评论(0)