Skip to content

蒋秀川 / miniProject

Go to a project
Commit b5c4d73f by 李乾广
Options

修改bug

1 parent ccdd4d5d
Inline Side-by-side
Showing 4 changed files with 89 additions and 49 deletions
h5/src/views/extension/index.vue
<template>
<div class="extension-page">
<div class="j-player-wrapper">
<j-player ref="jplay"
:type="playerType"
:prefix-url="params.prefixUrl"
:watermark-text="params.watermark"
:player-address="params.address"
:channel-id="params.channelId"
:datetime-range="datetimeRange"
/>
<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :controlAutoHide="false" :showPtz="false"/>
</div>
<!-- 时间线组件 -->
<div class="extension-time-box">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" @ptzControlStop="ptzControlStop"/>
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick"/>
</div>
</div>
......@@ -21,9 +13,10 @@
<script>
import { getUrlParams } from './utils';
import JPlayer from '@/components/jPlayer';
import vionPlayer from '@/components/vionPlayer';
import videoTime from './videoTime';
import moment from "moment";
import tourApi from '@/api';
/**
* 此部分负责：
* 1. iframe通信postmessage
......@@ -33,68 +26,118 @@ import moment from "moment";
export default {
name: 'JPlayerExtension',
components: {
JPlayer,
vionPlayer,
videoTime,
},
data() {
return {
playerType: 'live',
isNoBack: true,
datetimeRange: [],
params: {
// channelId: '20000000001310000011',
channelId: '',
address: '52.130.155.147',
prefixUrl: '',
watermark: '',
gateUnid: '',
watermarkText: '',
},
panTiltList:{
up:0,
down:1,
left:2,
right:3,
leftUp:4,
leftDown:5,
rightUp:6,
rightDown:7,
zoomExpand:8,
zoomNarrow:9,
focusNear:10,
focusFar:11,
stop:-1
},
nowPanTilt:'',
}
},
created() {
console.log(window.JessibucaPro)
this.init();
},
methods: {
// 时间线改变
videoTimeChange(val) {
this.playerType = moment(val).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')?'live':'playback';
if(this.playerType == 'playback'){
this.datetimeRange = [new Date(moment(val).format("YYYY-MM-DD HH:mm:ss")).getTime(),new Date().getTime()]
let startTime = null
let stopTime = null
if(moment(val).format('YYYY-MM-DD HH:mm:ss') != moment().format('YYYY-MM-DD HH:mm:ss')){
startTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
stopTime = moment().format('YYYY-MM-DD HH:mm:ss')
}
this.getVideoAddress(startTime,stopTime)
},
// 云台控制
ptzControlClick(type) {
console.log(type)
// this.$refs.jplay.ptzController(type);
},
// 云台控制结束
ptzControlStop() {
// this.$refs.jplay.ptzController('stop');
if(type != 'stop') {
this.nowPanTilt = this.panTiltList[type]
}
let par = {
direction:this.panTiltList[type],
speed:2,
gateUnid:this.params.gateUnid
}
if(type == 'stop') {
par.direction = this.nowPanTilt
tourApi.ptzStop(par).then(res => {
console.log(res)
})
} else {
tourApi.ptzStart(par).then(res => {
console.log(res)
if(res.data&&res.data.code != 200) {
this.$message({
message: res.data.msg||'云台当前操作失败',
type: 'warning'
});
}
})
}
},
init() {
// 通过URL获取相关参数
const urlParamsMap = getUrlParams(window.location.hash);
console.log('urlParamsMap', urlParamsMap);
Object.keys(this.params).forEach(key => {
if (urlParamsMap[key]) {
this.params[key] = urlParamsMap[key];
}
});
if (!this.params.address || !this.params.channelId) {
if (!this.params.gateUnid) {
console.error('传递URL参数有误，请确认 address 和 channelId 是否正确。');
}
this.getVideoAddress()
},
// 获取视频播放地址
getVideoAddress(startTime,stopTime) {
let par = {
gateUnid: this.params.gateUnid,
startTime:startTime?startTime:null,
stopTime:stopTime?stopTime:null,
}
tourApi.getLiveAndPlaybackAddress(par).then(res => {
console.log(res)
if (res.data&&res.data.code == 200) {
this.$refs.vionPlayer.play(res.data.msg);
}
})
},
// 暴露方法
// 截图方法
screenshot() {
return this.$refs.jplay.screenshot();
this.$refs.vionPlayer.screenshot().then(data => {
return data;
}).catch(err => {
})
},
// 关闭视频播放
stopPlay() {
return this.$refs.jplay.stopPlay();
this.$refs.vionPlayer.destroy();
},
},
}
......
h5/src/views/extension/videoTime.vue
......@@ -41,17 +41,16 @@
<div class="ptz-control-box" v-if="ptzControlShow">
<div class="ptz-control-left-box" :class="[ptzControlType=='left'?'ptz-left':ptzControlType=='top'?'ptz-top':ptzControlType=='right'?'ptz-right':ptzControlType=='bottom'?'ptz-bottom':'']">
<div class="ptz-control-left" @mousedown="ptzControlOneClick('left')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('left')" @touchend="ptzControlStop"></div>
<div class="ptz-control-top" @mousedown="ptzControlOneClick('top')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('top')" @touchend="ptzControlStop"></div>
<div class="ptz-control-top" @mousedown="ptzControlOneClick('up')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('up')" @touchend="ptzControlStop"></div>
<div class="ptz-control-right" @mousedown="ptzControlOneClick('right')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('right')" @touchend="ptzControlStop"></div>
<div class="ptz-control-bottom" @mousedown="ptzControlOneClick('bottom')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('bottom')" @touchend="ptzControlStop"></div>
<div class="ptz-control-bottom" @mousedown="ptzControlOneClick('down')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('down')" @touchend="ptzControlStop"></div>
<div class="ptz-control-content"></div>
</div>
<div class="ptz-control-right-box">
<div class="ptz-control-jia" @mousedown="ptzControlOneClick('jia')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('jia')" @touchend="ptzControlStop">+</div>
<div class="ptz-control-jian" @mousedown="ptzControlOneClick('jian')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('jian')" @touchend="ptzControlStop">-</div>
<div class="ptz-control-jia" @mousedown="ptzControlOneClick('zoomExpand')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomExpand')" @touchend="ptzControlStop">+</div>
<div class="ptz-control-jian" @mousedown="ptzControlOneClick('zoomNarrow')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomNarrow')" @touchend="ptzControlStop">-</div>
</div>
</div>
<!-- 日历下拉框 -->
<van-calendar v-model="showDaySelectShow" @confirm="showDayChange" color="rgb(1,167,245)" :min-date="minDay" :max-date="maxDay" row-height="40" :show-subtitle="false"/>
<!-- 时间下拉框 -->
......@@ -326,7 +325,7 @@ export default {
// 云台控制结束
ptzControlStop() {
this.ptzControlType = ''
this.$emit('ptzControlStop')
this.$emit('ptzControlClick','stop')
},
// 快退/快进
......
h5/src/views/pc/index.vue
......@@ -10,7 +10,7 @@
<i class="el-icon-close"></i>
</div>
</div>
<vion-player v-if="videoObj.gateUnid" ref="vionPlayer" :watermarkText="videoObj.watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp"/>
<vion-player v-if="videoObj.gateUnid" ref="vionPlayer" :watermarkText="videoObj.watermarkText" :controlAutoHide="controlAutoHide" :showPtz="isNoBack&&showPtz?true:false" @ptz-control="panTiltControlComp"/>
<div class="cameraTool" v-show="isShowJT">
<p class="screenshot" @click="screenshot()"><i class="el-icon-camera"></i></p>
</div>
......@@ -26,7 +26,7 @@
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer0" v-if="videoArrObj[0]" :watermarkText="videoArrObj[0].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp0"/>
<vion-player ref="vionPlayer0" v-if="videoArrObj[0]" :watermarkText="videoArrObj[0].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="isNoBack&&showPtz?true:false" @ptz-control="panTiltControlComp0"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[0]">
<p class="screenshot" @click="screenshot(0)"><i class="el-icon-camera"></i></p>
</div>
......@@ -40,7 +40,7 @@
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer1" v-if="videoArrObj[1]" :watermarkText="videoArrObj[1].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp1"/>
<vion-player ref="vionPlayer1" v-if="videoArrObj[1]" :watermarkText="videoArrObj[1].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="isNoBack&&showPtz?true:false" @ptz-control="panTiltControlComp1"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[1]">
<p class="screenshot" @click="screenshot(1)"><i class="el-icon-camera"></i></p>
</div>
......@@ -56,7 +56,7 @@
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer2" v-if="videoArrObj[2]" :watermarkText="videoArrObj[2].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp2"/>
<vion-player ref="vionPlayer2" v-if="videoArrObj[2]" :watermarkText="videoArrObj[2].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="isNoBack&&showPtz?true:false" @ptz-control="panTiltControlComp2"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[2]">
<p class="screenshot" @click="screenshot(2)"><i class="el-icon-camera"></i></p>
</div>
......@@ -70,7 +70,7 @@
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer3" v-if="videoArrObj[3]" :watermarkText="videoArrObj[3].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp3"/>
<vion-player ref="vionPlayer3" v-if="videoArrObj[3]" :watermarkText="videoArrObj[3].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="isNoBack&&showPtz?true:false" @ptz-control="panTiltControlComp3"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[3]">
<p class="screenshot" @click="screenshot(3)"><i class="el-icon-camera"></i></p>
</div>
......@@ -164,8 +164,6 @@ export default {
if(obj.showPtz !== undefined&&obj.showPtz !== null) {
this.showPtz = obj.showPtz
}
console.log(this.controlAutoHide)
console.log(this.showPtz)
},
playWebVideo(obj) {
if(obj.splitNum >=0) {
......
h5/src/views/pc/pcdemo.vue
......@@ -2,8 +2,8 @@
<div>
<!-- 添加视频测试 -->
<div>
<el-button type="primary" @click="addPlayer({gateUnid: '85de13a8-5775-11ee-94ed-00163e143ecd'})">河南分公司--办公室--办公室监控</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '85de1aec-5775-11ee-94ed-00163e143ecd',watermarkText:'Demo Store'})">Demo Store--客流相机-入口1</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '85de1326-5775-11ee-94ed-00163e143ecd'})">河南分公司--办公室--办公室监控</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '85de1326-5775-11ee-94ed-00163e143ecd',watermarkText:'Demo Store'})">Demo Store--客流相机-入口1</el-button>
</div>
<indexPlayer ref="iframe"></indexPlayer>
<!-- <iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="/nvsdemo/#/jplayer-web" frameborder="0"></iframe> -->
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!