|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div :class="sizeClass" >
|
|
|
- <div class="mic" @mousedown="mouseDownHandle" @mouseup="mouseUpHandle" :title="isRecording?'录音中...':'开始录音'">
|
|
|
+ <div :class="`mic ${!isRecording?'mic-off':'mic-on'}`" @mousedown="mouseDownHandle" @mouseup="mouseUpHandle" :title="isRecording?'录音中...':'开始录音'">
|
|
|
<i :class="`el-icon-${isRecording?'microphone':'turn-off-microphone'}`"></i>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -49,6 +49,7 @@ export default {
|
|
|
this.player.close();
|
|
|
this.player = null;
|
|
|
this.mediaStream = null;
|
|
|
+
|
|
|
this.stopBroadcast();
|
|
|
}
|
|
|
},
|
|
@@ -60,6 +61,7 @@ export default {
|
|
|
this.player = null;
|
|
|
this.mediaStream = null;
|
|
|
this.audioConnected = false;
|
|
|
+ this.isRecording = false;
|
|
|
// this.getWebrtcAddress();
|
|
|
},
|
|
|
// 录音按钮按下
|
|
@@ -105,7 +107,13 @@ export default {
|
|
|
// webrtc 拉流地址
|
|
|
let playAudioStreamUrl = zlmSdpUrl.replace("push","play");
|
|
|
console.log(playAudioStreamUrl);
|
|
|
- let audioEncodeArr = this.pushConfig.audioEncodePt.split(",");
|
|
|
+ let audioEncodeArr;
|
|
|
+ if(this.pushConfig.audioEncodePt){
|
|
|
+ audioEncodeArr = this.pushConfig.audioEncodePt.split(",");
|
|
|
+ }else {
|
|
|
+ console.log("未指定编码类型");
|
|
|
+ audioEncodeArr = [];
|
|
|
+ }
|
|
|
console.log("启用音频编码")
|
|
|
console.log(audioEncodeArr)
|
|
|
let player = new ZLMRTCClient.Endpoint(
|
|
@@ -141,6 +149,7 @@ export default {
|
|
|
}
|
|
|
console.log(res);
|
|
|
this.audioConnected = true;
|
|
|
+ this.isRecording = true;
|
|
|
console.log('创建音视频通道成功');
|
|
|
} else if(state === 'close'){
|
|
|
this.$message.warning("webrtc连接断开");
|
|
@@ -214,6 +223,7 @@ export default {
|
|
|
},
|
|
|
// 停止语音广播
|
|
|
stopBroadcast() {
|
|
|
+ this.initAudioApplications();
|
|
|
let url = `/api/play/stopBroadcast`
|
|
|
url += `?deviceId=${this.deviceId}&channelId=${this.channelId}`;
|
|
|
return this.$axios.axios({
|
|
@@ -231,6 +241,7 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ cursor:pointer;
|
|
|
}
|
|
|
.microPhone .mic{
|
|
|
width: 100%;
|
|
@@ -240,6 +251,13 @@ export default {
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
+.mic-on{
|
|
|
+ color:red;
|
|
|
+}
|
|
|
+.mic-off{
|
|
|
+ color:gray;
|
|
|
+}
|
|
|
+
|
|
|
.small{width: 25px;height:25px;font-size: 1.8rem;}
|
|
|
.medium{width: 40px;height:40px;font-size: 2.2rem;}
|
|
|
.large{width: 60px;height:60px;font-size: 2.6rem;}
|