综合演练 发送语音功能代码调整
This commit is contained in:
joylink_cuiweidong
parent
074f6d647a
commit
ad583bf418
@ -28,6 +28,7 @@
|
||||
"path-to-regexp": "2.4.0",
|
||||
"qrcode.vue": "^1.6.2",
|
||||
"qs": "^6.9.3",
|
||||
"recordrtc": "^5.5.9",
|
||||
"script-loader": "^0.7.2",
|
||||
"sessionstorage": "^0.1.0",
|
||||
"sockjs-client": "^1.4.0",
|
||||
|
||||
@ -49,6 +49,15 @@ export function chatWithText(data, group) {
|
||||
});
|
||||
}
|
||||
|
||||
// 文字聊天 发送文字
|
||||
export function chatWithAudio(file, group) {
|
||||
return request({
|
||||
url: `/api/jointTraining/chatWithAudio?group=${group}`,
|
||||
method: 'post',
|
||||
data: file
|
||||
});
|
||||
}
|
||||
|
||||
// 生成分发二维码
|
||||
export function getJoinTrainCode(data, group) {
|
||||
return request({
|
||||
|
||||
@ -9,23 +9,40 @@
|
||||
<div v-for="(nor, index) in textList" :key="index" style="margin-top: 5px;">
|
||||
<li v-if="nor.self" style="position: relative">
|
||||
<div class="userName" style="position: absolute; right: 4px; top: 4px; font-size: 14px;">
|
||||
{{ nor.chatTime }} {{ nor.userName }}</div>
|
||||
{{ covertTime(nor.chatTime) }} {{ nor.userName }}</div>
|
||||
<div class="news">
|
||||
<span>{{ nor.value }}</span>
|
||||
</div>
|
||||
<div v-if="nor.voice" class="yuyin" @click="playAudio(nor)">
|
||||
<i class="el-icon-caret-right" />
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="nor.other" style="position: relative">
|
||||
<div class="userName" style="position: absolute; left: 12px; top: 4px; font-size: 14px;">
|
||||
{{ nor.userName }} {{ nor.chatTime }}</div>
|
||||
{{ nor.userName }} {{ covertTime(nor.chatTime) }}</div>
|
||||
<div class="answers">
|
||||
<span>{{ nor.value }}</span>
|
||||
</div>
|
||||
<div v-if="nor.voice" class="yuyin1" @click="playAudio(nor)">
|
||||
<i class="el-icon-caret-right" />
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="nor.join" style="font-size: 12px; text-align: center;">{{ nor.roomTip }}</li>
|
||||
<li v-if="nor.join" class="roomTip">{{ nor.roomTip }}</li>
|
||||
</div>
|
||||
</ul>
|
||||
<div v-if="recordSending" class="chat_record_tip">
|
||||
<div class="record_icon" />
|
||||
<div class="record_tip_text">正在录音...</div>
|
||||
<div class="record_tip_confirm" @click="stopRecording()">确定</div>
|
||||
<div class="record_tip_cancle" @click="cancleRecording()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat__footer">
|
||||
<div class="chat_tool">
|
||||
<div class="microphoneBtn" @click="startRecording()">
|
||||
<span class="el-icon-microphone" />
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="dope" v-model="text" class="chat__footer--text" style="width: 99%;height: 47px; border: none;outline: none;" @keyup="handleSetInputState" />
|
||||
<button class="chat__footer--send" :disabled="disabled" @click="handleSendText">{{ $t('trainRoom.sendText') }}</button>
|
||||
</div>
|
||||
@ -33,7 +50,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { chatWithText } from '@/api/chat';
|
||||
// import HZRecorder from '@/utils/HZRecorder';
|
||||
import RecordRTC from 'recordrtc';
|
||||
import { chatWithText, chatWithAudio } from '@/api/chat';
|
||||
import { chatWithTextNew } from '@/api/jointTraining';
|
||||
|
||||
export default {
|
||||
@ -54,15 +73,17 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
textList: [],
|
||||
recordSending:false,
|
||||
text: '',
|
||||
recorders: null,
|
||||
sending: false,
|
||||
background: '',
|
||||
disabled:true
|
||||
disabled:true,
|
||||
microphone:null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
listHeight() {
|
||||
return this.height - 90;
|
||||
return this.height - 119;
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
@ -89,6 +110,9 @@ export default {
|
||||
this.disabled = false;
|
||||
}
|
||||
},
|
||||
covertTime(time) {
|
||||
return time.slice(0, time.indexOf('.'));
|
||||
},
|
||||
async handleSendText() {
|
||||
try {
|
||||
if (this.text.trim()) {
|
||||
@ -118,6 +142,179 @@ export default {
|
||||
this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 语音录制开始
|
||||
startRecording() {
|
||||
const that = this;
|
||||
if (!this.recordSending && !this.recorders && !this.microphone) {
|
||||
debugger;
|
||||
navigator.getUserMedia(
|
||||
{ audio: true } // 只启用音频
|
||||
, function (stream) {
|
||||
that.microphone = stream;
|
||||
that.recorders = new RecordRTC(that.microphone, {
|
||||
type: 'audio',
|
||||
checkForInactiveTracks: true
|
||||
});
|
||||
that.recorders.startRecording();
|
||||
that.recordSending = true;
|
||||
}, 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;
|
||||
}
|
||||
}
|
||||
);
|
||||
// HZRecorder.init.get(rec => {
|
||||
// if (typeof rec == 'object') {
|
||||
// this.recorders = rec;
|
||||
// this.recorders.start();
|
||||
// this.recordSending = true;
|
||||
// }
|
||||
// });
|
||||
}
|
||||
},
|
||||
// 停止录制
|
||||
stopRecording() {
|
||||
const that = this;
|
||||
this.recorders.stopRecording(function(blobURL) {
|
||||
const data = URL.createObjectURL(that.recorders.getBlob());
|
||||
console.log('--------', data);
|
||||
const blob = that.recorders.getBlob();
|
||||
const fd = new FormData();
|
||||
fd.append('file', blob);
|
||||
chatWithAudio(fd, that.$route.query.group).then((res)=>{
|
||||
this.recordSending = false;
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '语音发送成功',
|
||||
type: 'success'
|
||||
});
|
||||
}).catch(error => {
|
||||
// this.sending = false;
|
||||
this.recordSending = false;
|
||||
const message = JSON.parse(error.message);
|
||||
if (message.err_no == 3301) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '音频质量有问题',
|
||||
type: 'error'
|
||||
});
|
||||
} else if (message.err_no == 3308) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '音频过长,建议60s以下',
|
||||
type: 'error'
|
||||
});
|
||||
} else if (message.err_no == 3314) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '音频太短,建议重录',
|
||||
type: 'error'
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '网络问题，请重试',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
if (that.microphone) {
|
||||
that.microphone.stop();
|
||||
that.microphone = null;
|
||||
that.recordSending = false;
|
||||
that.recorders = null;
|
||||
}
|
||||
});
|
||||
// this.sending = true;
|
||||
// if (this.recorders) {
|
||||
// this.recorders.stop();
|
||||
// var fd = new FormData();
|
||||
// fd.append('file', this.recorders.getBlob());
|
||||
// chatWithAudio(fd, this.$route.query.group).then((res)=>{
|
||||
// this.recordSending = false;
|
||||
// this.$message({
|
||||
// showClose: true,
|
||||
// message: '语音发送成功',
|
||||
// type: 'success'
|
||||
// });
|
||||
// }).catch(error => {
|
||||
// // this.sending = false;
|
||||
// this.recordSending = false;
|
||||
// const message = JSON.parse(error.message);
|
||||
// if (message.err_no == 3301) {
|
||||
// this.$message({
|
||||
// showClose: true,
|
||||
// message: '音频质量有问题',
|
||||
// type: 'error'
|
||||
// });
|
||||
// } else if (message.err_no == 3308) {
|
||||
// this.$message({
|
||||
// showClose: true,
|
||||
// message: '音频过长,建议60s以下',
|
||||
// type: 'error'
|
||||
// });
|
||||
// } else if (message.err_no == 3314) {
|
||||
// this.$message({
|
||||
// showClose: true,
|
||||
// message: '音频太短,建议重录',
|
||||
// type: 'error'
|
||||
// });
|
||||
// } else {
|
||||
// this.$message({
|
||||
// showClose: true,
|
||||
// message: '网络问题，请重试',
|
||||
// type: 'error'
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// this.recorders = null;
|
||||
// } else {
|
||||
// // this.sending = false;
|
||||
// this.$message({
|
||||
// showClose: true,
|
||||
// message: '音频太短,建议重录',
|
||||
// type: 'error'
|
||||
// });
|
||||
// }
|
||||
},
|
||||
cancleRecording() {
|
||||
this.recordSending = false;
|
||||
this.recorders = null;
|
||||
},
|
||||
playAudio(nor) {
|
||||
this.$refs.audio.src = nor.src;
|
||||
this.$refs.audio.play();
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -165,6 +362,7 @@ export default {
|
||||
overflow-y: scroll;
|
||||
padding-right: 8px;
|
||||
padding-left: 2px;
|
||||
position: relative;
|
||||
&--list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -174,7 +372,29 @@ export default {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.yuyin {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
margin-top: 21px;
|
||||
margin-right: 3px;
|
||||
float: right;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.yuyin1 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
margin-top: 21px;
|
||||
margin-left: 3px;
|
||||
float: left;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.news {
|
||||
max-width: 55%;
|
||||
@ -206,16 +426,91 @@ export default {
|
||||
position: relative;
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.roomTip{
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat_record_tip{
|
||||
height: 28px;
|
||||
display: inline-block;
|
||||
background: #dfe6ee;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
border-top: 1px #d8dce5 solid;
|
||||
padding: 6px 0px 6px 4px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.record_icon{
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #25d825;
|
||||
border-radius: 10px;
|
||||
margin-left: 3px;
|
||||
margin-right: 0px;
|
||||
box-shadow: -1px 0px 3px #6d6d6d;
|
||||
border: 1px #28d228 solid;
|
||||
}
|
||||
.record_tip_text{
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.record_tip_confirm{
|
||||
position: absolute;
|
||||
right: 63px;
|
||||
padding: 3px 0px 2px 0px;
|
||||
border: 1px #a2a5aa solid;
|
||||
border-radius: 5px;
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
top: 4px;
|
||||
background: #eeeeee;
|
||||
cursor: pointer;
|
||||
}
|
||||
.record_tip_cancle{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
padding: 3px 0px 2px 0px;
|
||||
border: 1px #a2a5aa solid;
|
||||
border-radius: 5px;
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
top: 4px;
|
||||
background: #eeeeee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
width: 100%;
|
||||
height: 83px;
|
||||
border-top: 1px solid #ccc;
|
||||
height: 113px;
|
||||
position: relative;
|
||||
|
||||
.chat_tool{
|
||||
border-top: 1px solid #d8dce5;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
.microphoneBtn{
|
||||
font-size: 18px;
|
||||
padding: 2px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
&:hover{
|
||||
color:#0188fb;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&--text {
|
||||
width: 99%;
|
||||
height: 75px;
|
||||
@ -224,7 +519,7 @@ export default {
|
||||
resize: none;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
&--send {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user