Skip to content

蒋秀川 / miniProject

Go to a project
Commit af56ea2f by 李乾广
Options

修改bug

1 parent 3c540f73
Expand all
Inline Side-by-side
Showing 10 changed files with 108 additions and 73 deletions
h5/src/api/index.js
......@@ -4,6 +4,10 @@ const tourApi = {
getLiveAndPlaybackAddress(params, config){
return req('GET', `/patrol/patrolDeviceChannel/getLiveAndPlaybackAddress`, params, config)
},
// 获取直播回放地址
getThroughVideoUrl(params, config){
return req('POST', `/patrol/through/video/url`, params, config)
},
// 云控制
ptzStart(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStart`, params, config)
......@@ -11,6 +15,9 @@ const tourApi = {
ptzStop(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStop`, params, config)
},
// 获取设备录像记录
getThroughVideoRecord(params, config){
return req('POST', `/patrol/through/video/record`, params, config)
},
}
export default tourApi;
\ No newline at end of file
h5/src/views/extension/index.vue
<template>
<div class="extension-page">
<div class="j-player-wrapper">
<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :hideControls="false" :showPtz="false" :isXCXPage="true"/>
<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :hideControls="false" :showPtz="false" :isXCXPage="true" @magnificationChange="magnificationChange"/>
<!-- <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAJFBMVEVHcEzMzMzMzMzMzMzMzMzNzc3MzMzMzMzNzc3Nzc3MzMzMzMwv5ahDAAAAC3RSTlMAW+8S2UGVwyyZnOTRhEMAAAEfSURBVDjLzZKxbsJADIYdBQpsSCyVMlXAdEuQYGKpWFk6dWHJgsQ7sMDSpUv3PgITAQT0f7ly57ucQ45KXRAZot+/89k+X4ju9KzL4XOhlm3pR0enYrWViSRPXQIQSASkRSkIJEFRimYCuQAHSW89IOv6SH5TCsuAj68Ab1wDzqkAzqoC7AUAPtgsABgkBBgkCJiNHehGok//KRVsHqd+3Dj1/vukt3AH/Jj05s5/AmyZhFVWXDls44iVvfQWkCvgxU6g9ZdJfCLvjJbYaT3GvjOY4mQSG3SJGjhr/Y1Xohp+TGKqqzexZ/1GVGdNCitt6R8zVvb9d+JmKdl8o5sPWbtxT6zFuJcDQtk92MNmYiXHquYlZlVt1j4P6cd7fgHFW7Nhqu29TwAAAABJRU5ErkJggg==" alt="" @click="screenshot" class="screen-shot-img"> -->
</div>
<!-- 时间线组件 -->
<div class="extension-time-box">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType"/>
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid" :appKey="params.appKey"/>
</div>
</div>
</template>
<script>
import { getUrlParams } from './utils';
import vionPlayer from '@/components/vionPlayer';
import videoTime from './videoTime';
import moment from "moment";
import tourApi from '@/api';
var {CryptoJS} = require('./aes')
import {
Toast
} from 'vant';
......@@ -40,6 +42,8 @@ export default {
params: {
gateUnid: '',
watermarkText: '',
appKey:'',
ptzEnable:'',
},
panTiltList:{
up:0,
......@@ -59,6 +63,7 @@ export default {
nowPanTilt:'',
terminalType:'',
dateFormatType:'YYYY-MM-DD',
magnification:1,
}
},
created() {
......@@ -70,6 +75,10 @@ export default {
window.screenshot = this.screenshot;
},
methods: {
// 播放倍率改变
magnificationChange(val) {
this.magnification = val
},
// 时间线改变
videoTimeChange(val) {
let valTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
......@@ -89,15 +98,18 @@ export default {
let par = {
direction:this.panTiltList[type],
speed:2,
gateUnid:this.params.gateUnid
gateUnid:this.params.gateUnid,
appKey:this.params.appKey,
}
// 加密
let parStr = this.aesEncrypt(par)
if(type == 'stop') {
par.direction = this.nowPanTilt
tourApi.ptzStop(par).then(res => {
tourApi.ptzStop({param:parStr}).then(res => {
console.log(res)
})
} else {
tourApi.ptzStart(par).then(res => {
tourApi.ptzStart({param:parStr}).then(res => {
console.log(res)
if(res.data&&res.data.code != 200) {
Toast.fail('云台当前操作失败');
......@@ -139,17 +151,24 @@ export default {
getVideoAddress(startTime,stopTime) {
let par = {
gateUnid: this.params.gateUnid,
appKey: this.params.appKey,
playbackSpeed: 1,
startTime:startTime?startTime:null,
stopTime:stopTime?stopTime:null,
}
tourApi.getLiveAndPlaybackAddress(par).then(res => {
console.log(res)
// 加密
let parStr = this.aesEncrypt(par)
tourApi.getThroughVideoUrl({param:parStr}).then(res => {
if (res.data&&res.data.code == 200) {
this.$refs.vionPlayer.play(res.data.msg);
}
})
},
//加密
aesEncrypt (obj){
let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(JSON.stringify(obj)), CryptoJS.enc.Utf8.parse('0123456789abcdef'), {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}).toString();
return encrypted
},
// 暴露方法
// 截图方法
screenshot() {
......
h5/src/views/extension/videoTime.vue
......@@ -31,7 +31,7 @@
</div>
<!-- 操作按钮 -->
<div class="operating-box">
<van-button v-if="isNoBack" type="info" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button>
<van-button v-if="isNoBack&&ptzEnable==1" type="info" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button>
<van-button v-else type="info" size="mini" @click="backRealTime">返回实时</van-button>
<!-- <div v-if="isNoBack" class="operating-btn" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</div> -->
<!-- <div v-else class="operating-btn" @click="backRealTime">返回实时</div> -->
......@@ -65,13 +65,11 @@
import TimeLineCanvas from "./timeline-canvas-wx.vue";
import moment from "moment";
import tourApi from '@/api';
var {CryptoJS} = require('./aes')
export default {
name:'videoTime',
data() {
return {
startTimePickerOptions: {
selectableRange: '00:00:00 - 00:00:01'
},
showDayStr: moment().format('MM月DD日'),
showDay: '',
showDaySelectShow:false,
......@@ -100,7 +98,7 @@ export default {
playDateArr:[],
}
},
props:['dateFormatType'],
props:['dateFormatType','ptzEnable','gateUnid','appKey'],
components: {
TimeLineCanvas,
},
......@@ -108,21 +106,46 @@ export default {
let that = this
this.showDay = moment().format(this.dateFormatType)
this.timeRange = [moment().format(this.dateFormatType + ' 00:00:00'), moment().format(this.dateFormatType + ' 23:59:59')]
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.startTime = moment().format('HH:mm:ss')
this.nowPlayTime = this.startTime
this.startMeddleTime = moment().format(this.dateFormatType + ' HH:mm:ss')
this.proTimeColumns()
this.getDateBackTime(this.showDay)
},
beforeDestroy() {
this.stopPlay()
},
methods: {
// 获取可播放日期列表
getPlayDate() {
tourApi.ptzStop(par).then(res => {
console.log(res)
// 获取播放日期录像回放时间
getDateBackTime(startDay) {
let stopTime = startDay == moment().format(this.dateFormatType)?moment().format(this.dateFormatType + ' HH:mm:ss'):moment().format(this.dateFormatType + ' 23:59:59');
let par = {
gateUnid: this.gateUnid,
appKey: this.appKey,
startTime:startDay + ' 00:00:00',
stopTime:stopTime,
}
let parStr = this.aesEncrypt(par)
tourApi.getThroughVideoRecord({param:parStr}).then(res => {
// console.log(res)
if(res.data.code == 200) {
this.markTime = []
let list = res.data.data?res.data.data:[];
list.forEach((one)=>{
this.markTime.push({
beginTime: moment(one.startTime).format(this.dateFormatType + ' HH:mm:ss'),
endTime: moment(one.endTime).format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
})
})
}
})
},
//加密
aesEncrypt (obj){
let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(JSON.stringify(obj)), CryptoJS.enc.Utf8.parse('0123456789abcdef'), {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}).toString();
return encrypted
},
startPlay() {
if(this.isAutoPlay) {
......@@ -130,18 +153,12 @@ export default {
}
this.isNoBack = true
this.timeRange = [moment().format(this.dateFormatType + ' 00:00:00'), moment().format(this.dateFormatType + ' 23:59:59')]
this.markTime = [{
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.startTime = moment().format('HH:mm:ss')
this.showDayStr = moment().format('MM月DD日')
this.showDay = moment().format(this.dateFormatType)
this.startMeddleTime = moment().format(this.dateFormatType + ' HH:mm:ss')
this.$refs.time_line.play(moment().format(this.dateFormatType + ' HH:mm:ss'));
this.getDateBackTime(this.showDay)
this.isAutoPlay = true
},
stopPlay() {
......@@ -165,23 +182,10 @@ export default {
if (this.showDay == moment().format(this.dateFormatType) &&!type) {
this.isNoBack = true
this.startTime = moment().format('HH:mm:ss')
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.markTime = [{
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
} else {
this.isNoBack = false
this.startTimePickerOptions.selectableRange = '00:00:00 - 23:59:59'
this.markTime = [{
beginTime: this.showDay + ' 00:00:00',
endTime: this.showDay + ' 23:59:59',
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
}
this.getDateBackTime(this.showDay)
this.startMeddleTime = moment(this.showDay + ' ' + this.startTime).format(this.dateFormatType + ' HH:mm:ss')
if(!type) {
this.$emit('videoTimeChange',this.startMeddleTime)
......@@ -260,12 +264,7 @@ export default {
this.proTimeColumns()
}
if (moment(date).format(this.dateFormatType) == moment().format(this.dateFormatType)) {
this.markTime = [{
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
// this.getDateBackTime(moment().format(this.dateFormatType))
}
// 更新时间下拉选项
},
......
h5/src/views/pc/index.vue
<template>
<div class="video-page" :style="{height:isFullScreen?'100%':height?height:videoHeight+'px'}">
<!-- <div>
<el-button type="primary" @click="playWebVideo({gateUnid: '7c55b448-5857-11ee-8777-00163e143ecd'})">会议室</el-button>
<el-button type="primary" @click="playWebVideo({gateUnid: '85de13a8-5775-11ee-94ed-00163e143ecd'})">办公室</el-button>
<el-button type="primary" @click="playWebVideo({gateUnid: '85de1326-5775-11ee-94ed-00163e143ecd'})">大华</el-button>
</div> -->
<div class="video-box" :style="{height:isShowTime?'calc(100% - 128px)':'100%'}">
<div v-if="playerNum == 1" class="video-split-one">
<div v-if="videoObj.name" class="elRow">
......@@ -17,7 +22,7 @@
</div>
<div v-else class="video-split-box">
<div class="video-split-line">
<div class="video-split-one" @click="selectVideoChange(0)">
<div class="video-split-one" :class="[splitNum==0?'video-split-one-show':'']" @click="selectVideoChange(0)">
<div v-if="videoArrObj[0]&&videoArrObj[0].name" class="elRow">
<div class="gateName">
{{videoArrObj[0].name}}
......@@ -31,7 +36,7 @@
<p class="screenshot" @click="screenshot(0)"><i class="el-icon-camera"></i></p>
</div>
</div>
<div class="video-split-one" @click="selectVideoChange(1)">
<div class="video-split-one" :class="[splitNum==1?'video-split-one-show':'']" @click="selectVideoChange(1)">
<div v-if="videoArrObj[1]&&videoArrObj[1].name" class="elRow">
<div class="gateName">
{{videoArrObj[1].name}}
......@@ -47,7 +52,7 @@
</div>
</div>
<div class="video-split-line">
<div class="video-split-one" @click="selectVideoChange(2)">
<div class="video-split-one" :class="[splitNum==2?'video-split-one-show':'']" @click="selectVideoChange(2)">
<div v-if="videoArrObj[2]&&videoArrObj[2].name" class="elRow">
<div class="gateName">
{{videoArrObj[2].name}}
......@@ -61,7 +66,7 @@
<p class="screenshot" @click="screenshot(2)"><i class="el-icon-camera"></i></p>
</div>
</div>
<div class="video-split-one" @click="selectVideoChange(3)">
<div class="video-split-one" :class="[splitNum==3?'video-split-one-show':'']" @click="selectVideoChange(3)">
<div v-if="videoArrObj[3]&&videoArrObj[3].name" class="elRow">
<div class="gateName">
{{videoArrObj[3].name}}
......@@ -79,7 +84,7 @@
</div>
</div>
<div class="time-box" v-if="isShowTime">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @videoTimeSync="videoTimeSync" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit"/>
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @videoTimeSync="videoTimeSync" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit" :splitNum="splitNum"/>
</div>
</div>
</template>
......@@ -174,20 +179,18 @@ export default {
this.splitNum = obj.splitNum
}
console.log(obj)
if(this.$refs.videoTime) {
this.$refs.videoTime.stopPlay()
}
obj.watermarkText = obj.watermarkText||'';
if(this.playerNum == 4) {
this.videoArrObj[this.splitNum] = Object.assign({}, obj)
this.$forceUpdate()
this.getVideoAddress(obj,this.splitNum)
} else {
this.splitNum = 0
this.videoObj = Object.assign({}, obj);
this.$forceUpdate()
this.getVideoAddress(obj)
}
if(this.isShowTime) {
if(this.isShowTime&&this.isNoBack) {
this.$refs.videoTime.startPlay()
}
},
......@@ -221,7 +224,7 @@ export default {
} else {
this.$refs.vionPlayer.play(res.data.msg);
}
this.splitNumChange()
// this.splitNumChange()
}
})
},
......@@ -290,16 +293,16 @@ export default {
}
// 更新视频地址
if(this.playerNum == 4) {
if(this.videoArrObj[0]){
if(this.splitNum == 0){
this.getVideoAddress(this.videoArrObj[0],0)
}
if(this.videoArrObj[1]){
if(this.splitNum == 1){
this.getVideoAddress(this.videoArrObj[1],1)
}
if(this.videoArrObj[2]){
if(this.splitNum == 2){
this.getVideoAddress(this.videoArrObj[2],2)
}
if(this.videoArrObj[3]){
if(this.splitNum == 3){
this.getVideoAddress(this.videoArrObj[3],3)
}
} else {
......@@ -413,11 +416,12 @@ export default {
this.videoArrObj[val] = null
this.splitNum = val
} else {
this.splitNum = 0
this.$refs.vionPlayer.destroy();
}
if(this.playerNum == 1||(this.playerNum == 4&&!this.videoArrObj[0]&&!this.videoArrObj[1]&&!this.videoArrObj[2]&&!this.videoArrObj[3])) {
this.$refs.videoTime.stopPlay()
}
// if(this.playerNum == 1||(this.playerNum == 4&&!this.videoArrObj[0]&&!this.videoArrObj[1]&&!this.videoArrObj[2]&&!this.videoArrObj[3])) {
this.$refs.videoTime.stopPlay(this.splitNum)
// }
},
}
}
......@@ -467,8 +471,8 @@ export default {
top:0px;
left:0px;
z-index: 99;
height: 48px;
line-height: 48px;
height: 38px;
line-height: 38px;
display: none;
align-items: center;
justify-content: space-between;
......@@ -477,8 +481,8 @@ export default {
padding: 0 30px;
font-size: 18px;
.closeIcon{
height: 48px;
line-height: 48px;
height: 38px;
line-height: 38px;
cursor: pointer;
padding: 0 10px;
}
......@@ -503,6 +507,9 @@ export default {
position: relative;
border: 2px solid rgba(255,255,255,0.4);
}
.video-split-one-show{
border: 2px solid #409EFF;
}
}
}
</style>
h5/src/views/pc/pcdemo.vue
......@@ -2,17 +2,20 @@
<div>
<!-- 添加视频测试 -->
<div>
<el-button type="primary" @click="addPlayer({gateUnid: '7c55b448-5857-11ee-8777-00163e143ecd'})">办公室</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '7c55b448-5857-11ee-8777-00163e143ecd'})">会议室</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '85de13a8-5775-11ee-94ed-00163e143ecd'})">办公室</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '85de1326-5775-11ee-94ed-00163e143ecd'})">大华</el-button>
</div>
<iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="/#/vionplayer-web" frameborder="0"></iframe>
<indexPlayer id="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);"></indexPlayer>
<!-- <iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="/#/vionplayer-web" frameborder="0"></iframe> -->
</div>
</template>
<script>
// import indexPlayer from './index.vue';
import indexPlayer from './index.vue';
export default {
name: 'jplayerWebDemo',
components: {
// indexPlayer,
indexPlayer,
},
data() {
return {
......@@ -33,9 +36,9 @@ export default {
},
methods: {
addPlayer(obj) {
window.parent.document.getElementById('iframe').contentWindow.playWebVideo(obj)
// window.parent.document.getElementById('iframe').contentWindow.playWebVideo(obj)
// this.$refs.iframe.playWebVideo(obj)
this.$refs.iframe.playWebVideo(obj)
},
},
}
......
h5/vionPlayer.zip 0 → 100644
This file is too large to display.
h5/vionPlayer1.zip 0 → 100644
This file is too large to display.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!