From d7a1b94f905c5f28c9c8f2d48c3f9e28ebcf9cc4 Mon Sep 17 00:00:00 2001 From: 648540858 <648540858@qq.com> Date: 星期六, 24 九月 2022 21:04:58 +0800 Subject: [PATCH] Merge branch 'wvp-28181-2.0' --- web_src/src/components/dialog/devicePlayer.vue | 223 ++++++++++++++++++++++++++++++++----------------------- 1 files changed, 130 insertions(+), 93 deletions(-) diff --git a/web_src/src/components/dialog/devicePlayer.vue b/web_src/src/components/dialog/devicePlayer.vue index c11df1d..ee5fd7b 100644 --- a/web_src/src/components/dialog/devicePlayer.vue +++ b/web_src/src/components/dialog/devicePlayer.vue @@ -1,7 +1,7 @@ <template> <div id="devicePlayer" v-loading="isLoging"> - <el-dialog title="瑙嗛鎾斁" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()"> + <el-dialog title="瑙嗛鎾斁" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()"> <!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> --> <div style="width: 100%; height: 100%"> <el-tabs type="card" :stretch="true" v-model="activePlayer" @tab-click="changePlayer" v-if="Object.keys(this.player).length > 1"> @@ -319,7 +319,9 @@ } }, created() { + console.log("created") console.log(this.player) + this.broadcastStatus = -1; if (Object.keys(this.player).length === 1) { this.activePlayer = Object.keys(this.player)[0] } @@ -332,7 +334,7 @@ // 濡備綍浣犲彧鏄敤涓�绉嶆挱鏀惧櫒锛岀洿鎺ユ敞閲婃帀涓嶇敤鐨勯儴鍒嗗嵆鍙� player: { jessibuca : ["ws_flv", "wss_flv"], - webRTC: ["rtc", "rtc"], + webRTC: ["rtc", "rtcs"], }, videoHistory: { date: '', @@ -386,7 +388,7 @@ if (tab.name === "codec") { this.$axios({ method: 'get', - url: '/zlm/' +this.mediaServerId+ '/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtmp&app='+ this.app +'&stream='+ this.streamId + url: '/zlm/' +this.mediaServerId+ '/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtsp&app='+ this.app +'&stream='+ this.streamId }).then(function (res) { that.tracksLoading = false; if (res.data.code == 0 && res.data.tracks) { @@ -409,6 +411,9 @@ console.log(this.videoUrl) }, openDialog: function (tab, deviceId, channelId, param) { + if (this.showVideoDialog) { + return; + } this.tabActiveName = tab; this.channelId = channelId; this.deviceId = deviceId; @@ -453,6 +458,7 @@ this.playFromStreamInfo(false, streamInfo) }, getUrlByStreamInfo(){ + console.log(this.streamInfo) if (location.protocol === "https:") { this.videoUrl = this.streamInfo[this.player[this.activePlayer][1]] }else { @@ -467,9 +473,9 @@ this.$refs[this.activePlayer].pause() that.$axios({ method: 'post', - url: '/api/gb_record/convert/' + that.streamId + url: '/api/play/convert/' + that.streamId }).then(function (res) { - if (res.data.code == 0) { + if (res.data.code === 0) { that.convertKey = res.data.key; setTimeout(()=>{ that.isLoging = false; @@ -539,9 +545,7 @@ this.stopPlayRecord(); } this.recordPlay = '' - if (this.broadcastStatus === 1) { - this.stopBroadcast() - } + this.stopBroadcast() }, copySharedInfo: function (data) { @@ -581,10 +585,10 @@ url: '/api/gb_record/query/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime }).then(function (res) { console.log(res) + that.recordsLoading = false; if(res.data.code === 0) { // 澶勭悊鏃堕棿淇℃伅 that.videoHistory.searchHistoryResult = res.data.data.recordList; - that.recordsLoading = false; }else { this.$message({ showClose: true, @@ -623,13 +627,21 @@ url: '/api/playback/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' + row.endTime }).then(function (res) { - that.streamInfo = res.data; + if (res.data.code === 0) { + that.streamInfo = res.data.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; + }else { + that.$message({ + showClose: true, + message: res.data.msg, + type: "error", + }); + } + that.recordPlay = true; }); } }, @@ -848,7 +860,12 @@ }).then( (res)=> { if (res.data.code == 0) { let streamInfo = res.data.data.streamInfo; - this.startBroadcast(streamInfo.rtc) + if (document.location.protocol.includes("https")) { + this.startBroadcast(streamInfo.rtcs) + }else { + this.startBroadcast(streamInfo.rtc) + } + }else { this.$message({ showClose: true, @@ -862,96 +879,116 @@ } }, startBroadcast(url){ - // 鑾峰彇鎺ㄦ祦閴存潈KEY - console.log(this.$loginUser) - console.log(this.$loginUser.pushKey) - url += "&sign=" + crypto.createHash('md5').update(this.$loginUser.pushKey, "utf8").digest('hex') - 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 if (e === "disconnected") { - 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.broadcastStatus = -2; - this.broadcastRtc = null; + // 鑾峰彇鎺ㄦ祦閴存潈Key this.$axios({ - method: 'get', - url: '/api/play/broadcast/stop/' + this.deviceId + '/' + this.channelId + method: 'post', + url: '/api/user/userInfo', }).then( (res)=> { - if (res.data.code == 0) { - // this.broadcastStatus = -1; - // this.broadcastRtc.close() - }else { + if (res.data.code !== 0) { this.$message({ showClose: true, - message: res.data.msg, + message: "鑾峰彇鎺ㄦ祦閴存潈Key澶辫触", type: "error", + }); + }else { + let pushKey = res.data.data.pushKey; + // 鑾峰彇鎺ㄦ祦閴存潈KEY + url += "&sign=" + crypto.createHash('md5').update(pushKey, "utf8").digest('hex') + 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 if (e === "disconnected") { + 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(){ + if (this.broadcastStatus === -1) { + this.broadcastStatus = 1; + }else { + this.broadcastStatus = -2; + 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; + // this.broadcastRtc.close() + }else { + this.$message({ + showClose: true, + message: res.data.msg, + type: "error", + }); + } + }); + } + + } } }; -- Gitblit v1.8.0