From 730a64be077b51add311b9d880bb23f5162253ec Mon Sep 17 00:00:00 2001 From: panlinlin <648540858@qq.com> Date: 星期二, 05 一月 2021 14:35:43 +0800 Subject: [PATCH] 优化录像查询,优化注释 --- web_src/src/components/gb28181/devicePlayer.vue | 325 +++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 239 insertions(+), 86 deletions(-) diff --git a/web_src/src/components/gb28181/devicePlayer.vue b/web_src/src/components/gb28181/devicePlayer.vue index 8c23ced..ed8464a 100644 --- a/web_src/src/components/gb28181/devicePlayer.vue +++ b/web_src/src/components/gb28181/devicePlayer.vue @@ -1,9 +1,11 @@ <template> -<div id="devicePlayer"> +<div id="devicePlayer" v-loading="isLoging"> + <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" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> + <!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> --> + <player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></player> <div id="shared" style="text-align: right; margin-top: 1rem;"> - <el-tabs v-model="tabActiveName"> + <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick"> <el-tab-pane label="瀹炴椂瑙嗛" name="media"> <div style="margin-bottom: 0.5rem;"> <!-- <el-button type="primary" size="small" @click="playRecord(true, '')">鎾斁</el-button>--> @@ -26,21 +28,7 @@ <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}--> <el-tab-pane label="褰曞儚鏌ヨ" name="record"> <el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="鏃ユ湡" @change="queryRecords()"></el-date-picker> - <!-- <el-slider style="margin: 0 1rem 1rem 1rem;"--> - <!-- v-model="timeVal"--> - <!-- :min="timeMin"--> - <!-- :max="timeMax"--> - <!-- :step="5"--> - <!-- :marks="getTimeMakrs()"--> - <!-- :format-tooltip="formatTooltip">--> - <!-- </el-slider>--> - <!-- <range-slider :min="timeMin"--> - <!-- :max="timeMax"--> - <!-- :step="5"></range-slider>--> - - <!-- <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="缁撴潫鏃堕棿"--> - <!-- @change="recordList()"></el-date-picker>--> - <el-table :data="videoHistory.searchHistoryResult" height="150" v-load="recordsLoading"> + <el-table :data="videoHistory.searchHistoryResult" height="150" v-loading="recordsLoading"> <el-table-column label="鍚嶇О" prop="name"></el-table-column> <el-table-column label="鏂囦欢" prop="filePath"></el-table-column> <el-table-column label="寮�濮嬫椂闂�" prop="startTime" :formatter="timeFormatter"></el-table-column> @@ -55,30 +43,85 @@ </el-tab-pane> <!--閬ユ帶鐣岄潰--> <el-tab-pane label="浜戝彴鎺у埗" name="control"> - <div style="display: flex; justify-content: center;"> + <div style="display: flex; justify-content: left;"> <div class="control-wrapper"> - <div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)"> + <div class="control-btn control-top" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)"> <i class="el-icon-caret-top"></i> <div class="control-inner-btn control-inner"></div> </div> - <div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)"> + <div class="control-btn control-left" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)"> <i class="el-icon-caret-left"></i> <div class="control-inner-btn control-inner"></div> </div> - <div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)"> + <div class="control-btn control-bottom" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)"> <i class="el-icon-caret-bottom"></i> <div class="control-inner-btn control-inner"></div> </div> - <div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)"> + <div class="control-btn control-right" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)"> <i class="el-icon-caret-right"></i> <div class="control-inner-btn control-inner"></div> </div> <div class="control-round"> <div class="control-round-inner"><i class="fa fa-pause-circle"></i></div> </div> - <div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div> - <div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div> + <div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 1)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div> + <div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div> </div> + <div class="control-panel"> + <el-button-group> + <el-tag style="position :absolute; left: 0rem; top: 0rem; width: 5rem; text-align: center" size="medium" type="info">棰勭疆浣嶇紪鍙�</el-tag> + <el-input-number style="position: absolute; left: 5rem; top: 0rem; width: 6rem" size="mini" v-model="presetPos" controls-position="right" :precision="0" :step="1" :min="1" :max="255"></el-input-number> + <el-button style="position: absolute; left: 11rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="presetPosition(129, presetPos)">璁剧疆</el-button> + <el-button style="position: absolute; left: 27rem; top: 0rem; width: 5rem" size="mini" type="primary" icon="el-icon-place" @click="presetPosition(130, presetPos)">璋冪敤</el-button> + <el-button style="position: absolute; left: 16rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="presetPosition(131, presetPos)">鍒犻櫎</el-button> + <el-tag style="position :absolute; left: 0rem; top: 2.5rem; width: 5rem; text-align: center" size="medium" type="info">宸¤埅閫熷害</el-tag> + <el-input-number style="position: absolute; left: 5rem; top: 2.5rem; width: 6rem" size="mini" v-model="cruisingSpeed" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number> + <el-button style="position: absolute; left: 11rem; top: 2.5rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(134, cruisingGroup, cruisingSpeed)">璁剧疆</el-button> + <el-tag style="position :absolute; left: 16rem; top: 2.5rem; width: 5rem; text-align: center" size="medium" type="info">鍋滅暀鏃堕棿</el-tag> + <el-input-number style="position: absolute; left: 21rem; top: 2.5rem; width: 6rem" size="mini" v-model="cruisingTime" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number> + <el-button style="position: absolute; left: 27rem; top: 2.5rem; width: 5rem" size="mini" icon="el-icon-timer" @click="setSpeedOrTime(135, cruisingGroup, cruisingTime)">璁剧疆</el-button> + <el-tag style="position :absolute; left: 0rem; top: 4.5rem; width: 5rem; text-align: center" size="medium" type="info">宸¤埅缁勭紪鍙�</el-tag> + <el-input-number style="position: absolute; left: 5rem; top: 4.5rem; width: 6rem" size="mini" v-model="cruisingGroup" controls-position="right" :precision="0" :min="0" :max="255"></el-input-number> + <el-button style="position: absolute; left: 11rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="setCommand(132, cruisingGroup, presetPos)">娣诲姞鐐�</el-button> + <el-button style="position: absolute; left: 16rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="setCommand(133, cruisingGroup, presetPos)">鍒犻櫎鐐�</el-button> + <el-button style="position: absolute; left: 21rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-delete" @click="setCommand(133, cruisingGroup, 0)">鍒犻櫎缁�</el-button> + <el-button style="position: absolute; left: 27rem; top: 5rem; width: 5rem" size="mini" type="primary" icon="el-icon-video-camera-solid" @click="setCommand(136, cruisingGroup, 0)">宸¤埅</el-button> + <el-tag style="position :absolute; left: 0rem; top: 7rem; width: 5rem; text-align: center" size="medium" type="info">鎵弿閫熷害</el-tag> + <el-input-number style="position: absolute; left: 5rem; top: 7rem; width: 6rem" size="mini" v-model="scanSpeed" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number> + <el-button style="position: absolute; left: 11rem; top: 7rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(138, scanGroup, scanSpeed)">璁剧疆</el-button> + <el-tag style="position :absolute; left: 0rem; top: 9rem; width: 5rem; text-align: center" size="medium" type="info">鎵弿缁勭紪鍙�</el-tag> + <el-input-number style="position: absolute; left: 5rem; top: 9rem; width: 6rem" size="mini" v-model="scanGroup" controls-position="right" :precision="0" :step="1" :min="0" :max="255"></el-input-number> + <el-button style="position: absolute; left: 11rem; top: 9rem; width: 5rem" size="mini" icon="el-icon-d-arrow-left" @click="setCommand(137, scanGroup, 1)">宸﹁竟鐣�</el-button> + <el-button style="position: absolute; left: 16rem; top: 9rem; width: 5rem" size="mini" icon="el-icon-d-arrow-right" @click="setCommand(137, scanGroup, 2)">鍙宠竟鐣�</el-button> + <el-button style="position: absolute; left: 27rem; top: 7rem; width: 5rem" size="mini" type="primary" icon="el-icon-video-camera-solid" @click="setCommand(137, scanGroup, 0)">鎵弿</el-button> + <el-button style="position: absolute; left: 27rem; top: 9rem; width: 5rem" size="mini" type="danger" icon="el-icon-switch-button" @click="ptzCamera(0, 0, 0)">鍋滄</el-button> + </el-button-group> + </div> + </div> + </el-tab-pane> + <el-tab-pane label="缂栫爜淇℃伅" name="codec" v-loading="tracksLoading"> + <p> + 鏃犳硶鎾斁鎴栬�呮病鏈夊0闊�?   璇曚竴璇� + <el-button size="mini" type="primary" v-if="!coverPlaying" @click="coverPlay">杞爜鎾斁</el-button> + <el-button size="mini" type="danger" v-if="coverPlaying" @click="convertStopClick">鍋滄杞爜</el-button> + </p> + <div class="trank" > + <div v-for="(item, index) in tracks"> + <span >娴� {{index}}</span> + <div class="trankInfo" v-if="item.codec_type == 0"> + <p>鏍煎紡: {{item.codec_id_name}}</p> + <p>绫诲瀷: 瑙嗛</p> + <p>鍒嗚鲸鐜�: {{item.width}} x {{item.height}}</p> + <p>甯х巼: {{item.fps}}</p> + </div> + <div class="trankInfo" v-if="item.codec_type == 1"> + <p>鏍煎紡: {{item.codec_id_name}}</p> + <p>绫诲瀷: 闊抽</p> + <p>閲囨牱浣嶆暟: {{item.sample_bit}}</p> + <p>閲囨牱鐜�: {{item.sample_rate}}</p> + </div> + </div> + </div> </el-tab-pane> @@ -89,12 +132,12 @@ </template> <script> -import LivePlayer from '@liveqing/liveplayer' +import player from './player.vue' export default { name: 'devicePlayer', props: {}, components: { - LivePlayer + player, }, computed: { getPlayerShared: function () { @@ -114,58 +157,63 @@ date: '', searchHistoryResult: [] //濯掍綋娴佸巻鍙茶褰曟悳绱㈢粨鏋� }, - timeMakrs: { - // 0 : "0:00", - // // 60 : "1:00", - // 120 : "2:00", - // // 180 : "3:00", - // 240 : "4:00", - // // 300 : "5:00", - // 360 : "6:00", - // // 420 : "7:00", - // 480 : "8:00", - // 540 : "9:00", - 600: "10:00", - // 660 : "11:00", - 720: "12:00", - // 780 : "13:00", - 840: "14:00", - // 900 : "15:00", - 960: "16:00", - // 1020 : "17:00", - 1080: "18:00", - // 1140 : "19:00", - // 1200 : "20:00", - // // 1260 : "21:00", - // 1320 : "22:00", - // // 1380 : "23:00", - // 1440 : "24:00" - }, showVideoDialog: false, - ssrc: '', + streamId: '', + convertKey: '', deviceId: '', channelId: '', tabActiveName: 'media', hasaudio: false, loadingRecords: false, recordsLoading: false, + isLoging: false, timeVal: 0, timeMin: 0, timeMax: 1440, - + presetPos: 1, + cruisingSpeed: 100, + cruisingTime: 5, + cruisingGroup: 0, + scanSpeed: 100, + scanGroup: 0, + tracks: [], + coverPlaying:false, + tracksLoading: false }; }, methods: { + tabHandleClick: function(tab, event) { + console.log(tab) + var that = this; + that.tracks = []; + that.tracksLoading = true; + if (tab.name == "codec") { + this.$axios({ + method: 'get', + url: '/zlm/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtmp&app=rtp&stream='+ this.streamId + }).then(function (res) { + that.tracksLoading = false; + if (res.data.code == 0 && res.data.online) { + that.tracks = res.data.tracks; + }else{ + that.$message({ + showClose: true, + message: '鑾峰彇缂栫爜淇℃伅澶辫触,', + type: 'warning' + }); + } + }).catch(function (e) {}); + } + }, openDialog: function (tab, deviceId, channelId, param) { this.tabActiveName = tab; this.channelId = channelId; this.deviceId = deviceId; - this.ssrc = ""; + this.streamId = ""; this.videoUrl = "" if (!!this.$refs.videoPlayer) { this.$refs.videoPlayer.pause(); } - switch (tab) { case "media": this.play(param.streamInfo, param.hasAudio) @@ -183,36 +231,94 @@ timeAxisSelTime: function (val) { console.log(val) }, - getTimeMakrs() { - return this.timeMakrs; - }, play: function (streamInfo, hasAudio) { + this.hasaudio = hasAudio; - // 鏍规嵁濯掍綋娴佷俊鎭簩娆″垽鏂� - if (!!streamInfo.tracks && streamInfo.tracks.length > 0) { - var realHasAudio = false; - for (let i = 0; i < streamInfo.tracks.length; i++) { - if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name == "CodecAAC") { // 鍒ゆ柇涓篈AC闊抽 - realHasAudio = true; - } - } - this.hasaudio = realHasAudio && this.hasaudio; - } - this.ssrc = streamInfo.ssrc; - // this.$refs.videoPlayer.hasaudio = hasAudio; - // this.videoUrl = streamInfo.flv + "?" + new Date().getTime(); + this.isLoging = false; this.videoUrl = streamInfo.ws_flv; - this.showVideoDialog = true; - console.log(this.ssrc); + this.streamId = streamInfo.streamId; + this.playFromStreamInfo(false, streamInfo) + }, + coverPlay: function () { + var that = this; + this.coverPlaying = true; + this.$refs.videoPlayer.pause() + that.$axios({ + method: 'post', + url: '/api/play/' + that.streamId + '/convert' + }).then(function (res) { + if (res.data.code == 0) { + that.convertKey = res.data.key; + setTimeout(()=>{ + that.isLoging = false; + that.playFromStreamInfo(false, res.data.data); + }, 2000) + } else { + that.isLoging = false; + that.coverPlaying = false; + that.$message({ + showClose: true, + message: '杞爜澶辫触', + type: 'error' + }); + } + }).catch(function (e) { + console.log(e) + that.coverPlaying = false; + that.$message({ + showClose: true, + message: '鎾斁閿欒', + type: 'error' + }); + }); + }, + convertStopClick: function() { + this.convertStop(()=>{ + this.$refs.videoPlayer.play(this.videoUrl) + }); + }, + convertStop: function(callback) { + var that = this; + that.$refs.videoPlayer.pause() + this.$axios({ + method: 'post', + url: '/api/play/convert/stop/' + this.convertKey + }).then(function (res) { + if (res.data.code == 0) { + console.log(res.data.msg) + }else { + console.error(res.data.msg) + } + if (callback )callback(); + }).catch(function (e) {}); + that.coverPlaying = false; + that.convertKey = ""; + // if (callback )callback(); + }, + + playFromStreamInfo: function (realHasAudio, streamInfo) { + this.showVideoDialog = true; + this.hasaudio = realHasAudio && this.hasaudio; + this.$refs.videoPlayer.play(streamInfo.ws_flv) }, close: function () { console.log('鍏抽棴瑙嗛'); - this.$refs.videoPlayer.pause(); + if (!!this.$refs.videoPlayer){ + this.$refs.videoPlayer.pause(); + } this.videoUrl = ''; + this.coverPlaying = false; this.showVideoDialog = false; + if (this.convertKey != '') { + this.convertStop(); + } + this.convertKey = '' }, + copySharedInfo: function (data) { console.log('澶嶅埗鍐呭锛�' + data); + this.coverPlaying = false; + this.tracks = [] let _this = this; this.$copyText(data).then( function (e) { @@ -259,9 +365,9 @@ }, playRecord: function (row) { let that = this; - if (that.ssrc != "") { + if (that.streamId != "") { that.stopPlayRecord(function () { - that.ssrc = "", + that.streamId = "", that.playRecord(row); }) } else { @@ -271,7 +377,7 @@ row.endTime }).then(function (res) { var streamInfo = res.data; - that.ssrc = streamInfo.ssrc; + that.streamId = streamInfo.streamId; that.videoUrl = streamInfo.ws_flv; }); } @@ -281,7 +387,7 @@ this.videoUrl = ''; this.$axios({ method: 'get', - url: '/api/playback/' + this.ssrc + '/stop' + url: '/api/playback/' + this.streamId + '/stop' }).then(function (res) { if (callback) callback() }); @@ -291,13 +397,40 @@ let that = this; this.$axios({ method: 'post', - url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown + - '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50' + // url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown + + // '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50' + url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + (zoom * 16 + upDown * 4 + leftRight) + '&horizonSpeed=30&verticalSpeed=30&zoomSpeed=' + (2 * 16) }).then(function (res) {}); }, //////////////////////鎾斁鍣ㄤ簨浠跺鐞�////////////////////////// videoError: function (e) { console.log("鎾斁鍣ㄩ敊璇細" + JSON.stringify(e)); + }, + presetPosition: function (cmdCode, presetPos) { + console.log('棰勭疆浣嶆帶鍒讹細' + this.presetPos + ' : 0x' + cmdCode.toString(16)); + let that = this; + this.$axios({ + method: 'post', + url: '/api/frontEndCommand/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + cmdCode + '¶meter1=0¶meter2=' + presetPos + '&combindCode2=0' + }).then(function (res) {}); + }, + setSpeedOrTime: function (cmdCode, groupNum, parameter) { + let that = this; + let parameter2 = parameter % 256; + let combindCode2 = Math.floor(parameter / 256) * 16; + console.log('鍓嶇鎺у埗锛�0x' + cmdCode.toString(16) + ' 0x' + groupNum.toString(16) + ' 0x' + parameter2.toString(16) + ' 0x' + combindCode2.toString(16)); + this.$axios({ + method: 'post', + url: '/api/frontEndCommand/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + cmdCode + '¶meter1=' + groupNum + '¶meter2=' + parameter2 + '&combindCode2=' + combindCode2 + }).then(function (res) {}); + }, + setCommand: function (cmdCode, groupNum, parameter) { + let that = this; + console.log('鍓嶇鎺у埗锛�0x' + cmdCode.toString(16) + ' 0x' + groupNum.toString(16) + ' 0x' + parameter.toString(16) + ' 0x0'); + this.$axios({ + method: 'post', + url: '/api/frontEndCommand/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + cmdCode + '¶meter1=' + groupNum + '¶meter2=' + parameter + '&combindCode2=0' + }).then(function (res) {}); }, formatTooltip: function (val) { var h = parseInt(val / 60); @@ -356,9 +489,18 @@ height: 6.25rem; max-width: 6.25rem; max-height: 6.25rem; - margin: 0 auto; border-radius: 100%; + margin-top: 2.5rem; + margin-left: 0.5rem; float: left; +} + +.control-panel { + position: relative; + top: 0; + left: 5rem; + height: 11rem; + max-height: 11rem; } .control-btn { @@ -393,8 +535,8 @@ .control-round-inner { position: absolute; - left: 15%; - top: 15%; + left: 13%; + top: 13%; display: flex; justify-content: center; align-items: center; @@ -506,4 +648,15 @@ .control-bottom .fa { transform: rotate(-45deg) translateY(7px); } +.trank { + width: 80%; + height: 180px; + text-align: left; + padding: 0 10%; + overflow: auto; +} +.trankInfo { + width: 80%; + padding: 0 10%; +} </style> -- Gitblit v1.8.0