jinna
2 years ago
parent
457fa291ac
commit
504b291b60
15 changed files with 1076 additions and 180 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 532 B |
@ -0,0 +1,479 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<div id="player" :style="{width:!showLeft ? '100%' : '65%'}"></div> |
||||||
|
<div class="form_box" v-show="showLeft"> |
||||||
|
<el-form> |
||||||
|
<el-form-item label="当前选中摄像头"> |
||||||
|
{{ |
||||||
|
this.playUrlList.length > 0 && this.player |
||||||
|
? this.playUrlList[this.player.currentWindowIndex].name |
||||||
|
: "--" |
||||||
|
}} |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="分屏"> |
||||||
|
<el-radio-group v-model="splitNum" @change="arrangeWindow"> |
||||||
|
<el-radio-button label="1">1x1</el-radio-button> |
||||||
|
<el-radio-button label="2">2x2</el-radio-button> |
||||||
|
<el-radio-button label="3">3x3</el-radio-button> |
||||||
|
<el-radio-button label="4">4x4</el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
<!-- <el-form-item label="预览"> |
||||||
|
<el-button id="btn-realplay" @click="queryLive">开始预览</el-button> |
||||||
|
<el-button id="btn-realplay-stop" @click="stopPlay">停止预览</el-button> |
||||||
|
<el-button id="btn-stopall" @click="stopAllPlay" |
||||||
|
>停止全部窗口</el-button |
||||||
|
> |
||||||
|
</el-form-item> --> |
||||||
|
<el-form-item label="回放时间"> |
||||||
|
<el-date-picker |
||||||
|
v-model="timeRange" |
||||||
|
type="datetimerange" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<!-- <el-date-picker |
||||||
|
v-model="timeRange" |
||||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||||
|
type="datetimerange" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
></el-date-picker> --> |
||||||
|
<!-- <e-date-picker |
||||||
|
|
||||||
|
placeholder="开始时间" |
||||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||||
|
v-model="playback.startTime" |
||||||
|
:value-format="playback.valueFormat" |
||||||
|
> |
||||||
|
</e-date-picker> |
||||||
|
<e-date-picker |
||||||
|
|
||||||
|
placeholder="结束时间" |
||||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||||
|
v-model="playback.endTime" |
||||||
|
:value-format="playback.valueFormat" |
||||||
|
> |
||||||
|
</e-date-picker> --> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="回放"> |
||||||
|
<el-button id="btn-playback" @click="playbackQuery">开始回放</el-button> |
||||||
|
<el-button id="btn-playback-pause" @click="playbackPause" |
||||||
|
>暂停</el-button |
||||||
|
> |
||||||
|
<el-button id="btn-playback-sesume" @click="playbackResume" |
||||||
|
>恢复</el-button |
||||||
|
> |
||||||
|
<el-button id="btn-playback-stop" @click="stopPlay">停止回放</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="抓图"> |
||||||
|
<el-button id="btn-capture-jpeg" @click="capture('JPEG')" |
||||||
|
>抓取JPEG</el-button |
||||||
|
> |
||||||
|
<el-button id="btn-capture-bmp" @click="capture('BMP')" |
||||||
|
>抓取BMP</el-button |
||||||
|
> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备 |
||||||
|
const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse |
||||||
|
// import "@/static/js/h5player.min.js" |
||||||
|
import { |
||||||
|
queryLivePreview, |
||||||
|
queryLiveBack, |
||||||
|
} from "@/api/wirelessintrusion/wirelessintrusion"; |
||||||
|
export default { |
||||||
|
// props: { |
||||||
|
// list: { |
||||||
|
// // cameraCode列表 |
||||||
|
// type: Array, |
||||||
|
// default: () => [], |
||||||
|
// }, |
||||||
|
// showLeft:{ |
||||||
|
// type:Boolean |
||||||
|
// } |
||||||
|
// }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
player: null, |
||||||
|
playUrlList: [], //预览播放地址 |
||||||
|
splitNum: 1, |
||||||
|
mseSupport: MSE_IS_SUPPORT, |
||||||
|
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder', |
||||||
|
tabActive: "decoder", |
||||||
|
urls: { |
||||||
|
realplay: "ws://10.19.147.22:559/EUrl/q2jQie4", |
||||||
|
talk: "wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S", |
||||||
|
playback: |
||||||
|
"wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S", |
||||||
|
}, |
||||||
|
playback: { |
||||||
|
startTime: "2021-07-26 00:00:00", |
||||||
|
endTime: "2021-07-26 23:59:59", |
||||||
|
valueFormat: "", |
||||||
|
seekStart: "2021-07-26T12:00:00", |
||||||
|
rate: "", |
||||||
|
}, |
||||||
|
muted: true, |
||||||
|
volume: 50, |
||||||
|
volumeOnSvg: { |
||||||
|
template: |
||||||
|
'<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>', |
||||||
|
}, |
||||||
|
volumeOffSvg: { |
||||||
|
template: |
||||||
|
'<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>', |
||||||
|
}, |
||||||
|
recordStartState: 0, |
||||||
|
recordStartText: "录像", |
||||||
|
timeRange:[], |
||||||
|
cameraList:[], |
||||||
|
list:[], |
||||||
|
showLeft:true |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// this.qrcodeData1 = this.$route.query.category |
||||||
|
console.log('list ===============>',JSON.parse(this.$route.query.list), this.$route.query.showLeft) |
||||||
|
// console.log('list ===>',this.list) |
||||||
|
this.list = JSON.parse(this.$route.query.list); |
||||||
|
this.showLeft = this.$route.query.showLeft |
||||||
|
this.cameraList = [] |
||||||
|
let isTags = this.list.find(item => item.tags) |
||||||
|
if(isTags){ |
||||||
|
this.list.map(item =>{ |
||||||
|
console.log('code ====>',JSON.parse(item.tags).cameraIndexCode) |
||||||
|
if(JSON.parse(item.tags).cameraCode){ |
||||||
|
if(JSON.parse(item.tags).cameraCode.indexOf('-') != -1){ |
||||||
|
JSON.parse(item.tags).cameraCode.split('-').map(item1=>{ |
||||||
|
this.cameraList.push({name:item.name,code:item1}) |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
this.cameraList.push({name:item.name,code:item.cameraCode}) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
this.cameraList = this.list |
||||||
|
} |
||||||
|
console.log('cameraList =====>',this.cameraList) |
||||||
|
// this.timeRange = [this.getYestDayOrNextDay() + ' 00:00:00',new Date().toLocaleString()] |
||||||
|
// 海康h5插件初始化 |
||||||
|
setTimeout(() => { |
||||||
|
this.init(); |
||||||
|
this.createPlayer(); |
||||||
|
// this.arrangeWindow(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getYestDayOrNextDay() { |
||||||
|
// 获取当前日期 |
||||||
|
const today = new Date(); |
||||||
|
// 计算前一天的日期 |
||||||
|
const yesterday = new Date(today); |
||||||
|
yesterday.setDate(today.getDate() - 1); |
||||||
|
return yesterday.toLocaleDateString(); |
||||||
|
}, |
||||||
|
// 海康视频初始化加载 |
||||||
|
init() { |
||||||
|
// 设置播放容器的宽高并监听窗口大小变化 |
||||||
|
window.addEventListener("resize", () => { |
||||||
|
this.player.JS_Resize(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
createPlayer() { |
||||||
|
this.player = new window.JSPlugin({ |
||||||
|
szId: "player", |
||||||
|
szBasePath: "/js/", //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js |
||||||
|
iMaxSplit: 4, |
||||||
|
iCurrentSplit: 2, |
||||||
|
openDebug: true, |
||||||
|
oStyle: { |
||||||
|
borderSelect: "#FFCC00", |
||||||
|
}, |
||||||
|
}); |
||||||
|
let _this = this; |
||||||
|
// 事件回调绑定 |
||||||
|
this.player.JS_SetWindowControlCallback({ |
||||||
|
windowEventSelect: function (iWndIndex) { |
||||||
|
//插件选中窗口回调 |
||||||
|
console.log("windowSelect callback: ", iWndIndex); |
||||||
|
}, |
||||||
|
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { |
||||||
|
//插件错误回调 |
||||||
|
console.log("pluginError callback: ", iWndIndex, iErrorCode, oError); |
||||||
|
}, |
||||||
|
windowEventOver: function (iWndIndex) { |
||||||
|
//鼠标移过回调 |
||||||
|
//console.log(iWndIndex); |
||||||
|
}, |
||||||
|
windowEventOut: function (iWndIndex) { |
||||||
|
//鼠标移出回调 |
||||||
|
//console.log(iWndIndex); |
||||||
|
}, |
||||||
|
windowEventUp: function (iWndIndex) { |
||||||
|
//鼠标mouseup事件回调 |
||||||
|
//console.log(iWndIndex); |
||||||
|
}, |
||||||
|
windowFullCcreenChange: function (bFull) { |
||||||
|
//全屏切换回调 |
||||||
|
console.log("fullScreen callback: ", bFull); |
||||||
|
}, |
||||||
|
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { |
||||||
|
//首帧显示回调 |
||||||
|
console.log( |
||||||
|
"firstFrame loaded callback: ", |
||||||
|
iWndIndex, |
||||||
|
iWidth, |
||||||
|
iHeight |
||||||
|
); |
||||||
|
}, |
||||||
|
performanceLack: function () { |
||||||
|
//性能不足回调 |
||||||
|
console.log("performanceLack callback: "); |
||||||
|
}, |
||||||
|
}); |
||||||
|
// _this.realplay(); |
||||||
|
console.log('length ===>',this.cameraList.length) |
||||||
|
this.splitNum = |
||||||
|
this.cameraList.length > 1 |
||||||
|
? 2 |
||||||
|
: this.cameraList.length > 4 |
||||||
|
? 3 |
||||||
|
: this.cameraList.length > 9 |
||||||
|
? 4 |
||||||
|
: 2; |
||||||
|
this.arrangeWindow() |
||||||
|
this.queryLive(); |
||||||
|
}, |
||||||
|
arrangeWindow() { |
||||||
|
// const splitNum = this.splitNum; |
||||||
|
// console.log(this.player) |
||||||
|
|
||||||
|
let splitNum = Number(this.splitNum) |
||||||
|
this.player.JS_ArrangeWindow(splitNum).then( |
||||||
|
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) }, |
||||||
|
e => { console.error(e) } |
||||||
|
) |
||||||
|
}, |
||||||
|
// 初始化结束 |
||||||
|
// 视频预览 |
||||||
|
realplay(index, url) { |
||||||
|
if (this.playUrlList.length === 0) { |
||||||
|
this.$message.warning("当前没有可播放的摄像头"); |
||||||
|
return; |
||||||
|
} |
||||||
|
// this.mode = 0 //解码方式：0普通模式 1高级模式 |
||||||
|
// const { player, mode, urls } = this, |
||||||
|
|
||||||
|
// index = player.currentWindowIndex |
||||||
|
// // playURL = this.realplay |
||||||
|
// console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1) |
||||||
|
// player.JS_Play(playURL, { playURL, mode }, index1).then( |
||||||
|
// () => { |
||||||
|
// console.log('realplay success') |
||||||
|
// }, |
||||||
|
// e => { console.error(e) } |
||||||
|
// ) |
||||||
|
if (this.player === null) return; |
||||||
|
// let { mode, player } = this; |
||||||
|
// let index = this.player.currentWindowIndex; |
||||||
|
let mode = 0; |
||||||
|
// let playURL = this.playUrlList[player.currentWindowIndex].url; |
||||||
|
let playURL = url |
||||||
|
console.log('playUrl ===>',playURL, {playURL,mode},index) |
||||||
|
|
||||||
|
|
||||||
|
// console.log(playURL, { playURL, mode }, index); |
||||||
|
this.player.JS_Play(playURL, { playURL, mode }, index).then( |
||||||
|
() => { |
||||||
|
// 播放成功回调 |
||||||
|
console.log("播放成功"); |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
console.log("播放失败", err); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
// 关闭所有视频 |
||||||
|
stopAllPlay() { |
||||||
|
this.player.JS_StopRealPlayAll().then( |
||||||
|
() => { |
||||||
|
this.playback.rate = 0; |
||||||
|
console.log("stopAllPlay success"); |
||||||
|
// this.closeVideoTree(); |
||||||
|
}, |
||||||
|
(e) => { |
||||||
|
console.error(e); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
// 关闭单个视频 |
||||||
|
stopPlay() { |
||||||
|
this.player.JS_Stop().then( |
||||||
|
() => { |
||||||
|
this.playback.rate = 0; |
||||||
|
console.log("stop realplay success"); |
||||||
|
// this.closeVideoTree() |
||||||
|
const index = this.player.currentWindowIndex; |
||||||
|
this.selectAisle(this.videoList[index], index); |
||||||
|
}, |
||||||
|
(e) => { |
||||||
|
console.error(e); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
capture(imageType) { |
||||||
|
let player = this.player, |
||||||
|
index = player.currentWindowIndex; |
||||||
|
|
||||||
|
player.JS_CapturePicture(index, "img", imageType).then( |
||||||
|
() => { |
||||||
|
console.log("capture success", imageType); |
||||||
|
}, |
||||||
|
(e) => { |
||||||
|
console.error(e); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 视频流查询 |
||||||
|
*/ |
||||||
|
//实时监控播放地址查询 |
||||||
|
queryLive() { |
||||||
|
console.log("视频流查询", this.cameraList); |
||||||
|
let playUrlList = []; |
||||||
|
this.cameraList.map((code, index) => { |
||||||
|
// console.log('code ===>',code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code) |
||||||
|
queryLivePreview({ cameraIndexCode: code.code }).then((res) => { |
||||||
|
console.log('res ====>',res) |
||||||
|
if (res.data.code === 0 || res.data.code == 200) { |
||||||
|
playUrlList.push({name:code.name ? code.name : '', code: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code, url: res.data.data }); |
||||||
|
this.playUrlList = playUrlList; |
||||||
|
this.realplay(index, res.data.data); |
||||||
|
} |
||||||
|
// else{ |
||||||
|
// playUrlList.push({name:code.name ? code.name : '', code: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code, url: 'ws://171.16.8.60:559/openUrl/QKCBP32' }); |
||||||
|
// this.playUrlList = playUrlList; |
||||||
|
// this.realplay(index, 'ws://171.16.8.60:559/openUrl/QKCBP32'); |
||||||
|
// } |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
/* 回放 */ |
||||||
|
playbackStart() { |
||||||
|
let { player, mode, playback } = this, |
||||||
|
index = player.currentWindowIndex, |
||||||
|
{ startTime, endTime } = playback; |
||||||
|
let playURL = this.playUrlList[index].playback; |
||||||
|
startTime += "Z"; |
||||||
|
endTime += "Z"; |
||||||
|
let timeArr = JSON.parse(JSON.stringify(this.timeRange)) |
||||||
|
let time1 = timeArr[0].substring(0, 10) + 'T' + timeArr[0].substring(10 + 1) + "Z" |
||||||
|
let time2 = timeArr[1].substring(0, 10) + 'T' + timeArr[1].substring(10 + 1) + 'Z' |
||||||
|
|
||||||
|
console.log('index ===>',index,mode,playURL,time1,time2) |
||||||
|
|
||||||
|
player |
||||||
|
.JS_Play(playURL, { playURL, mode }, index, time1, time2) |
||||||
|
.then( |
||||||
|
() => { |
||||||
|
console.log("playbackStart success"); |
||||||
|
this.playback.rate = 1; |
||||||
|
}, |
||||||
|
(e) => { |
||||||
|
console.error(e); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
playbackPause() { |
||||||
|
this.player.JS_Pause().then( |
||||||
|
() => { |
||||||
|
console.log("playbackPause success"); |
||||||
|
}, |
||||||
|
(e) => { |
||||||
|
console.error(e); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
playbackResume() { |
||||||
|
this.player.JS_Resume().then( |
||||||
|
() => { |
||||||
|
console.log("playbackResume success"); |
||||||
|
}, |
||||||
|
(e) => { |
||||||
|
console.error(e); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
/* 回放 */ |
||||||
|
playbackQuery() { |
||||||
|
if (this.playUrlList.length === 0) { |
||||||
|
this.$message.warning("当前没有可播放的摄像头"); |
||||||
|
return; |
||||||
|
} |
||||||
|
console.log('payback ===>',this.playUrlList[this.player.currentWindowIndex].playback) |
||||||
|
if ( |
||||||
|
this.playUrlList[this.player.currentWindowIndex].playback != undefined |
||||||
|
) { |
||||||
|
this.playbackStart(); |
||||||
|
return; |
||||||
|
} |
||||||
|
console.log('currentWindowIndex ===>',this.player.currentWindowIndex) |
||||||
|
queryLiveBack({ |
||||||
|
cameraIndexCode: this.playUrlList[this.player.currentWindowIndex].code, |
||||||
|
beginTime:this.timeRange[0], |
||||||
|
endTime: this.timeRange[1], |
||||||
|
}).then((res) => { |
||||||
|
if (res.data.code === 0 || res.data.code == 200) { |
||||||
|
this.playUrlList[this.player.currentWindowIndex].playback = |
||||||
|
res.data.data; |
||||||
|
this.playbackStart(); |
||||||
|
} |
||||||
|
// else{ |
||||||
|
// this.playUrlList[this.player.currentWindowIndex].playback = |
||||||
|
// 'ws://171.16.8.60:559/openUrl/fJbYK9G'; |
||||||
|
// this.playbackStart(); |
||||||
|
// } |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container{ |
||||||
|
display: flex; |
||||||
|
// @media screen and (min-width: 992px){ |
||||||
|
#player { |
||||||
|
width:65%; |
||||||
|
height: calc((50vw - 8px) * 5 / 8); |
||||||
|
} |
||||||
|
// } |
||||||
|
|
||||||
|
.form_box{ |
||||||
|
width: 35%; |
||||||
|
display: flex; |
||||||
|
// align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
.el-form{ |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,168 @@ |
|||||||
|
<template> |
||||||
|
<div id='player'></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备 |
||||||
|
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse |
||||||
|
// import "@/static/js/h5player.min.js" |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
player: null, |
||||||
|
splitNum: 1, |
||||||
|
mseSupport: MSE_IS_SUPPORT, |
||||||
|
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder', |
||||||
|
tabActive: 'decoder', |
||||||
|
urls: { |
||||||
|
realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4', |
||||||
|
talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S', |
||||||
|
playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S' |
||||||
|
}, |
||||||
|
playback: { |
||||||
|
startTime: '2021-07-26T00:00:00', |
||||||
|
endTime: '2021-07-26T23:59:59', |
||||||
|
valueFormat: '', |
||||||
|
seekStart: '2021-07-26T12:00:00', |
||||||
|
rate: '' |
||||||
|
}, |
||||||
|
muted: true, |
||||||
|
volume: 50, |
||||||
|
volumeOnSvg: { |
||||||
|
template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>' |
||||||
|
}, |
||||||
|
volumeOffSvg: { |
||||||
|
template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>' |
||||||
|
}, |
||||||
|
recordStartState: 0, |
||||||
|
recordStartText: '录像' |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 海康h5插件初始化 |
||||||
|
setTimeout(() => { |
||||||
|
this.init() |
||||||
|
this.createPlayer() |
||||||
|
this.arrangeWindow() |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 海康视频初始化加载 |
||||||
|
init () { |
||||||
|
// 设置播放容器的宽高并监听窗口大小变化 |
||||||
|
window.addEventListener('resize', () => { |
||||||
|
this.player.JS_Resize() |
||||||
|
}) |
||||||
|
}, |
||||||
|
createPlayer () { |
||||||
|
this.player = new window.JSPlugin({ |
||||||
|
szId: 'player', |
||||||
|
szBasePath: "/js/", //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js |
||||||
|
iMaxSplit: 4, |
||||||
|
iCurrentSplit: 2, |
||||||
|
openDebug: true, |
||||||
|
oStyle: { |
||||||
|
borderSelect: '#FFCC00', |
||||||
|
} |
||||||
|
}) |
||||||
|
let _this = this |
||||||
|
// 事件回调绑定 |
||||||
|
this.player.JS_SetWindowControlCallback({ |
||||||
|
windowEventSelect: function (iWndIndex) { //插件选中窗口回调 |
||||||
|
console.log('windowSelect callback: ', iWndIndex); |
||||||
|
}, |
||||||
|
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调 |
||||||
|
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError); |
||||||
|
}, |
||||||
|
windowEventOver: function (iWndIndex) { //鼠标移过回调 |
||||||
|
//console.log(iWndIndex); |
||||||
|
}, |
||||||
|
windowEventOut: function (iWndIndex) { //鼠标移出回调 |
||||||
|
//console.log(iWndIndex); |
||||||
|
}, |
||||||
|
windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调 |
||||||
|
//console.log(iWndIndex); |
||||||
|
}, |
||||||
|
windowFullCcreenChange: function (bFull) { //全屏切换回调 |
||||||
|
console.log('fullScreen callback: ', bFull); |
||||||
|
}, |
||||||
|
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调 |
||||||
|
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight); |
||||||
|
}, |
||||||
|
performanceLack: function () { //性能不足回调 |
||||||
|
console.log('performanceLack callback: '); |
||||||
|
} |
||||||
|
}); |
||||||
|
_this.realplay() |
||||||
|
|
||||||
|
}, |
||||||
|
arrangeWindow () { |
||||||
|
const splitNum = this.splitNum |
||||||
|
this.player.JS_ArrangeWindow(splitNum).then( |
||||||
|
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) }, |
||||||
|
e => { console.error(e) } |
||||||
|
) |
||||||
|
}, |
||||||
|
// 初始化结束 |
||||||
|
// 视频预览 |
||||||
|
realplay () { |
||||||
|
// this.mode = 0 //解码方式：0普通模式 1高级模式 |
||||||
|
// const { player, mode, urls } = this, |
||||||
|
|
||||||
|
// index = player.currentWindowIndex |
||||||
|
// // playURL = this.realplay |
||||||
|
// console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1) |
||||||
|
// player.JS_Play(playURL, { playURL, mode }, index1).then( |
||||||
|
// () => { |
||||||
|
// console.log('realplay success') |
||||||
|
// }, |
||||||
|
// e => { console.error(e) } |
||||||
|
// ) |
||||||
|
if (this.player === null) return; |
||||||
|
// let { mode, player } = this; |
||||||
|
let index = 0; |
||||||
|
let mode = 0 |
||||||
|
let playURL = 'ws://10.19.147.22:559/EUrl/q2jQie4'; |
||||||
|
|
||||||
|
console.log(playURL, { playURL, mode }, index); |
||||||
|
this.player.JS_Play(playURL, { playURL, mode }, index).then( |
||||||
|
() => { |
||||||
|
// 播放成功回调 |
||||||
|
console.log("播放成功"); |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
console.log("播放失败", err); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
// 关闭所有视频 |
||||||
|
stopAllPlay () { |
||||||
|
this.player.JS_StopRealPlayAll().then( |
||||||
|
() => { |
||||||
|
this.playback.rate = 0 |
||||||
|
console.log('stopAllPlay success') |
||||||
|
this.closeVideoTree() |
||||||
|
}, |
||||||
|
e => { console.error(e) } |
||||||
|
) |
||||||
|
}, |
||||||
|
// 关闭单个视频 |
||||||
|
stopPlay () { |
||||||
|
this.player.JS_Stop().then( |
||||||
|
() => { |
||||||
|
this.playback.rate = 0 |
||||||
|
console.log('stop realplay success') |
||||||
|
// this.closeVideoTree() |
||||||
|
const index = this.player.currentWindowIndex |
||||||
|
this.selectAisle(this.videoList[index], index) |
||||||
|
}, |
||||||
|
e => { console.error(e) } |
||||||
|
) |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue