weipengfei
/
dataV-xunfei
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

This commit is contained in:
shengchanzhe 2023-10-12 15:48:10 +08:00
parent ee064c2c55
commit 2fd4cd8798
2 changed files with 221 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
index.js
View File

@ -1,6 +1,5 @@
// (function () { // (function () {
// // btnControl.onclick = function () { // // btnControl.onclick = function () {
// // if (btnStatus === "UNDEFINED" || btnStatus === "CLOSED") { // // if (btnStatus === "UNDEFINED" || btnStatus === "CLOSED") {
// // connectWebSocket(); // // connectWebSocket();
@ -11,197 +10,205 @@
// // }; // // };
// })(); // })();
let btnStatus = "UNDEFINED"; // "UNDEFINED" "CONNECTING" "OPEN" "CLOSING" "CLOSED" let btnStatus = 'UNDEFINED' // "UNDEFINED" "CONNECTING" "OPEN" "CLOSING" "CLOSED"
// const btnControl = document.getElementById("btn_control"); // const btnControl = document.getElementById("btn_control");
const btnControl = {}; const btnControl = {}
const recorder = new RecorderManager("./dists"); const recorder = new RecorderManager('./dists')
recorder.onStart = () => { recorder.onStart = () => {
changeBtnStatus("OPEN"); changeBtnStatus('OPEN')
} }
let iatWS; let iatWS
let resultText = ""; let resultText = ''
let resultTextTemp = ""; let resultTextTemp = ''
let countdownInterval; let countdownInterval
window.winText = ''
/** /**
* 获取websocket url * 获取websocket url
* 该接口需要后端提供，这里为了方便前端处理 * 该接口需要后端提供，这里为了方便前端处理
*/ */
function getWebSocketUrl() { function getWebSocketUrl() {
// 请求地址根据语种不同变化 // 请求地址根据语种不同变化
var url = "wss://iat-api.xfyun.cn/v2/iat"; let url = 'wss://iat-api.xfyun.cn/v2/iat'
var host = "iat-api.xfyun.cn"; const host = 'iat-api.xfyun.cn'
var apiKey = API_KEY; const apiKey = API_KEY
var apiSecret = API_SECRET; const apiSecret = API_SECRET
var date = new Date().toGMTString(); const date = new Date().toGMTString()
var algorithm = "hmac-sha256"; const algorithm = 'hmac-sha256'
var headers = "host date request-line"; const headers = 'host date request-line'
var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`; const signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`
var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret); const signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret)
var signature = CryptoJS.enc.Base64.stringify(signatureSha); const signature = CryptoJS.enc.Base64.stringify(signatureSha)
var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`; const authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`
var authorization = btoa(authorizationOrigin); const authorization = btoa(authorizationOrigin)
url = `${url}?authorization=${authorization}&date=${date}&host=${host}`; url = `${url}?authorization=${authorization}&date=${date}&host=${host}`
return url; return url
} }
function toBase64(buffer) { function toBase64(buffer) {
var binary = ""; let binary = ''
var bytes = new Uint8Array(buffer); const bytes = new Uint8Array(buffer)
var len = bytes.byteLength; const len = bytes.byteLength
for (var i = 0; i < len; i++) { for (let i = 0; i < len; i++)
binary += String.fromCharCode(bytes[i]); binary += String.fromCharCode(bytes[i])
}
return window.btoa(binary);
}
function countdown() { return window.btoa(binary)
let seconds = 60; }
btnControl.innerText = `录音中（${seconds}s）`;
function countdown() {
let seconds = 60
btnControl.innerText = `录音中（${seconds}s）`
countdownInterval = setInterval(() => { countdownInterval = setInterval(() => {
seconds = seconds - 1; seconds = seconds - 1
if (seconds <= 0) { if (seconds <= 0) {
clearInterval(countdownInterval); clearInterval(countdownInterval)
recorder.stop(); recorder.stop()
} else {
btnControl.innerText = `录音中（${seconds}s）`;
} }
}, 1000); else {
btnControl.innerText = `录音中（${seconds}s）`
} }
}, 1000)
}
function changeBtnStatus(status) { function changeBtnStatus(status) {
btnStatus = status; btnStatus = status
if (status === "CONNECTING") { if (status === 'CONNECTING') {
btnControl.innerText = "建立连接中"; btnControl.innerText = '建立连接中'
document.getElementById("result").innerText = ""; document.getElementById('result').innerText = ''
resultText = ""; resultText = ''
resultTextTemp = ""; resultTextTemp = ''
} else if (status === "OPEN") {
countdown();
} else if (status === "CLOSING") {
btnControl.innerText = "关闭连接中";
} else if (status === "CLOSED") {
btnControl.innerText = "开始录音";
} }
else if (status === 'OPEN') {
countdown()
} }
else if (status === 'CLOSING') {
btnControl.innerText = '关闭连接中'
}
else if (status === 'CLOSED') {
btnControl.innerText = '开始录音'
}
}
function renderResult(resultData) { function renderResult(resultData) {
// 识别结束 // 识别结束
let jsonData = JSON.parse(resultData); const jsonData = JSON.parse(resultData)
if (jsonData.data && jsonData.data.result) { if (jsonData.data && jsonData.data.result) {
let data = jsonData.data.result; const data = jsonData.data.result
let str = ""; let str = ''
let ws = data.ws; const ws = data.ws
for (let i = 0; i < ws.length; i++) { for (let i = 0; i < ws.length; i++)
str = str + ws[i].cw[0].w; str = str + ws[i].cw[0].w
}
// 开启wpgs会有此字段(前提：在控制台开通动态修正功能) // 开启wpgs会有此字段(前提：在控制台开通动态修正功能)
// 取值为 "apd"时表示该片结果是追加到前面的最终结果；取值为"rpl" 时表示替换前面的部分结果，替换范围为rg字段 // 取值为 "apd"时表示该片结果是追加到前面的最终结果；取值为"rpl" 时表示替换前面的部分结果，替换范围为rg字段
if (data.pgs) { if (data.pgs) {
if (data.pgs === "apd") { if (data.pgs === 'apd') {
// 将resultTextTemp同步给resultText // 将resultTextTemp同步给resultText
resultText = resultTextTemp; resultText = resultTextTemp
} }
// 将结果存储在resultTextTemp中 // 将结果存储在resultTextTemp中
resultTextTemp = resultText + str; resultTextTemp = resultText + str
} else {
resultText = resultText + str;
} }
document.getElementById("result").innerText = else {
resultTextTemp || resultText || ""; resultText = resultText + str
console.log(resultTextTemp);
}
if (jsonData.code === 0 && jsonData.data.status === 2) {
iatWS.close();
}
if (jsonData.code !== 0) {
iatWS.close();
console.error(jsonData);
} }
document.getElementById('result').innerText
= resultTextTemp || resultText || ''
console.log('录音结果:', resultTextTemp || resultText || '')
window.winText = resultTextTemp || resultText || ''
window.dispatchEvent(new Event('test'))
} }
if (jsonData.code === 0 && jsonData.data.status === 2)
iatWS.close()
function connectWebSocket() { if (jsonData.code !== 0) {
const websocketUrl = getWebSocketUrl(); iatWS.close()
if ("WebSocket" in window) { console.error(jsonData)
iatWS = new WebSocket(websocketUrl);
} else if ("MozWebSocket" in window) {
iatWS = new MozWebSocket(websocketUrl);
} else {
alert("浏览器不支持WebSocket");
return;
} }
changeBtnStatus("CONNECTING"); }
function connectWebSocket() {
const websocketUrl = getWebSocketUrl()
if ('WebSocket' in window) {
iatWS = new WebSocket(websocketUrl)
}
else if ('MozWebSocket' in window) {
iatWS = new MozWebSocket(websocketUrl)
}
else {
alert('浏览器不支持WebSocket')
return
}
changeBtnStatus('CONNECTING')
iatWS.onopen = (e) => { iatWS.onopen = (e) => {
// 开始录音 // 开始录音
recorder.start({ recorder.start({
sampleRate: 16000, sampleRate: 16000,
frameSize: 1280, frameSize: 1280,
}); })
var params = { const params = {
common: { common: {
app_id: APPID, app_id: APPID,
}, },
business: { business: {
language: "zh_cn", language: 'zh_cn',
domain: "iat", domain: 'iat',
accent: "mandarin", accent: 'mandarin',
vad_eos: 5000, vad_eos: 5000,
dwa: "wpgs", dwa: 'wpgs',
}, },
data: { data: {
status: 0, status: 0,
format: "audio/L16;rate=16000", format: 'audio/L16;rate=16000',
encoding: "raw", encoding: 'raw',
}, },
};
iatWS.send(JSON.stringify(params));
};
iatWS.onmessage = (e) => {
renderResult(e.data);
};
iatWS.onerror = (e) => {
console.error(e);
recorder.stop();
changeBtnStatus("CLOSED");
};
iatWS.onclose = (e) => {
recorder.stop();
changeBtnStatus("CLOSED");
};
} }
iatWS.send(JSON.stringify(params))
}
iatWS.onmessage = (e) => {
renderResult(e.data)
}
iatWS.onerror = (e) => {
console.error(e)
recorder.stop()
changeBtnStatus('CLOSED')
}
iatWS.onclose = (e) => {
recorder.stop()
changeBtnStatus('CLOSED')
}
}
recorder.onFrameRecorded = ({ isLastFrame, frameBuffer }) => { recorder.onFrameRecorded = ({ isLastFrame, frameBuffer }) => {
if (iatWS.readyState === iatWS.OPEN) { if (iatWS.readyState === iatWS.OPEN) {
iatWS.send( iatWS.send(
JSON.stringify({ JSON.stringify({
data: { data: {
status: isLastFrame ? 2 : 1, status: isLastFrame ? 2 : 1,
format: "audio/L16;rate=16000", format: 'audio/L16;rate=16000',
encoding: "raw", encoding: 'raw',
audio: toBase64(frameBuffer), audio: toBase64(frameBuffer),
}, },
}) }),
); )
if (isLastFrame) { if (isLastFrame)
changeBtnStatus("CLOSING"); changeBtnStatus('CLOSING')
} }
}
recorder.onStop = () => {
clearInterval(countdownInterval)
}
function RecordXunfei() {
if (btnStatus === 'UNDEFINED' || btnStatus === 'CLOSED') {
console.log('开始录音')
connectWebSocket()
} }
}; else if (btnStatus === 'CONNECTING' || btnStatus === 'OPEN') {
recorder.onStop = () => { console.log('结束录音')
clearInterval(countdownInterval);
};
function RecordXunfei(){
if (btnStatus === "UNDEFINED" || btnStatus === "CLOSED") {
console.log('开始录音');
connectWebSocket();
} else if (btnStatus === "CONNECTING" || btnStatus === "OPEN") {
console.log('结束录音');
// 结束录音 // 结束录音
recorder.stop(); recorder.stop()
} }
} return window.winText
}

80
src/views/chat/index.vue
View File

@ -1,6 +1,6 @@
<script setup lang='ts'> <script setup lang='ts'>
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue' import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { import {
@ -36,6 +36,9 @@ const connection = new Push({
auth: '/plugin/webman/push/auth', // 订阅鉴权(仅限于私有频道) auth: '/plugin/webman/push/auth', // 订阅鉴权(仅限于私有频道)
}) })
// 是否正在录音
let recordFalg = 0
// 假设用户uid为1 // 假设用户uid为1
const uid = 1 const uid = 1
// 浏览器监听user-1频道的消息，也就是用户uid为1的用户消息 // 浏览器监听user-1频道的消息，也就是用户uid为1的用户消息
@ -45,6 +48,15 @@ console.log(user_channel)
user_channel.on('message', (data: any) => { user_channel.on('message', (data: any) => {
// data里是消息内容 // data里是消息内容
console.log('收到命令', data) console.log('收到命令', data)
if (recordFalg == 0) {
RecordXunfei()
recordFalg = 1
}
else {
RecordXunfei()
handleSubmit()
recordFalg = 0
}
}) })
let controller = new AbortController() let controller = new AbortController()
@ -545,51 +557,35 @@ onUnmounted(() => {
controller.abort() controller.abort()
}) })
const iatRecorder = reactive(new IatRecorder()) const iatRecorder = reactive(new IatRecorder())
let a = true const a = true
watch(() => iatRecorder.resultText, (n, o) => { // watch(() => iatRecorder.resultText, (n, o) => {
console.log('监听', n) // console.log('监听', n)
prompt.value = n // prompt.value = n
// })
window.winText = ''
window.addEventListener('test', (e) => {
if (recordFalg == 1)
prompt.value = window.winText
}) })
const click = () => { const click = () => {
// new RecordXunfei(); // prompt.value = window.winText
if (a) { RecordXunfei()
iatRecorder.start(prompt.value)
a = !a
console.log('录音开始')
}
else {
iatRecorder.stop()
a = !a
console.log('录音结束')
console.log('最终结果', iatRecorder)
}
}
const result = ref('') // if (a) {
// iatRecorder.start(prompt.value)
// 录音 // a = !a
const recordReady = () => { // console.log('录音开始')
console.info('按钮就绪!') // }
} // else {
const recordStart = () => { // iatRecorder.stop()
console.info('录音开始') // a = !a
} // console.log('录音结束')
const showResult = (text) => { // console.log('最终结果', iatRecorder)
console.info('收到识别结果：', text) // }
}
const recordStop = () => {
console.info('录音结束')
}
const recordNoResult = (text) => {
console.info('没有录到什么，请重试')
}
const recordComplete = (text) => {
console.info('识别完成! 最终结果：', text)
}
const recordFailed = (error) => {
console.info('识别失败，错误栈：', error)
} }
</script> </script>
@ -619,7 +615,7 @@ const recordFailed = (error) => {
</button> </button>
</div> </div>
<br> <br>
<div id="result" /> <div id="result" ref="resultRef" />
<template v-if="!dataSources.length"> <template v-if="!dataSources.length">
<div <div