假如发现有问题或者觉得有遗漏的当地,欢迎留言评论
关于WebSocket的优缺点
这个网上文档太多了,自行查阅 引荐进口
准备
之前是准备用 STOMPJS 流文本定向音讯协议开发,但涉及到语音转文字,emmm…
所以此功用的语音部分涉及到语音辨认器,语音辨认器语音转文字是调用第三方的 SpeechRecognizer
,版权原因这儿不讲第三方的,咱们能够自己去集成第三方sdk;这儿能够共享两个接入语音辨认器踩到的几个坑,如下:
工程在 Chrome 浏览器打开,获取音频设备权限问题
Vue 工程在 Chrome 浏览器打开,无法获取音视频设备,控制台提示获取音频设备权限问题, 咱们能够经过以下方式解决:
一、网页运用https方式拜访
此操作需求依赖web服务提供者完成https的拜访方式。(需求安全证书)
二、修正浏览器安全配置(最直接、简单)
- 浏览器地址栏输入:
chrome://flags/#unsafely-treat-insecure-origin-as-secure
- 敞开Insecure origins treated as secure
在输入栏内输入你需求拜访音频设备的地址url,然后将右侧Disabled 改成 Enabled,浏览器会提示重启(Relaunch)
3. 浏览器会提示重启(Relaunch),Relaunch 即可
关于谷歌浏览器的禁止autoplay政策
autoplay
: 这个特点是<video><audio>
所属的,表示在用户进入页面的时候自动开端播映声音或者播映视频,但是,这个特点会在谷歌浏览器中失效,因为谷歌浏览器在用户体会和安全性方面做出自己的限制,默认阻挠音视频的自动播映。
解决方法也很简单,修正下权限就能够了~
新版本里边不叫 Autoplay policy了,而是声音,它会检测页面是否有video或audio标签,假如有的话,就会直接在上图显现,挑选允许,就能够完成和上面相同的效果。假如上面没有声音选项,你也能够点击上图的 网站设置,里边有所有的浏览器的首要权限设置。
点进去,找到声音选项,相同能够设定允许自动播映。
注意:这儿的设定只能收效于当前的页面,无法收效所有页面。
以上就是语音辨认器部分
接下来是封装的webSocket 接纳语音指令部分,直接上代码
class Socket {
/**
* @description: 初始化实例特点,保存参数
*
*/
constructor (options) {
this.url = options.url // 语音衔接url
this.callback = options.received // 返回函数
this.name = options.name || 'default'
this.ws = null
this.status = null
// 心跳定时器
this.pingInterval = null
// 心跳检测频率
this.timeout = options.time
this.isHeart = options.isHeart
this.isReconnection = options.isReconnection
}
connect (data) {
this.ws = new WebSocket(this.url)
// 树立衔接
this.ws.onopen = (e) => {
this.status = e.type
console.log('success', e)
if (this.isHeart) {
// 心跳
this.heartCheck()
}
// 给后台发送数据
if (data !== undefined) {
return this.ws.send(JSON.stringify({ type: data.type }))
}
}
// 接受服务器返回的信息
this.ws.onmessage = (e) => {
if (typeof this.callback === 'function') {
return this.callback(e.data)
} else {
console.log('参数的类型有必要为函数')
}
}
// 关闭衔接
this.ws.onclose = (e) => {
console.log('onclose', e)
}
// 报错
this.onerror = (e) => {
console.log('onerror', e)
this.closeSocket(e)
}
}
sendMsg (data) {
const msg = JSON.stringify(data)
return this.ws.send(msg)
}
resetHeart () {
clearInterval(this.pingInterval)
return this
}
heartCheck () {
this.pingInterval = setInterval(() => {
if (this.ws.readyState === 1) {
console.log('Im alive')
this.ws.send(JSON.stringify({ type: 'ping' }))
}
}, this.timeout * 8)
}
closeSocket (e) {
this.resetHeart()
if (this.status !== 'close') {
console.log('disconnect and reconnect', e)
// if (this.isReconnection) {
// 重连
this.connect()
// }
} else {
console.log('close manually', e)
}
}
close () {
this.status = 'close'
this.resetHeart()
console.log('998899')
return this.ws.close()
}
}
export default Socket
订阅
window.ws = new Socket({
url: `${this.socketUrl}${id}`,// url和参数
name: '',
isHeart: true, // 是否心跳
time: 60000,
received: (data) => {
if (typeof this.callbackMsg === 'function') {
return this.callbackMsg(data)
} else {
console.log('参数的类型有必要为函数')
}
}
})
// this.ws = ws
const data = {
type: 'init'
}
window.ws.connect(data)
这儿的socket仅仅做接纳指令,发送指令是经过接入的收音设备,发送语音流到数据中控