vue调用企业微信JS-SDK实现语音识别功能
vue调用企业微信JS-SDK实现语音识别功能1.前期准备使用别人的东西我们第一步就是到对应官方文档熟悉使用流程。https://open.work.weixin.qq.com/api/doc/90000/90136/905142.后端根据企业微信里我的企业选项最下面的企业id和应用与小程序里的自建应用的Secret获取token,并计算签名等一系列操作,具体官方文档网上都很详细,这里就不多说;3
·
vue调用企业微信JS-SDK实现语音识别功能
1.前期准备
使用别人的东西我们第一步就是到对应官方文档熟悉使用流程。https://open.work.weixin.qq.com/api/doc/90000/90136/90514
2.后端
根据企业微信里我的企业选项最下面的企业id和应用与小程序里的自建应用的Secret获取token,并计算签名等一系列操作,具体官方文档网上都很详细,这里就不多说;
3.前端代码撰写
第一步:安装对应的依赖并且在使用的组件里引入使用
import wx from 'weixin-js-sdk';
const _this = wx;
第二步:获取对应的权限的数据,这回需要和后端配合调接口
getConfig() {
const self=this;
const data=location.href.split('#')[0];//需要传的地址为#前面的地址
self.axios({
method: 'post',
url: '/red/web/getJsWxConfig?ticket=0&url=https://api.sixeco.com/os/',//获取签名等信息的地址
// headers: {'Content-Type': 'application/json'},
data:data //向服务端提供授权url参数,并且不需要#后面的部分
}).then((res) => {
// console.log(res.data.data)
let list = res.data.data;
_this.config({
beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId:list.appId,// 必填,企业微信的corpID
timestamp: list.timesTamp, // 必填,生成签名的时间戳
nonceStr: list.nonceStr, // 必填,生成签名的随机串
signature: list.signature, // 必填,签名
jsApiList: [
'startRecord', //开始录音接口
'stopRecord',// 停止录音接口
'translateVoice',
'onVoiceRecordEnd'
] // 必填,需要使用的JS接口列表
});
_this.ready(() => {
// _this.startRecord();
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个
// 客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调
// 用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
})
_this.error((res) => {
// 这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
})
}).catch((error) => {
// error
})
},
// 开始录音
start(e) {
let that = this;
that.showPopover = false
that.videoText = '正在录音...'
that.videoStatus = '正在切换车辆颜色…'
if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){
_this.startRecord({
success: function () {
that.timer = setInterval(() => {
that.time++
}, 1000)
that.vicoeEnd()
},
fail: function () {
// 开始录音失败
},
cancel: function () {
// 用户拒绝授权录音
}
})
}
},
// 60秒监听
vicoeEnd() {
let that = this
_this.onVoiceRecordEnd({
// 录音时间超过一分钟没有停止的时候会执行 complete 回调
complete: function (res) {
// 60秒停止录音
that.localId = res.localId
clearInterval(that.timer);
this.translate()
}
})
},
// 结束录音并识别语音
translate () {
const that = this;
_this.stopRecord({
success: function (res) {
// 翻译前停止录音
that.localId = res.localId;
that.getText()
},
fail: function (res) {
// 调用停止失败
}
});
},
一条龙下来就是这样啦,不过有几个需要注意的地方就是调用企微,确保签名认证通过了方可调用其他接口,遇到错误返回也没关系,根据错误码查找对应原因,一个个调试就可以啦
https://work.weixin.qq.com/api/doc/90001/90148/90455
哈哈,第一次接触这块,踩了不少的坑,希望对大家有帮助
更多推荐
已为社区贡献1条内容
所有评论(0)