Skip to content

蒋秀川 / miniProject

Go to a project
Commit 5bc31f1b by 李乾广
Options

修改bug

1 parent 457925f2
Inline Side-by-side
Showing 4 changed files with 89 additions and 37 deletions
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
......@@ -2,6 +2,10 @@
<div ref="container"
:data-player-type="this.playerType"
:class="containerClassName"
v-loading="playLoading"
element-loading-text="加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<div v-if="previewStyles" class="vion-player-preview" :style="previewStyles"></div>
</div>
......@@ -48,9 +52,15 @@ export default {
type: String,
default: '',
},
// 预览图片地址
watermarkOpacity: {
type: String,
default: '0.3',
},
},
data() {
return {
playLoading:true,
// eslint-disable-next-line
_jessibuca: null,
playOriginUrl: '',
......@@ -82,6 +92,9 @@ export default {
},
mounted() {
this.init(this.playUrl);
setTimeout(()=>{
this.playLoading = false;
},10000)
// console.log('mounted', window.JessibucaPro.EVENTS);
},
beforeDestroy() {
......@@ -93,6 +106,7 @@ export default {
container: this.$refs.container,
useWebFullScreen: this.isXCXPage,
fullscreenWatermarkConfig: {
opacity:this.watermarkOpacity*1||0.3,
text: this.watermarkText || '',
},
operateBtns: {
......@@ -112,7 +126,6 @@ export default {
console.log('_jessibuca', this._jessibuca);
this.registerEvent(this._jessibuca);
if (url) {
// 示例上有延迟写法
this.delayPlay(url);
......@@ -125,19 +138,26 @@ export default {
this.player.height = data.height;
});
/* playerIns.on('play', (flag) => {
console.log('on-play', flag);
this.playing = true;
playerIns.on('play', (flag) => {
// console.log('on-play', flag);
// this.playing = true;
});
playerIns.on('pause', (flag) => {
console.log('on-pause', flag);
this.playing = false;
}); */
// console.log('on-pause', flag);
// this.playing = false;
});
// 断线重连
playerIns.on(JessibucaPro.EVENTS.playFailedAndPaused, (e) => {
console.log('playFailedAndPaused', e);
this.replay();
let isLoad = window.localStorage.getItem('isLoad')
if(isLoad&&isLoad>0) {
window.localStorage.setItem('isLoad',0)
} else {
window.localStorage.setItem('isLoad',1)
window.location.reload();
}
// this.replay();
});
playerIns.on(JessibucaPro.EVENTS.ptz, (arrow) => {
......@@ -172,10 +192,11 @@ export default {
this._jessibuca.playback(url, getPlaybackConfig());
this.playerType = 'playback';
} else {
this._jessibuca.play(url);
this._jessibuca.play(url+'123');
this.playerType = 'live';
}
this.playOriginUrl = url;
this.playLoading = false;
}, 150);
},
// 获取是否是回放状态
......@@ -213,7 +234,7 @@ export default {
this.delayPlay(url, playbackStatus);
}
} else {
console.error('The url is not valid');
// console.error('The url is not valid');
}
},
replay(url) {
......@@ -232,7 +253,7 @@ export default {
return this._jessibuca.destroy().then(() => {
// this._jessibuca = null;
}).catch(() => {
return Promise.reject(new Error('destruction failed'));
return Promise.reject(new Error('请稍后重试'));
});
} else {
return Promise.resolve(true);
......@@ -261,7 +282,7 @@ export default {
const isPlaying = this._jessibuca.isPlaying();
console.log('screenshot', isPlaying);
if (!this.player.height || !this.player.width || !isPlaying) {
reject(new Error('invaild data'));
reject(new Error('播放失败，请重试！'));
}
// 创建一个新的图片对象
......@@ -280,7 +301,7 @@ export default {
resolve(watermarkedBase64);
};
image.error = function() {
reject(new Error('image loade fail'));
reject(new Error('图片加载失败！'));
}
// 设置图像的 src 属性，加载图像
......
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" @magnificationChange="magnificationChange"/>
<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :watermarkOpacity="params.watermarkOpacity" :hideControls="false" :showPtz="false" :isXCXPage="true" @magnificationChange="magnificationChange"/>
</div>
<!-- 时间线组件 -->
<div class="extension-time-box">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid" :appKey="params.appKey" @screenshot="screenshot"/>
<videoTime ref="videoTimeRef" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid" :appKey="params.appKey" @screenshot="screenshot"/>
</div>
</div>
......@@ -41,12 +41,14 @@ export default {
params: {
gateUnid: '',
watermarkText: '',
watermarkOpacity:'',
appKey:'',
ptzEnable:'',
gateName:'',
terminalType:'',
userKey:'',
restaurantId:'',
playbackTime:'',
},
panTiltList:{
up:0,
......@@ -125,13 +127,14 @@ export default {
// 通过URL获取相关参数
const urlParamsMap = getUrlParams(window.location.hash);
console.log('urlParamsMap', urlParamsMap);
urlParamsMap.playbackTime = urlParamsMap.playbackTime?moment(urlParamsMap.playbackTime*1).format('YYYY-MM-DD HH:mm:ss'):'';
Object.keys(this.params).forEach(key => {
if (urlParamsMap[key]) {
this.params[key] = urlParamsMap[key];
}
});
// this.params = obj
console.log(this.params)
// this.params = obj
//利用iframe的onload事件刷新页面
document.title = this.params.gateName||'视频详情'
var iframe = document.createElement('iframe');
......@@ -144,12 +147,20 @@ export default {
}, 0);
};
document.body.appendChild(iframe);
this.params.ptzEnable = ''+this.params.ptzEnable
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()
if(this.params.playbackTime) {
let playbackTime = moment(this.params.playbackTime).format('YYYY-MM-DD HH:mm:ss')
let nowTime = moment(this.params.playbackTime).format('YYYY-MM-DD 23:59:59')
this.getVideoAddress(playbackTime,nowTime)
this.$nextTick(()=>{
this.$refs.videoTimeRef.initBackTime(playbackTime);
})
} else {
this.getVideoAddress()
}
}
},
playWebVideo(obj) {
......@@ -193,7 +204,8 @@ export default {
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);
let type = startTime?true:false
this.$refs.vionPlayer.play(res.data.msg,type);
} else {
Toast.fail('取流失败');
}
......@@ -248,16 +260,10 @@ export default {
loading.close();
}, 5000);
// 跳转页面
// console.log(`http://dining-sit.huian365.com/camera/CameraReport?userKey=${this.params.userKey}&restaurantId=${this.params.restaurantId}&imgUrl=${encodeURIComponent(res.data.data)}`)
// window.open(`http://dining-sit.huian365.com/camera/CameraReport?userKey=${this.params.userKey}&restaurantId=${this.params.restaurantId}&imgUrl=${encodeURIComponent(res.data.data)}`)
const strUrl = `http://dining-sit.huian365.com/camera/CameraReport?userKey=${this.params.userKey}&restaurantId=${this.params.restaurantId}&imgUrl=${encodeURIComponent(res.data.data)}`
// const a = document.createElement('a')
// a.style = 'display: none'
// a.target = '_blank'
// a.href = strUrl
// a.click()
// document.body.append(a)
// document.body.removeChild(a)
// 测试环境
const strUrl = `http://dining-sit.huian365.com/camera/CameraReport?userKey=${this.params.userKey}&restaurantId=${this.params.restaurantId}&imgUrl=${encodeURIComponent(res.data.data)}`
// 生产环境
// const strUrl = `https://dining.huian365.com/camera/CameraReport?userKey=${this.params.userKey}&restaurantId=${this.params.restaurantId}&imgUrl=${encodeURIComponent(res.data.data)}`
window.location.href = strUrl
}else {
this.$message({
......
h5/src/views/extension/videoTime.vue
......@@ -31,9 +31,10 @@
</div>
<!-- 操作按钮 -->
<div class="operating-box">
<i class="operating-jessibuca-icon jessibuca-icon-screenshot" @click="screenshotClick"></i>
<i v-if="isNoBack&&ptzEnable==='1'&&ptzControlShow" class="operating-jessibuca-icon jessibuca-icon-ptzActive" @click="ptzControlChange"></i>
<i v-if="isNoBack&&ptzEnable==='1'&&!ptzControlShow" class="operating-jessibuca-icon jessibuca-icon-ptz" @click="ptzControlChange"></i>
<!-- <i class="operating-jessibuca-icon jessibuca-icon-screenshot" @click="screenshotClick"></i> -->
<span v-if="!onlyPlayback" class="screenshot-box" @click="screenshotClick"><van-icon class="iconMargin" name="photograph"/><span style="margin-right: 5px;margin-left: 2px;">巡检</span></span>
<i v-if="isNoBack&&ptzEnable==='1'&&ptzControlShow&&!onlyPlayback" class="operating-jessibuca-icon jessibuca-icon-ptzActive" @click="ptzControlChange"></i>
<i v-if="isNoBack&&ptzEnable==='1'&&!ptzControlShow&&!onlyPlayback" class="operating-jessibuca-icon jessibuca-icon-ptz" @click="ptzControlChange"></i>
<!-- <van-button v-if="isNoBack&&ptzEnable==='1'" type="info" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button> -->
<van-button v-if="!isNoBack" type="info" size="mini" @click="backRealTime">实时</van-button>
<!-- <div v-if="isNoBack" class="operating-btn" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</div> -->
......@@ -99,6 +100,7 @@ export default {
timeColumns:[],
ptzControlType:'',
playDateArr:[],
onlyPlayback:false,
}
},
props:['dateFormatType','ptzEnable','gateUnid','appKey'],
......@@ -119,6 +121,19 @@ export default {
this.stopPlay()
},
methods: {
// 默认播放回放视频
initBackTime(val) {
if(moment(val).format(this.dateFormatType)==this.showDay) {
this.startTimeChange(moment(val).format('HH:mm:ss'))
} else {
this.startTime = moment(val).format('HH:mm:ss')
this.showDayChange(moment(val).format(this.dateFormatType))
}
this.onlyPlayback = true
this.isNoBack = false
this.ptzControlShow = false
this.isCanFastRight = false
},
// 获取播放日期录像回放时间
getDateBackTime(startDay) {
let stopTime = startDay == moment().format(this.dateFormatType)?moment().format(this.dateFormatType + ' HH:mm:ss'):moment().format(this.dateFormatType + ' 23:59:59');
......@@ -178,7 +193,7 @@ export default {
}
},
showDayChange(val,type) {
console.log(val)
// console.log(val)
this.showDaySelectShow = false
this.showDayStr = moment(val).format('MM月DD日')
this.showDay = moment(val).format(this.dateFormatType)
......@@ -228,7 +243,7 @@ export default {
},
timeSelectConfirm(val) {
this.showTimeSelectShow = false
console.log(val)
// console.log(val)
let timsStr = val.join(':')
this.startTimeChange(timsStr)
},
......@@ -542,7 +557,7 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
padding: 0 5px;
.day-select-btn{
display: inline-flex;
align-items: center;
......@@ -590,7 +605,8 @@ export default {
}
}
.operating-box{
width: 76px;
height: 40px;
width: 82px;
color: #ffffff;
font-size: 14px;
text-align: right;
......@@ -601,6 +617,12 @@ export default {
color: #ffffff;
font-size: 14px;
}
.screenshot-box{
padding: 0 2px;
display: inline-flex;
height: 40px;
align-items: center;
}
}
}
......@@ -744,7 +766,7 @@ export default {
width: 16px;
height: 16px;
display: inline-block;
margin-right: 10px;
margin-right: 5px;
}
.jessibuca-icon-ptz {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAM1BMVEVHcEzMzMzMzMzMzMzMzMzMzMzNzc3MzMzNzc3MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMxDm1AzAAAAEXRSTlMAHqw+E8It/gjxc03jhGDTlgAjE2kAAAI6SURBVEjHpVbZkoQgDBwg3Of/f+12gtfMbK1Yy4NampCju4Ov1y8ruNyyo9fyCibVlNW6vUu29GpWQwTVdPTernqwffHex0WP4Nro3k+PrMKCvew/PcZ95aoNsY9yua+cGxTZsnf2K7ch4CAdGnWwYx/5LgKZCgxGdrhH3BeqNmnwviFXPZbQJmcM25HJ5n7/Pczr2QqksMJfO7BJOHLKLWFdMiL1QXYRwFagMklb4GB1zS7s8Le3fqH7Q28tVLkKdIzeaOJB2OKtY8KfTQCUa4++dNsLbrqpTR7xguHGt8hfg8P+seuaEkNdBjahzOD7g1cHP21SL2LtMNBKMdTRJjffTX1wVgrsEb1ITJU6QknwYJAcQky2cE02NbzPp70KyKggtpu9xM7Ik+CBIqY+8FrYyRUkrs+MEm1TG6tG9LZxNDNFGDue63TYGgIHqUUcuNhvhyZtn5LnlDq3Juxa4noCuX0scErOpNMDCrVcHPCS5rFGuQR9KZpxnB6CQ0ZO+AIBcTPk3UdbTx1L7jLEEHsMW7ZYm8NlIFyxn8+xdL7MURYEhzd5k2N2TabxIAORwC2r00QQfNSgrnqTJfh7cDmDu9ggtV0EZFr7kGu4KAxtNDln406TLwF9iZCIwn9EfjPuncRHYm5x3NfK3cFAS5kWxljSnTFlPHBAUFg5HsCCVOd9cdwXq+027un2QJlMjqISJutCDceRtTTuT4+1Q3HWHR8cu0fh9sGvADTYH9iLah/9nPz5+/MDJnQfoIVoAnQAAAAASUVORK5CYII=) no-repeat 50%;
......@@ -760,4 +782,7 @@ export default {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAJFBMVEVHcEzMzMzMzMzMzMzMzMzNzc3MzMzMzMzNzc3Nzc3MzMzMzMwv5ahDAAAAC3RSTlMAW+8S2UGVwyyZnOTRhEMAAAEfSURBVDjLzZKxbsJADIYdBQpsSCyVMlXAdEuQYGKpWFk6dWHJgsQ7sMDSpUv3PgITAQT0f7ly57ucQ45KXRAZot+/89k+X4ju9KzL4XOhlm3pR0enYrWViSRPXQIQSASkRSkIJEFRimYCuQAHSW89IOv6SH5TCsuAj68Ab1wDzqkAzqoC7AUAPtgsABgkBBgkCJiNHehGok//KRVsHqd+3Dj1/vukt3AH/Jj05s5/AmyZhFVWXDls44iVvfQWkCvgxU6g9ZdJfCLvjJbYaT3GvjOY4mQSG3SJGjhr/Y1Xohp+TGKqqzexZ/1GVGdNCitt6R8zVvb9d+JmKdl8o5sPWbtxT6zFuJcDQtk92MNmYiXHquYlZlVt1j4P6cd7fgHFW7Nhqu29TwAAAABJRU5ErkJggg==) no-repeat 50%;
background-size: 100% 100%;
}
.van-icon{
font-size: 16px;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!