Skip to content

蒋秀川 / miniProject

Go to a project
Commit c2cb1096 by 李乾广
Options

修改bug

1 parent a1fdcce6
Inline Side-by-side
Showing 6 changed files with 103 additions and 68 deletions
h5/public/index.html
......@@ -6,8 +6,9 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="./jessibuca-pro/jessibuca-pro-demo.js"></script>
<script src="./jessibuca-pro/jessibuca-pro-talk-demo.js"></script>
<script src="/jessibuca-pro/jessibuca-pro-demo.js"></script>
<script src="/jessibuca-pro/jessibuca-pro-talk-demo.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
<body>
<noscript>
......
h5/public/jessibuca-pro/jessibuca-pro-demo.js
This diff could not be displayed because it is too large.
h5/src/components/vionPlayer/index.vue
......@@ -25,6 +25,10 @@ export default {
type: Boolean,
default: true,
},
isXCXPage: {
type: Boolean,
default: false,
},
},
data() {
return {
......@@ -52,9 +56,9 @@ export default {
},
methods:{
init(url, params = {}) {
const options = Object.assign({
let options = Object.assign({
container: this.$refs.container,
decoder: 'jessibuca-pro/decoder-pro.js',
decoder: '/jessibuca-pro/decoder-pro.js',
text: '', // TODO: 功能暂不清楚
keepScreenOn: true, // 屏幕常亮
isResize: false,
......@@ -70,7 +74,7 @@ export default {
// useWCS: false,
// useSIMD: checkSupportSIMD(),
// wcsUseVideoRender: checkSupportWCSHevc(),
// useWebFullScreen: true, // ios可能不支持系统级别全屏，可能要使用此配置
useWebFullScreen: this.isXCXPage, // ios可能不支持系统级别全屏，可能要使用此配置
timeout: 10, // 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
// 按钮和界面
......@@ -84,13 +88,13 @@ export default {
operateBtns: {
fullscreen: true,
screenshot: false,
play: true,
audio: true,
play: !this.isXCXPage,
audio: !this.isXCXPage,
ptz: this.showPtz, // 云台
zoom: true,
performance: true,
record: true, // 录制
scale: true, // 显示模式：拉伸、缩放、正常
zoom: !this.isXCXPage,// 电子放大
performance: !this.isXCXPage, // 视频流信息展示
record: !this.isXCXPage, // 录制
scale: !this.isXCXPage, // 显示模式：拉伸、缩放、正常
quality: false, // 视频清晰度
},
extendOperateBtns: [],
......@@ -105,7 +109,7 @@ export default {
// ptzApertureShow: true, // 光圈
ptzFocusShow: true,
});
console.log('init-options', options);
this._jessibuca = new window.JessibucaPro(options);
......
h5/src/views/extension/index.vue
<template>
<div class="extension-page">
<div class="j-player-wrapper">
<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :hideControls="true" :showPtz="false"/>
<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :hideControls="false" :showPtz="false" :isXCXPage="true"/>
<!-- <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"/>
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType"/>
</div>
</div>
......@@ -56,6 +57,8 @@ export default {
stop:-1
},
nowPanTilt:'',
terminalType:'',
dateFormatType:'YYYY-MM-DD',
}
},
created() {
......@@ -69,13 +72,13 @@ export default {
methods: {
// 时间线改变
videoTimeChange(val) {
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')
let valTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
let nowTime = moment().format('YYYY-MM-DD HH:mm:ss')
if(valTime != nowTime){
this.getVideoAddress(valTime,nowTime)
} else {
this.getVideoAddress()
}
this.getVideoAddress(startTime,stopTime)
},
// 云台控制
ptzControlClick(type) {
......@@ -97,7 +100,7 @@ export default {
tourApi.ptzStart(par).then(res => {
console.log(res)
if(res.data&&res.data.code != 200) {
Toast.fail(res.data.msg||'云台当前操作失败');
Toast.fail('云台当前操作失败');
}
})
}
......@@ -112,6 +115,10 @@ export default {
}
});
// this.params = obj
console.log(this.params)
document.title = this.params.gateName||'视频详情'
this.terminalType = this.params.terminalType
this.dateFormatType = this.terminalType == 'ios'||this.terminalType == 'mac' ? 'YYYY/MM/DD':'YYYY-MM-DD';
if(this.params.gateUnid) {
this.getVideoAddress()
}
......@@ -146,10 +153,13 @@ export default {
// 暴露方法
// 截图方法
screenshot() {
return this.$refs.vionPlayer.screenshot().then(data => {
return data;
this.$refs.vionPlayer.screenshot().then(data => {
console.log(data)
wx.miniProgram.postMessage({ data:{src:data} })
// Toast.success('截图成功');
}).catch(err => {
})
},
// 关闭视频播放
stopPlay() {
......@@ -164,5 +174,15 @@ export default {
width: 100vw;
height: 56vw;
overflow: hidden;
position: relative;
z-index: 1;
}
.screen-shot-img{
position: absolute;
right:53px;
bottom: 10px;
width: 16px;
height: 16px;
z-index: 1000;
}
</style>
h5/src/views/extension/timeline-canvas-wx.vue
......@@ -45,6 +45,8 @@ export default {
},
// 中间的时间,
startMeddleTime: String,
// 日期格式
dateFormatType: String,
// 时间范围
timeRange: {
type: [Array, String],
......@@ -209,7 +211,7 @@ export default {
}
this.interval_play = setInterval(() => {
//中间时间增加1s
this.meddleTime = moment(this.meddleTime).add(1, "s").format("YYYY-MM-DD HH:mm:ss");
this.meddleTime = moment(this.meddleTime).add(1, "s").format(this.dateFormatType + " HH:mm:ss");
let status =
this.realTimeRange[1] && new Date(this.meddleTime).getTime() >= new Date(this.realTimeRange[1]).getTime()
? "end"
......@@ -302,7 +304,7 @@ export default {
if (!this.isMove) {
let date = e.offsetX * this.px_second * 1000 + this.firstTime;
date = this.boundary_time(date);
let _date = moment(date).format("YYYY-MM-DD HH:mm:ss");
let _date = moment(date).format(this.dateFormatType + " HH:mm:ss");
this.meddleTime = _date;
this.drow();
}
......@@ -326,7 +328,7 @@ export default {
// 点击时的中间时间 + 坐标距离差转换后的时间 = 移动后的中间时间
let date = new Date(this.mouseDownMeddleTime).getTime() + offset * this.px_second * 1000;
date = this.boundary_time(date);
this.meddleTime = moment(date).format("YYYY-MM-DD HH:mm:ss");
this.meddleTime = moment(date).format(this.dateFormatType + " HH:mm:ss");
this.$emit("mouseMove", this.meddleTime);
},
drow() {
......@@ -389,10 +391,9 @@ export default {
this.ctx.fillStyle = this.colors.scaleLine;
this.ctx.font = `12px serif`;
if (i==0&&time == "00:00") {
// let show_time = moment(date).format("YYYY-MM-DD");
this.ctx.fillText(time, i, 32);
} else if (time == "00:00") {
// let show_time = moment(date).format("YYYY-MM-DD");
this.ctx.fillText(time, i- 30, 32);
} else if (this.showTime(time)) {
this.ctx.fillText(time, i - 15, 32);
......@@ -407,10 +408,10 @@ export default {
if (this.realTimeRange[0] && this.realTimeRange[1]) {
time = moment(
(new Date(this.realTimeRange[0]).getTime() + new Date(this.realTimeRange[1]).getTime()) / 2
).format("YYYY-MM-DD HH:mm:ss");
).format(this.dateFormatType + " HH:mm:ss");
}
//设置默认中间时间（优先级：startMeddleTime参数指定>按有可活动时间范围计算>当前时间）
this.meddleTime = this.startMeddleTime || time || moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
this.meddleTime = this.startMeddleTime || time || moment(new Date()).format(this.dateFormatType + " HH:mm:ss");
},
//获取刻度上的第一个时间
getFirstLineTime() {
......@@ -418,7 +419,7 @@ export default {
//第一个时间不一定刚好落在刻度上，计算少了多少分才能到第一个刻度上（开始位置留白）
let remainder = this.scaleLine_minute - (start.minute() % this.scaleLine_minute);
remainder = remainder == this.scaleLine_minute ? 0:remainder;
return start.add(remainder, "minutes").format("YYYY-MM-DD HH:mm");
return start.add(remainder, "minutes").format(this.dateFormatType + " HH:mm");
},
// 刻度时间显示(按级别显示)
showTime(time) {
......@@ -563,7 +564,6 @@ export default {
// setTimeRange(timeRange) {
// this.realTimeRange = timeRange || this.timeRange;
// if (typeof this.realTimeRange == "string") {
// let date = this.realTimeRange ? moment(this.realTimeRange).format("YYYY-MM-DD") : moment().format("YYYY-MM-DD");
// this.realTimeRange = [date + " 00:00:00", date + " 23:59:59:59"];
// }
// },
......@@ -587,7 +587,7 @@ export default {
// 计算timeRange 兼容string |Array转换
realTimeRange() {
if (typeof this.timeRange == "string") {
let date = this.timeRange ? moment(this.timeRange).format("YYYY-MM-DD") : moment().format("YYYY-MM-DD");
let date = this.timeRange ? moment(this.timeRange).format(this.dateFormatType) : moment().format(this.dateFormatType);
return [date + " 00:00:00", date + " 23:59:59:59"];
} else {
return this.timeRange;
......
h5/src/views/extension/videoTime.vue
......@@ -4,7 +4,7 @@
<!-- 时间轴 -->
<div class="time-axis">
<div class="timeline-canvas-box">
<TimeLineCanvas id="timeline-canvas" ref="time_line" @click="clickCanvas" @change="changeDate" :mark-time="markTime" :time-range="timeRange" :isAutoPlay="isAutoPlay" :startMeddleTime="startMeddleTime" @mouseMove="mouseMoveDate"/>
<TimeLineCanvas id="timeline-canvas" ref="time_line" @click="clickCanvas" @change="changeDate" :mark-time="markTime" :time-range="timeRange" :isAutoPlay="isAutoPlay" :startMeddleTime="startMeddleTime" @mouseMove="mouseMoveDate" :dateFormatType="dateFormatType"/>
</div>
</div>
<!-- 日期操作区 -->
......@@ -64,6 +64,7 @@
<script>
import TimeLineCanvas from "./timeline-canvas-wx.vue";
import moment from "moment";
import tourApi from '@/api';
export default {
name:'videoTime',
data() {
......@@ -72,7 +73,7 @@ export default {
selectableRange: '00:00:00 - 00:00:01'
},
showDayStr: moment().format('MM月DD日'),
showDay: moment().format('YYYY-MM-DD'),
showDay: '',
showDaySelectShow:false,
showTimeSelectShow:false,
defaultIndex:'',
......@@ -90,59 +91,68 @@ export default {
isNoBack:true,
maxDay: new Date(),
minDay: new Date(2022,1,1),
minDay: new Date(2023,8,1),
ptzControlShow:false,
isCanFastRight:false,
timeColumns:[],
ptzControlType:'',
playDateArr:[],
}
},
props:['dateFormatType'],
components: {
TimeLineCanvas,
},
mounted() {
let that = this
this.timeRange = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
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('YYYY-MM-DD HH:mm:ss')
this.startMeddleTime = moment().format(this.dateFormatType + ' HH:mm:ss')
this.proTimeColumns()
},
beforeDestroy() {
this.stopPlay()
},
methods: {
// 获取可播放日期列表
getPlayDate() {
tourApi.ptzStop(par).then(res => {
console.log(res)
})
},
startPlay() {
if(this.isAutoPlay) {
this.stopPlay()
}
this.isNoBack = true
this.timeRange = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
this.timeRange = [moment().format(this.dateFormatType + ' 00:00:00'), moment().format(this.dateFormatType + ' 23:59:59')]
this.markTime = [{
beginTime: moment().format('YYYY-MM-DD 00:00:00'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
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('YYYY-MM-DD')
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
this.$refs.time_line.play(moment().format('YYYY-MM-DD HH:mm:ss'));
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.isAutoPlay = true
},
stopPlay() {
this.isAutoPlay = false
this.isNoBack = true
this.markTime = []
this.timeRange = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
this.timeRange = [moment().format(this.dateFormatType + ' 00:00:00'), moment().format(this.dateFormatType + ' 23:59:59')]
this.startTime = moment().format('HH:mm:ss')
this.showDayStr = moment().format('MM月DD日')
this.showDay = moment().format('YYYY-MM-DD')
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
this.showDay = moment().format(this.dateFormatType)
this.startMeddleTime = moment().format(this.dateFormatType + ' HH:mm:ss')
if(this.$refs.time_line) {
this.$refs.time_line.stop();
}
......@@ -151,14 +161,14 @@ export default {
console.log(val)
this.showDaySelectShow = false
this.showDayStr = moment(val).format('MM月DD日')
this.showDay = moment(val).format('YYYY-MM-DD')
if (this.showDay == moment().format('YYYY-MM-DD') &&!type) {
this.showDay = moment(val).format(this.dateFormatType)
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('YYYY-MM-DD 00:00:00'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
......@@ -172,17 +182,17 @@ export default {
text: "",
}]
}
this.startMeddleTime = moment(this.showDay + ' ' + this.startTime).format('YYYY-MM-DD HH:mm:ss')
this.startMeddleTime = moment(this.showDay + ' ' + this.startTime).format(this.dateFormatType + ' HH:mm:ss')
if(!type) {
this.$emit('videoTimeChange',this.startMeddleTime)
}
if(this.timeAccuracy == '24') {
this.timeRange = [this.showDay + ' 00:00:00', this.showDay + ' 23:59:59']
} else {
let startTime = moment(this.startMeddleTime).subtract((this.timeAccuracy/2), "hours").format('YYYY-MM-DD HH:mm:ss')
let endTime = moment(this.startMeddleTime).add((this.timeAccuracy/2), "hours").format('YYYY-MM-DD HH:mm:ss')
startTime = moment(startTime).format('YYYY-MM-DD') != this.showDay?this.showDay + ' 00:00:00':startTime;
endTime = moment(endTime).format('YYYY-MM-DD') != this.showDay?this.showDay + ' 23:59:59':endTime;
let startTime = moment(this.startMeddleTime).subtract((this.timeAccuracy/2), "hours").format(this.dateFormatType + ' HH:mm:ss')
let endTime = moment(this.startMeddleTime).add((this.timeAccuracy/2), "hours").format(this.dateFormatType + ' HH:mm:ss')
startTime = moment(startTime).format(this.dateFormatType) != this.showDay?this.showDay + ' 00:00:00':startTime;
endTime = moment(endTime).format(this.dateFormatType) != this.showDay?this.showDay + ' 23:59:59':endTime;
this.timeRange = [startTime, endTime]
}
this.nowPlayTime = moment(this.startMeddleTime).format('HH:mm:ss')
......@@ -194,10 +204,10 @@ export default {
startTimeChange(val) {
this.showTimeSelectShow = false
this.startTime = val
this.startMeddleTime = moment(this.showDay + ' ' + val).format('YYYY-MM-DD HH:mm:ss')
this.startMeddleTime = moment(this.showDay + ' ' + val).format(this.dateFormatType + ' HH:mm:ss')
this.$emit('videoTimeChange',this.startMeddleTime)
this.nowPlayTime = moment(val).format('HH:mm:ss')
this.isNoBack = this.startMeddleTime == moment().format('YYYY-MM-DD HH:mm:ss')
this.isNoBack = this.startMeddleTime == moment().format(this.dateFormatType + ' HH:mm:ss')
this.ptzControlShow = false
this.isCanFast()
......@@ -218,7 +228,7 @@ export default {
// 返回实时
backRealTime() {
this.startTime = moment().format('HH:mm:ss')
this.showDayChange(moment().format('YYYY-MM-DD'))
this.showDayChange(moment().format(this.dateFormatType))
this.ptzControlShow = false
this.isCanFastRight = false
},
......@@ -227,9 +237,9 @@ export default {
clickCanvas(date) {
// console.log(date);
this.startTime = moment(date).format('HH:mm:ss')
this.isNoBack = moment(date).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')
this.isNoBack = moment(date).format(this.dateFormatType + ' HH:mm:ss') == moment().format(this.dateFormatType + ' HH:mm:ss')
this.ptzControlShow = false
this.$emit('videoTimeChange',moment(date).format('YYYY-MM-DD HH:mm:ss'))
this.$emit('videoTimeChange',moment(date).format(this.dateFormatType + ' HH:mm:ss'))
this.isCanFast()
},
changeDate(date, status) {
......@@ -243,16 +253,16 @@ export default {
if(this.startTime == '23:59:59') {
setTimeout(()=>{
this.startTime = '00:00:00'
this.showDayChange(moment(date).add(1,'days').format('YYYY-MM-DD'),'start')
this.$refs.time_line.play(moment(date).add(1,'days').format('YYYY-MM-DD 00:00:00'));
this.showDayChange(moment(date).add(1,'days').format(this.dateFormatType),'start')
this.$refs.time_line.play(moment(date).add(1,'days').format(this.dateFormatType + ' 00:00:00'));
},900)
} else {
this.proTimeColumns()
}
if (moment(date).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
if (moment(date).format(this.dateFormatType) == moment().format(this.dateFormatType)) {
this.markTime = [{
beginTime: moment().format('YYYY-MM-DD 00:00:00'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
......@@ -270,7 +280,7 @@ export default {
let maxHour = 23
let maxMin = 59
let maxSec = 59
if (this.showDay == moment().format('YYYY-MM-DD')) {
if (this.showDay == moment().format(this.dateFormatType)) {
let nowDate = new Date()
maxHour = nowDate.getHours()
maxMin = nowDate.getMinutes()
......@@ -330,7 +340,7 @@ export default {
// 快退/快进
fastChangeStartTime(val) {
let newTime = val>0?moment(this.showDay + ' ' + this.startTime).add(val, "seconds").format('YYYY-MM-DD HH:mm:ss'):moment(this.showDay + ' ' + this.startTime).subtract(val*-1, "seconds").format('YYYY-MM-DD HH:mm:ss');
let newTime = val>0?moment(this.showDay + ' ' + this.startTime).add(val, "seconds").format(this.dateFormatType + ' HH:mm:ss'):moment(this.showDay + ' ' + this.startTime).subtract(val*-1, "seconds").format(this.dateFormatType + ' HH:mm:ss');
let newDay = newTime.slice(0,10)
if(newDay == this.showDay) {
this.startTimeChange(newTime.slice(11))
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!