| | |
| | | <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> |
| | | <div id="shared" style="text-align: right; margin-top: 1rem;"> |
| | | <el-tabs v-model="tabActiveName"> |
| | | <el-tab-pane label="实时视频" name="media"> |
| | |
| | | <!--{"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> |
| | |
| | | </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-tabs> |
| | | </div> |
| | |
| | | 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: '', |
| | | 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, |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | if (!!this.$refs.videoPlayer) { |
| | | this.$refs.videoPlayer.pause(); |
| | | } |
| | | |
| | | |
| | | switch (tab) { |
| | | case "media": |
| | |
| | | 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; |
| | | var that = this; |
| | | that.isLoging = false; |
| | | if (!!streamInfo.tracks && streamInfo.tracks.length > 0 ) { |
| | | for (let i = 0; i < streamInfo.tracks.length; i++) { |
| | | if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name == "CodecAAC") { // 判断为AAC音频 |
| | | realHasAudio = true; |
| | | } |
| | | if (streamInfo.tracks[i].codec_type == 0 && streamInfo.tracks[i].codec_id_name != "CodecH264") { // 判断为H265视频 |
| | | that.coverPlay(streamInfo, streamInfo.tracks[i].codec_id_name, ()=>{ |
| | | that.close(); |
| | | return; |
| | | }) |
| | | }else if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name != "CodecAAC") { |
| | | that.coverPlay(streamInfo, streamInfo.tracks[i].codec_id_name, ()=>{ |
| | | that.playFromStreamInfo(false. streamInfo) |
| | | }) |
| | | }else if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name == "CodecAAC") { |
| | | that.playFromStreamInfo(true, streamInfo) |
| | | }else { |
| | | that.playFromStreamInfo(false, streamInfo) |
| | | } |
| | | } |
| | | this.hasaudio = realHasAudio && this.hasaudio; |
| | | }else { |
| | | that.playFromStreamInfo(false, streamInfo) |
| | | } |
| | | this.ssrc = streamInfo.ssrc; |
| | | // this.$refs.videoPlayer.hasaudio = hasAudio; |
| | | // this.videoUrl = streamInfo.flv + "?" + new Date().getTime(); |
| | | this.videoUrl = streamInfo.ws_flv; |
| | | this.showVideoDialog = true; |
| | | console.log(this.ssrc); |
| | | }, |
| | | coverPlay: function (streamInfo, codec_id_name, catchcallback) { |
| | | var that = this; |
| | | |
| | | that.$confirm(codec_id_name + ' 编码格式不支持播放, 是否转码播放?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | that.isLoging = true; |
| | | that.$axios({ |
| | | method: 'post', |
| | | url: '/api/play/' + streamInfo.ssrc + '/convert' |
| | | }).then(function (res) { |
| | | if (res.data.code == 0) { |
| | | streamInfo.ws_flv = res.data.ws_flv; |
| | | that.convertKey = res.data.key; |
| | | setTimeout(()=>{ |
| | | that.isLoging = false; |
| | | that.playFromStreamInfo(false, streamInfo); |
| | | }, 2000) |
| | | } else { |
| | | that.isLoging = false; |
| | | that.$message({ |
| | | showClose: true, |
| | | message: '转码失败', |
| | | type: 'error' |
| | | }); |
| | | } |
| | | }).catch(function (e) { |
| | | that.$message({ |
| | | showClose: true, |
| | | message: '播放错误', |
| | | type: 'error' |
| | | }); |
| | | }); |
| | | }).catch(function (e) { |
| | | if (catchcallback)catchcallback() |
| | | }); |
| | | }, |
| | | playFromStreamInfo: function (realHasAudio, streamInfo) { |
| | | this.videoUrl = streamInfo.ws_flv; |
| | | this.showVideoDialog = true; |
| | | this.hasaudio = realHasAudio && this.hasaudio; |
| | | this.ssrc = streamInfo.ssrc; |
| | | console.log(this.ssrc); |
| | | }, |
| | | close: function () { |
| | | console.log('关闭视频'); |
| | | this.$refs.videoPlayer.pause(); |
| | | if (!this.$refs.videoPlayer){ |
| | | this.$refs.videoPlayer.pause(); |
| | | } |
| | | this.videoUrl = ''; |
| | | this.showVideoDialog = false; |
| | | if (this.convertKey != '') { |
| | | 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) |
| | | } |
| | | }).catch(function (e) {}); |
| | | } |
| | | this.convertKey = '' |
| | | }, |
| | | copySharedInfo: function (data) { |
| | | console.log('复制内容:' + data); |
| | |
| | | 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); |
| | |
| | | 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 { |
| | |
| | | |
| | | .control-round-inner { |
| | | position: absolute; |
| | | left: 15%; |
| | | top: 15%; |
| | | left: 13%; |
| | | top: 13%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |