From 72c1b36d6d2ece497e032c8434641d6576590f9d Mon Sep 17 00:00:00 2001 From: 648540858 <648540858@qq.com> Date: 星期日, 03 七月 2022 00:44:36 +0800 Subject: [PATCH] 优化对讲逻辑 --- web_src/src/components/dialog/devicePlayer.vue | 149 +++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 143 insertions(+), 6 deletions(-) diff --git a/web_src/src/components/dialog/devicePlayer.vue b/web_src/src/components/dialog/devicePlayer.vue index aba35dd..a33e8a4 100644 --- a/web_src/src/components/dialog/devicePlayer.vue +++ b/web_src/src/components/dialog/devicePlayer.vue @@ -276,6 +276,17 @@ </div> </el-tab-pane> + <el-tab-pane label="璇煶瀵硅" name="broadcast" > + <div class="trank" style="text-align: center;"> + <el-button @click="broadcastStatusClick()" :type="getBroadcastStatus()" circle icon="el-icon-microphone" style="font-size: 32px; padding: 24px;margin-top: 24px;"/> + <p> + <span v-if="broadcastStatus === -1">鐐瑰嚮寮�濮嬪璁�</span> + <span v-if="broadcastStatus === 0">绛夊緟鎺ラ�氫腑...</span> + <span v-if="broadcastStatus === 1">璇疯璇�</span> + </p> + + </div> + </el-tab-pane> </el-tabs> </div> @@ -359,6 +370,8 @@ recordStartTime: 0, showTimeText: "00:00:00", streamInfo: null, + broadcastRtc: null, + broadcastStatus: -1, // -1 榛樿鐘舵�� 0 绛夊緟鎺ラ�� 1 鎺ラ�氭垚鍔� }; }, methods: { @@ -524,6 +537,9 @@ this.stopPlayRecord(); } this.recordPlay = '' + if (this.broadcastStatus === 1) { + this.stopBroadcast() + } }, copySharedInfo: function (data) { @@ -605,12 +621,12 @@ url: '/api/playback/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' + row.endTime }).then(function (res) { - var streamInfo = res.data; - that.app = streamInfo.app; - that.streamId = streamInfo.stream; - that.mediaServerId = streamInfo.mediaServerId; - that.ssrc = streamInfo.ssrc; - that.videoUrl = that.getUrlByStreamInfo(streamInfo); + that.streamInfo = res.data; + that.app = that.streamInfo.app; + that.streamId = that.streamInfo.stream; + that.mediaServerId = that.streamInfo.mediaServerId; + that.ssrc = that.streamInfo.ssrc; + that.videoUrl = that.getUrlByStreamInfo(); that.recordPlay = true; }); } @@ -804,8 +820,129 @@ }, 600) }); }, + getBroadcastStatus() { + if (this.broadcastStatus == -1) { + return "primary" + } + if (this.broadcastStatus == 0) { + return "warning" + } + if (this.broadcastStatus == 1) { + return "danger" + } + }, + broadcastStatusClick() { + if (this.broadcastStatus == -1) { + // 榛樿鐘舵�侊紝 寮�濮� + // 鍙戣捣璇煶瀵硅 + this.$axios({ + method: 'get', + url: '/api/play/broadcast/' + this.deviceId + '/' + this.channelId + "?timeout=30" + }).then( (res)=> { + if (res.data.code == 0) { + let streamInfo = res.data.data.streamInfo; + this.startBroadcast(streamInfo.rtc) + }else { + this.$message({ + showClose: true, + message: res.data.msg, + type: "error", + }); + } + }); + }else if (this.broadcastStatus === 1) { + this.stopBroadcast() + } + }, + startBroadcast(url){ + console.log("寮�濮嬭闊冲璁诧細 " + url) + this.broadcastRtc = new ZLMRTCClient.Endpoint({ + debug: true, // 鏄惁鎵撳嵃鏃ュ織 + zlmsdpUrl: url, //娴佸湴鍧� + simulecast: false, + useCamera: false, + audioEnable: true, + videoEnable: false, + recvOnly: false, + }) + // webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//鑾峰彇鍒颁簡杩滅娴侊紝鍙互鎾斁 + // console.error('鎾斁鎴愬姛',e.streams) + // this.broadcastStatus = 1; + // }); + // + // webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 鑾峰彇鍒颁簡鏈湴娴� + // this.broadcastStatus = 1; + // // document.getElementById('selfVideo').srcObject=s; + // // this.eventcallbacK("LOCAL STREAM", "鑾峰彇鍒颁簡鏈湴娴�") + // }); + + this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_NOT_SUPPORT,(e)=>{// 鑾峰彇鍒颁簡鏈湴娴� + console.error('涓嶆敮鎸亀ebrtc',e) + this.$message({ + showClose: true, + message: '涓嶆敮鎸亀ebrtc, 鏃犳硶杩涜璇煶瀵硅', + type: 'error' + }); + }); + + this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 鍗忓晢鍑洪敊 + console.error('ICE 鍗忓晢鍑洪敊') + this.$message({ + showClose: true, + message: 'ICE 鍗忓晢鍑洪敊', + type: 'error' + }); + }); + + this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,(e)=>{// offer anwser 浜ゆ崲澶辫触 + console.error('offer anwser 浜ゆ崲澶辫触',e) + this.$message({ + showClose: true, + message: 'offer anwser 浜ゆ崲澶辫触' + e, + type: 'error' + }); + }); + this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,(e)=>{// offer anwser 浜ゆ崲澶辫触 + console.log('鐘舵�佹敼鍙�',e) + if (e === "connecting") { + this.broadcastStatus = 0; + }else if (e === "connected") { + this.broadcastStatus = 1; + }else { + this.broadcastStatus = -1; + } + }); + this.broadcastRtc.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED,(e)=>{// offer anwser 浜ゆ崲澶辫触 + console.log('鎹曡幏娴佸け璐�',e) + this.$message({ + showClose: true, + message: '鎹曡幏娴佸け璐�' + e, + type: 'error' + }); + }); + }, + stopBroadcast(){ + this.broadcastRtc.close() + this.broadcastRtc = null; + this.$axios({ + method: 'get', + url: '/api/play/broadcast/stop/' + this.deviceId + '/' + this.channelId + }).then( (res)=> { + if (res.data.code == 0) { + // this.broadcastStatus = -1; + + }else { + this.$message({ + showClose: true, + message: res.data.msg, + type: "error", + }); + } + }); + + } } }; </script> -- Gitblit v1.8.0