vue调用企业微信JS-SDK实现语音识别功能
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
哈哈,第一次接触这块,踩了不少的坑,希望对大家有帮助
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgcgagj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13