206 lines
7.0 KiB
Vue
206 lines
7.0 KiB
Vue
<template>
|
|
<div style="z-index: 99;bottom: 40px; left: 40px;position: absolute;">
|
|
<div style="position: relative;">
|
|
<el-button class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" size="mini" type="primary" @click="startRecording()">
|
|
<el-progress id="record_progress_bar" type="circle" :show-text="false" :percentage="100/60*seconds" :width="40" :stroke-width="2" status="success" />
|
|
<i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancleRecording()" />
|
|
<span class="iconfont icon-yuyin"></span>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import RecordRTC from 'recordrtc';
|
|
import { sendCommandNew } from '@/api/jmap/training';
|
|
export default {
|
|
name: 'VoiceCommand',
|
|
data() {
|
|
return {
|
|
seconds: 0,
|
|
recordSending: false,
|
|
recorders: null,
|
|
microphone:null
|
|
};
|
|
},
|
|
methods: {
|
|
startRecording() {
|
|
this.audioPlay = true;
|
|
const that = this;
|
|
if (!this.recordSending) {
|
|
if (!this.recordSending && !this.recorders && !this.microphone) {
|
|
const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
|
|
navigator.getUserMedia({ audio: true }, function (stream) {
|
|
that.microphone = stream;
|
|
that.recorders = new RecordRTC(that.microphone, {
|
|
type: 'audio',
|
|
recorderType: StereoAudioRecorder,
|
|
numberOfAudioChannels: 1,
|
|
bitsPerSecond:256000,
|
|
desiredSampRate: 16000
|
|
});
|
|
that.recorders.startRecording();
|
|
that.recordSending = true;
|
|
that.audioPlay = false;
|
|
that.inter = setInterval(() => {
|
|
if (that.seconds < 60) {
|
|
that.seconds++;
|
|
} else {
|
|
clearInterval(that.inter);
|
|
that.stopRecording();
|
|
}
|
|
}, 1000);
|
|
}, function (error) {
|
|
switch (error.code || error.name) {
|
|
case 'PERMISSION_DENIED':
|
|
case 'PermissionDeniedError':
|
|
that.$message({
|
|
showClose: true,
|
|
message: '用户拒绝提供信息',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
case 'NOT_SUPPORTED_ERROR':
|
|
case 'NotSupportedError':
|
|
that.$message({
|
|
showClose: true,
|
|
message: '浏览器不支持硬件设备',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
case 'MANDATORY_UNSATISFIED_ERROR':
|
|
case 'MandatoryUnsatisfiedError':
|
|
that.$message({
|
|
showClose: true,
|
|
message: '无法发现指定的硬件设备',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
default:
|
|
that.$message({
|
|
showClose: true,
|
|
message: '无法打开麦克风',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
);
|
|
}
|
|
} else {
|
|
this.stopRecording(); // 发送语音
|
|
}
|
|
},
|
|
cancleRecording() {
|
|
if (this.microphone) {
|
|
clearInterval(this.inter);
|
|
this.seconds = 0;
|
|
this.microphone.stop();
|
|
this.microphone = null;
|
|
this.recordSending = false;
|
|
this.recorders = null;
|
|
}
|
|
},
|
|
blobToBase64(blob, callback) {
|
|
const fileReader = new FileReader();
|
|
fileReader.onload = (e) => {
|
|
callback(e.target.result);
|
|
};
|
|
fileReader.readAsDataURL(blob);
|
|
},
|
|
// 停止录制 发送语音
|
|
stopRecording() {
|
|
this.audioPlay = true;
|
|
const that = this;
|
|
this.recorders.stopRecording(function(blobURL) {
|
|
clearInterval(that.inter);
|
|
that.seconds = 0;
|
|
const blob = that.recorders.getBlob();
|
|
// const fd = new FormData();
|
|
// fd.append('file', blob);
|
|
that.blobToBase64(blob, (data) => {
|
|
sendCommandNew(that.$route.query.group, 'YJDDZH_VOICE_COMMAND', {base64Str: data})
|
|
.then(resp => {
|
|
that.audioPlay = false;
|
|
})
|
|
.catch(e => {
|
|
console.log(e);
|
|
that.$message.error('未识别到正确指令，请重试!');
|
|
that.audioPlay = false;
|
|
});
|
|
if (that.microphone) {
|
|
that.microphone.stop();
|
|
that.microphone = null;
|
|
that.recordSending = false;
|
|
that.recorders = null;
|
|
}
|
|
});
|
|
// uploadAudioFiles(fd)
|
|
// .then((resp) => {
|
|
// that.audioPlay = false;
|
|
// resp.data.command = '';
|
|
// that.messageList.push(resp.data);
|
|
// })
|
|
// .catch(error => {
|
|
// console.log(error);
|
|
// that.$message.error('语音发送失败: ' + error.message);
|
|
// that.audioPlay = false;
|
|
// });
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#record_progress_bar{
|
|
width: 40px;
|
|
height: 40px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 50%;
|
|
}
|
|
.chat-box-footer-create{
|
|
font-size: 16px;
|
|
text-align: center;
|
|
color: #fff;
|
|
line-height: 30px;
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: green;
|
|
border: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.chat-box-footer-send{
|
|
background: #F2F2F2;
|
|
right: 55px;
|
|
cursor: pointer;
|
|
.icon-yuyin{
|
|
color: #333;
|
|
font-size: 24px;
|
|
margin: 0;
|
|
}
|
|
&.active{
|
|
.icon-yuyin{
|
|
color: green;
|
|
}
|
|
}
|
|
.close_icon{
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 38px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: 600;
|
|
padding: 3px;
|
|
}
|
|
}
|
|
</style>
|