Skip to content

蒋秀川 / miniProject

Go to a project
Commit 457834ca by 李乾广
Options

修改pc端组件

1 parent aa48bdd2
Inline Side-by-side
Showing 7 changed files with 224 additions and 76 deletions
h5/package.json
......@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.26.1",
"core-js": "^3.8.3",
"element-ui": "^2.15.14",
"less": "^4.2.0",
......
h5/src/api/http.js 0 → 100644
import axios from 'axios'
import { Toast } from 'vant';
const baseURL = 'https://store.keliuyun.com';
const Axios = axios.create({
baseURL: baseURL, // 因为我本地做了反向代理
timeout: 0,
// responseType: "json",
changeOrigin: true,//允许跨域
withCredentials: true, // 是否允许带cookie这些
headers: {
"Content-Type": "application/json;charset=UTF-8"
// 'Content-Type': 'application/x-www-form-urlencoded'
}
})
// 请求拦截器
Axios.interceptors.request.use(
config => {
return config;
}, error => {
console.error(error);
return Promise.reject(error.data.msg)
}
)
Axios.interceptors.response.use(
res => {
if (res.data && !res.data.success) {
if (res.data.ecode && res.data.ecode != 200) {
return res.data.enote;
} else if (res.status == 200) {
return res;
}
return Promise.reject(res.data.msg);
} else if (!res.data && res.status == 200) {
return res;
}
return res;
}
)
export default function(method, url, data = null, config = null, bodyDelete) {
method = method.toLowerCase()
if (method == 'post') {
return Axios.post(url, data, config)
} else if (method == 'get') {
let defaultParam = {
_t: Date.parse(new Date()) / 1000
}
return Axios.get(url, { params: {...defaultParam, ...data }, config })
} else if (bodyDelete) {
return Axios.delete(url, { data: data }, config)
} else if (method == 'delete') {
return Axios.delete(url, { params: data }, config)
} else if (method == 'put') {
return Axios.put(url, data, config)
} else {
console.error('unknown method' + method)
return false
}
}
\ No newline at end of file
h5/src/api/index.js 0 → 100644
import req from '@/api/http.js'
const tourApi = {
// 获取通道的视频直播与回放地址
getLiveAndPlaybackAddress(params, config){
return req('GET', `/patrol/patrolDeviceChannel/getLiveAndPlaybackAddress`, params, config)
},
// 云控制
ptzStart(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStart`, params, config)
},
ptzStop(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStop`, params, config)
},
}
export default tourApi;
\ No newline at end of file
h5/src/components/vionPlayer/index.vue
......@@ -47,6 +47,7 @@ export default {
}
},
mounted() {
console.log("this.playUrl", this.playUrl);
this.init();
},
unmounted() {
......@@ -54,6 +55,7 @@ export default {
},
methods:{
init(params = {}) {
console.log("this.playUrl", this.playUrl);
const options = Object.assign({
container: this.$refs.container,
decoder: '/jessibuca-pro/decoder-pro.js',
......@@ -102,7 +104,7 @@ export default {
this._jessibuca = new window.JessibucaPro(options);
this.registerEvent(this._jessibuca);
console.log("this.playUrl", this.playUrl);
if (this.playUrl) {
// 示例上有延迟写法
setTimeout(this.play(this.playUrl), 150);
......
h5/src/views/pc/index.vue
<template>
<div class="video-page" :style="{height:isFullScreen?'100%':allVideoHeight?allVideoHeight:videoHeight+'px'}">
<div class="video-page" :style="{height:isFullScreen?'100%':height?height:videoHeight+'px'}">
<div class="video-box" :style="{height:isShowTime?'calc(100% - 128px)':'100%'}">
<div v-if="playerNum == 1" class="video-split-one">
<div v-if="isShowTitle&&videoObj.channelId" class="elRow">
<div v-if="videoObj.name" class="elRow">
<div class="gateName">
{{videoObj.name||''}}
{{videoObj.name}}
</div>
<div class="closeIcon" @click="stopPlay">
<i class="el-icon-close"></i>
</div>
</div>
<j-player v-if="videoObj.channelId" ref="jPlayer" :type="jPlayerType" :channel-id="videoObj.channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoObj.prefixUrl" :player-address="videoObj.address" :watermark="params.watermark"/>
<vion-player v-if="videoObj.playUrl" ref="vionPlayer" :playUrl="videoObj.playUrl" :watermarkText="videoObj.watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp"/>
<div class="cameraTool" v-show="isShowJT">
<p class="screenshot" @click="screenshot()"><i class="el-icon-camera"></i></p>
</div>
......@@ -18,29 +18,29 @@
<div v-else class="video-split-box">
<div class="video-split-line">
<div class="video-split-one" @click="selectVideoChange(0)">
<div v-if="isShowTitle&&videoArrObj[0]&&videoArrObj[0].channelId" class="elRow">
<div v-if="videoArrObj[0]&&videoArrObj[0].name" class="elRow">
<div class="gateName">
{{videoArrObj[0].name||''}}
{{videoArrObj[0].name}}
</div>
<div class="closeIcon" @click="stopPlay(0)">
<i class="el-icon-close"></i>
</div>
</div>
<j-player ref="jPlayer0" v-if="videoArrObj[0]" :type="jPlayerType" :channel-id="videoArrObj[0].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[0].prefixUrl" :player-address="videoArrObj[0].address" :watermark="videoArrObj[0].watermark"/>
<vion-player ref="vionPlayer0" v-if="videoArrObj[0]&&videoArrObj[0].playUrl" :playUrl="videoArrObj[0].playUrl" :watermarkText="videoArrObj[0].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @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>
</div>
<div class="video-split-one" @click="selectVideoChange(1)">
<div v-if="isShowTitle&&videoArrObj[1]&&videoArrObj[1].channelId" class="elRow">
<div v-if="videoArrObj[1]&&videoArrObj[1].name" class="elRow">
<div class="gateName">
{{videoArrObj[1].name||''}}
{{videoArrObj[1].name}}
</div>
<div class="closeIcon" @click="stopPlay(1)">
<i class="el-icon-close"></i>
</div>
</div>
<j-player ref="jPlayer1" v-if="videoArrObj[1]" :type="jPlayerType" :channel-id="videoArrObj[1].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[1].prefixUrl" :player-address="videoArrObj[1].address" :watermark="videoArrObj[1].watermark"/>
<vion-player ref="vionPlayer1" v-if="videoArrObj[1]&&videoArrObj[1].playUrl" :playUrl="videoArrObj[1].playUrl" :watermarkText="videoArrObj[1].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @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>
......@@ -48,29 +48,29 @@
</div>
<div class="video-split-line">
<div class="video-split-one" @click="selectVideoChange(2)">
<div v-if="isShowTitle&&videoArrObj[2]&&videoArrObj[2].channelId" class="elRow">
<div v-if="videoArrObj[2]&&videoArrObj[2].name" class="elRow">
<div class="gateName">
{{videoArrObj[2].name||''}}
{{videoArrObj[2].name}}
</div>
<div class="closeIcon" @click="stopPlay(2)">
<i class="el-icon-close"></i>
</div>
</div>
<j-player ref="jPlayer2" v-if="videoArrObj[2]" :type="jPlayerType" :channel-id="videoArrObj[2].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[2].prefixUrl" :player-address="videoArrObj[2].address" :watermark="videoArrObj[2].watermark"/>
<vion-player ref="vionPlayer2" v-if="videoArrObj[2]&&videoArrObj[2].playUrl" :playUrl="videoArrObj[2].playUrl" :watermarkText="videoArrObj[2].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @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>
</div>
<div class="video-split-one" @click="selectVideoChange(3)">
<div v-if="isShowTitle&&videoArrObj[3]&&videoArrObj[3].channelId" class="elRow">
<div v-if="videoArrObj[3]&&videoArrObj[3].name" class="elRow">
<div class="gateName">
{{videoArrObj[3].name||''}}
{{videoArrObj[3].name}}
</div>
<div class="closeIcon" @click="stopPlay(3)">
<i class="el-icon-close"></i>
</div>
</div>
<j-player ref="jPlayer3" v-if="videoArrObj[3]" :type="jPlayerType" :channel-id="videoArrObj[3].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[3].prefixUrl" :player-address="videoArrObj[3].address" :watermark="videoArrObj[3].watermark"/>
<vion-player ref="vionPlayer3" v-if="videoArrObj[3]&&videoArrObj[3].playUrl" :playUrl="videoArrObj[3].playUrl" :watermarkText="videoArrObj[3].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @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>
......@@ -86,30 +86,42 @@
<script>
import videoTime from './videoTime.vue'
import jPlayer from '@/components/jPlayer';
import vionPlayer from '@/components/vionPlayer';
import moment from 'moment'
import tourApi from '@/api';
export default {
name: 'JPlayerWeb',
name: 'VionPlayerWeb',
components:{
videoTime,
jPlayer,
vionPlayer,
},
data() {
return {
videoArrObj:[],
isFullScreen:false,
jPlayerType:'live',
videoObj: {
channelId: '',
address: '52.130.155.147',
prefixUrl: '',
watermark: '',
gateUnid: '',
watermarkText: '',
name:'',
},
jPlayerTimeRange:[],
videoPlayTime:'',
videoBackEndTime:'',
isNoBack:true,
playerNum:1,
splitNum:0,
videoPlayTime:'',
panTiltList:{
up:0,
down:1,
left:2,
right:3,
leftUp:4,
leftDown:5,
rightUp:6,
rightDown:7,
zoomExpand:8,
zoomNarrow:9,
stop:-1
},
}
},
props:{
......@@ -119,7 +131,7 @@ export default {
default: true,
},
// 设置组件高度
allVideoHeight:{
height:{
type: String,
default: '',
},
......@@ -128,16 +140,21 @@ export default {
type: Boolean,
default: false,
},
// 是否显示头部标题栏，默认为false
isShowTitle: {
type: Boolean,
default: false,
},
// 是否支持四分屏，默认为true
isShowSplit: {
type: Boolean,
default: true,
},
// 是否显示视频操作区，默认为true
controlAutoHide: {
type: Boolean,
default: true,
},
// 是否显示视频操作区中的云台控制，默认为true
showPtz: {
type: Boolean,
default: true,
},
},
computed: {
videoHeight() {
......@@ -150,10 +167,6 @@ export default {
},
methods: {
playWebVideo(obj) {
if (!obj.address || !obj.channelId) {
console.error('传递URL参数有误，请确认 address 和 channelId 是否正确。');
return false
}
if(obj.splitNum >=0) {
this.splitNum = obj.splitNum
}
......@@ -161,22 +174,43 @@ export default {
if(this.$refs.videoTime) {
this.$refs.videoTime.stopPlay()
}
this.jPlayerTimeRange = [];
this.jPlayerType = 'live';
obj.prefixUrl = obj.prefixUrl||'';
obj.watermark = obj.watermark||'';
obj.watermarkText = obj.watermarkText||'';
if(this.playerNum == 4) {
this.videoArrObj[this.splitNum] = Object.assign({}, obj)
this.getVideoAddress(obj,this.splitNum)
} else {
this.videoObj = Object.assign({}, obj);
this.getVideoAddress(obj)
}
console.log(this.videoObj)
this.$forceUpdate()
if(this.isShowTime) {
this.$refs.videoTime.startPlay()
}
this.splitNumChange()
},
// 获取视频播放地址
getVideoAddress(obj,index) {
let par = {
gateUnid: obj.gateUnid,
}
if(!this.isNoBack){
par.startTime = obj.startTime?obj.startTime:this.videoPlayTime;
par.stopTime = obj.stopTime?obj.stopTime:this.videoBackEndTime;
}
tourApi.getLiveAndPlaybackAddress(par).then(res => {
console.log(res)
if (res.data&&res.data.code == 200) {
if(this.playerNum == 4) {
this.videoArrObj[index].playUrl = res.data.msg ? res.data.msg : '';
} else {
this.videoObj.playUrl = res.data.msg ? res.data.msg : '';
console.log(this.videoObj)
this.$forceUpdate()
// this.$refs.vionPlayer.play(res.data.msg);
}
}
})
},
// 分屏时选中屏数自动改变
splitNumChange() {
if(this.playerNum == 4) {
......@@ -193,30 +227,28 @@ export default {
},
allVideoExitFullScreen(){
this.isFullScreen = false
this.$emit('exitFullScreen')
},
allVideoFullScreen(val){
this.isFullScreen = true
this.$emit('fullScreen')
},
// 四分屏，单屏切换
splitScreenChange(val) {
if(val == 4) {
if(this.$refs.jPlayer) {
this.$refs.jPlayer.stopPlay();
if(this.$refs.vionPlayer) {
this.$refs.vionPlayer.stopPlay();
}
} else {
if(this.$refs.jPlayer0) {
this.$refs.jPlayer0.stopPlay();
if(this.$refs.vionPlayer0) {
this.$refs.vionPlayer0.stopPlay();
}
if(this.$refs.jPlayer1) {
this.$refs.jPlayer1.stopPlay();
if(this.$refs.vionPlayer1) {
this.$refs.vionPlayer1.stopPlay();
}
if(this.$refs.jPlayer2) {
this.$refs.jPlayer2.stopPlay();
if(this.$refs.vionPlayer2) {
this.$refs.vionPlayer2.stopPlay();
}
if(this.$refs.jPlayer3) {
this.$refs.jPlayer3.stopPlay();
if(this.$refs.vionPlayer3) {
this.$refs.vionPlayer3.stopPlay();
}
}
this.$refs.videoTime.stopPlay()
......@@ -231,18 +263,55 @@ export default {
},
// 时间线改变
videoTimeChange(val) {
this.videoPlayTime = val
let isNoBack = moment(this.videoPlayTime).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')
this.jPlayerType = isNoBack?'live':'playback'
if(!isNoBack){
let startTime = new Date(moment(this.videoPlayTime).format("YYYY-MM-DD HH:mm:ss")).getTime()
let endTime = new Date().getTime()
this.jPlayerTimeRange = [startTime,endTime]
this.isNoBack = val == moment().format('YYYY-MM-DD HH:mm:ss')
if(!this.isNoBack){
this.videoPlayTime = val
this.videoBackEndTime = moment().format('YYYY-MM-DD HH:mm:ss')
}
// 更新视频地址
if(this.playerNum == 4) {
this.getVideoAddress(this.videoArrObj[0],0)
this.getVideoAddress(this.videoArrObj[1],1)
this.getVideoAddress(this.videoArrObj[2],2)
this.getVideoAddress(this.videoArrObj[3],3)
} else {
this.getVideoAddress(this.videoObj)
}
},
// 云台控制接口调用
panTiltControl(val,gateUnid) {
let par = {
direction:this.panTiltList[val],
speed:2,
gateUnid:gateUnid
}
if(val == 'stop') {
tourApi.ptzStop(par).then(res => {})
} else {
tourApi.ptzStart(par).then(res => {})
}
},
panTiltControlComp(val){
this.panTiltControl(val,this.videoObj.gateUnid)
},
panTiltControlComp0(val){
this.panTiltControl(val,this.videoArrObj[0].gateUnid)
},
panTiltControlComp1(val){
this.panTiltControl(val,this.videoArrObj[1].gateUnid)
},
panTiltControlComp2(val){
this.panTiltControl(val,this.videoArrObj[2].gateUnid)
},
panTiltControlComp3(val){
this.panTiltControl(val,this.videoArrObj[3].gateUnid)
},
// 播放时间与时间线同步
videoTimeSync(val) {
this.videoPlayTime = val
this.videoBackEndTime = moment().format('YYYY-MM-DD HH:mm:ss')
},
// 暴露方法
......@@ -253,15 +322,15 @@ export default {
screenshot(num) {
let imgInfo = ''
if(num === 0) {
imgInfo = this.$refs.jPlayer0.screenshot()
imgInfo = this.$refs.vionPlayer0.screenshot()
} else if(num === 1) {
imgInfo = this.$refs.jPlayer1.screenshot()
imgInfo = this.$refs.vionPlayer1.screenshot()
} else if(num === 2) {
imgInfo = this.$refs.jPlayer2.screenshot()
imgInfo = this.$refs.vionPlayer2.screenshot()
} else if(num === 3) {
imgInfo = this.$refs.jPlayer3.screenshot()
imgInfo = this.$refs.vionPlayer3.screenshot()
} else {
imgInfo = this.$refs.jPlayer.screenshot()
imgInfo = this.$refs.vionPlayer.screenshot()
}
return imgInfo;
},
......@@ -272,24 +341,26 @@ export default {
stopPlay(val) {
if(val >=0) {
if(val === 0) {
this.$refs.jPlayer0.stopPlay();
this.$refs.vionPlayer0.stopPlay();
} else if(val === 1) {
this.$refs.jPlayer1.stopPlay();
this.$refs.vionPlayer1.stopPlay();
} else if(val === 2) {
this.$refs.jPlayer2.stopPlay();
this.$refs.vionPlayer2.stopPlay();
} else if(val === 3) {
this.$refs.jPlayer3.stopPlay();
this.$refs.vionPlayer3.stopPlay();
}
this.videoArrObj[val] = null
this.splitNum = val
} else {
this.$refs.jPlayer.stopPlay();
this.$refs.vionPlayer.stopPlay();
}
if(this.playerNum == 1||(this.playerNum == 4&&!this.videoArrObj[0]&&!this.videoArrObj[1]&&!this.videoArrObj[2]&&!this.videoArrObj[3])) {
this.$refs.videoTime.stopPlay()
}
},
}
}
......
h5/src/views/pc/pcdemo.vue
......@@ -2,8 +2,8 @@
<div>
<!-- 添加视频测试 -->
<div>
<el-button type="primary" @click="addPlayer({channelId: '20000000001310000008',address: '52.130.155.147',prefixUrl:'nvsdemo'})">添加视频一</el-button>
<el-button type="primary" @click="addPlayer({channelId: '20000000001310000008',address: '52.130.155.147',prefixUrl:'nvsdemo'})">添加视频二</el-button>
<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>
</div>
<iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="/nvsdemo/#/jplayer-web" frameborder="0"></iframe>
<!-- <iframe name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="http://192.168.1.117:8080/" frameborder="0"></iframe> -->
......
h5/src/views/pc/videoTime.vue
......@@ -309,7 +309,7 @@ export default {
this.mouseTimeMin = moment(date).format('mm')
this.mouseTimeSec = moment(date).format('ss')
this.isNoBack = moment(date).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')
this.$emit('videoTimeChange',date)
this.$emit('videoTimeChange',moment(date).format('YYYY-MM-DD HH:mm:ss'))
},
changeDate(date, status) {
// console.log("选择时间：" + date + " 播放状态：" + status);
......@@ -322,7 +322,7 @@ export default {
this.$forceUpdate()
}
// console.log(this.nowPlayTime)
this.$emit('videoTimeSync',date)
this.$emit('videoTimeSync',moment(date).format('YYYY-MM-DD HH:mm:ss'))
if (moment(date).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
this.markTime = [{
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!