vue2实现海康威视根据海康插件进行监控实时预览和回放功能_vue2 视频监控-程序员宅基地
一、单页面版本
appkey: '根据实际情况填写', // 海康平台提供的appkey
ip: '根据实际情况填写', // 平台地址
secret: '根据实际情况填写', // 海康平台提供的secret
<template>
<div>
<div style="display: flex;margin-top: 20px;margin-left: 20px">
<el-input
style="width: 260px;"
placeholder="请输入 equipmentno"
v-model="equipmentno"
clearable>
</el-input>
<el-button type="primary" size="mini" icon="el-icon-search" @click="previewVideo()">预览</el-button>
<el-button type="primary" size="mini" icon="el-icon-search" @click="stopAllPreview()">停止预览</el-button>
</div>
<div ref="playWndBox" class="videoMain" style="margin-top: 20px">
<div
id="playWnd"
class="playWnd"
:style="{
height: playWndHeight + 'px',
width: playWndWidth + 'px',
}"
/>
</div>
</div>
</template>
<script>
export default {
name: 'Video',
data() {
return {
equipmentno: '',
// height: 735px;
// width: 1144px;
// 视频盒子的高度
playWndHeight: '735',
// playWndHeight: '1076',
// 视频盒子的宽度
playWndWidth: '1144',
// playWndWidth: '1920',
oWebControl: null,
initCount: 0,
pubKey: '',
cameraIndexCode: '', // 这里面是监控点编号
objData: {
appkey: '根据实际需要填写', // 海康平台提供的appkey
ip: 'IP地址根据实际需要填写', // 平台地址
secret: '根据实际需要填写', // 海康平台提供的secret
port: 443,
playMode: 0, // 0 预览 1回放
layout: '1x1' // 页面展示的模块数【16】
}
}
},
// mounted中获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成
mounted() {
// 首次加载时的到父容器的高度
this.playWndHeight = this.$refs.playWndBox.clientHeight
// 首次加载时的到父容器的宽度
this.playWndWidth = this.$refs.playWndBox.clientWidth
// 初始化播放器插件
this.$nextTick(() => {
this.initPlugin()
})
// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener('scroll', () => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(
this.$refs.playWndBox.clientWidth,
this.$refs.playWndBox.clientHeight
)
this.setWndCover()
}
})
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener('resize', (e) => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(
this.$refs.playWndBox.clientWidth,
this.$refs.playWndBox.clientHeight
)
this.setWndCover()
}
})
},
// 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
destroyed() {
if (this.oWebControl != null) {
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
this.oWebControl.JS_HideWnd()
// 销毁当前播放的视频
this.oWebControl.JS_RequestInterface({funcName: 'destroyWnd'})
// 断开与插件服务连接
this.oWebControl.JS_Disconnect()
}
},
// 方法区域
methods: {
// 创建播放实例
initPlugin() {
const that = this
this.oWebControl = null
// eslint-disable-next-line no-undef
that.oWebControl = new WebControl({
szPluginContainer: 'playWnd', // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess: () => {
// 创建WebControl实例成功
that.oWebControl
.JS_StartService('window', {
// WebControl实例创建成功后需要启动服务
// 值"./VideoPluginConnect.dll"写死
dllPath: './VideoPluginConnect.dll'
})
.then(
function () {
// 设置消息回调
that.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: that.cbIntegrationCallBack
})
// JS_CreateWnd创建视频播放窗口，宽高可设定
that.oWebControl
.JS_CreateWnd('playWnd', 2040, 945, {bEmbed: true})
// 注：2040,945这是我本人项目视频盒子的大小，你们要根据自己视频盒子的大小进行修改，不然初始化插件的时候会有空白闪烁。
.then(function () {
// 创建播放实例成功后初始化
that.init()
})
},
function () {
// 启动插件服务失败
}
)
},
// 创建WebControl实例失败
cbConnectError: function () {
that.oWebControl = null
alert('插件未启动，正在尝试启动，请稍候...')
that.$message.warning("插件未启动，正在尝试启动，请稍候...");
// 程序未启动时执行error函数，采用wakeup来启动程序
window.WebControl.JS_WakeUp('VideoWebPlugin://')
that.initCount++
if (that.initCount < 3) {
setTimeout(function () {
that.initPlugin()
}, 3000)
} else {
// gblfy 默认注释
that.messageBox = true
alert('插件启动失败，请安装插件并重新启动！')
that.downloadHikVideo()
setTimeout(function () {
that.messageBox = false
}, 5000)
setTimeout(function () {
alert('插件启动失败，请检查插件是否安装！')
that.$message({
message: '插件启动失败，请检查插件是否安装！ \n 插件下载地址：https://www.baidu.com',
type: 'warning'
});
}, 5000)
}
},
cbConnectClose: () => {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
// console.log("cbConnectClose");
that.oWebControl = null
}
})
},
// 初始化
init(callback) {
const that = this
that.getPubKey(() => {
const appkey = that.objData.appkey // 综合安防管理平台提供的appkey，必填
const secret = that.setEncrypt(that.objData.secret) // 综合安防管理平台提供的secret，必填
const ip = that.objData.ip // 综合安防管理平台IP地址，必填
const playMode = that.objData.playMode // 初始播放模式：0-预览，1-回放
const port = that.objData.port // 综合安防管理平台端口，若启用HTTPS协议，默认443
const snapDir = 'D:\\SnapDir' // 抓图存储路径
const videoDir = 'D:\\VideoDir' // 紧急录像或录像剪辑存储路径
const layout = that.objData.layout // playMode指定模式的布局
const enableHTTPS = 1 // 是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
const encryptedFields = 'secret' // 加密字段，默认加密领域为secret
const showToolbar = 1 // 是否显示工具栏，0-不显示，非0-显示
const showSmart = 1 // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
const buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' // 自定义工具条按钮
// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
that.oWebControl
.JS_RequestInterface({
funcName: 'init',
argument: JSON.stringify({
appkey: appkey, // API网关提供的appkey
secret: secret, // API网关提供的secret
ip: ip, // API网关IP地址
playMode: playMode, // 播放模式（决定显示预览还是回放界面）
port: port, // 端口
snapDir: snapDir, // 抓图存储路径
videoDir: videoDir, // 紧急录像或录像剪辑存储路径
layout: layout, // 布局
enableHTTPS: enableHTTPS, // 是否启用HTTPS协议
encryptedFields: encryptedFields, // 加密字段
showToolbar: showToolbar, // 是否显示工具栏
showSmart: showSmart, // 是否显示智能信息
buttonIDs: buttonIDs // 自定义工具条按钮
})
})
.then(function (oData) {
that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
if (callback) {
callback()
}
// 隐藏
// that.oWebControl.JS_HideWnd()
})
})
},
// 获取公钥
getPubKey(callback) {
const that = this
this.oWebControl
.JS_RequestInterface({
funcName: 'getRSAPubKey',
argument: JSON.stringify({
keyLength: 1024
})
})
.then(function (oData) {
if (oData.responseMsg.data) {
that.pubKey = oData.responseMsg.data
callback()
}
})
},
// RSA 加密
setEncrypt(value) {
const that = this
const encrypt = new window.JSEncrypt()
encrypt.setPublicKey(that.pubKey)
return encrypt.encrypt(value)
},
// 回调的消息
cbIntegrationCallBack(oData) {
const {responseMsg: type} = oData
if (type === 'error') {
// eslint-disable-next-line no-empty
} else {
}
},
// 视频预览功能
previewVideo() {
const that = this
console.log("-------that.equipmentno->{}", that.cameraIndexCode);
const cameraIndexCode = that.equipmentno // 获取输入的监控点编号值，必填
const streamMode = 0 // 主子码流标识：0-主码流，1-子码流
const transMode = 0 // 传输协议：0-UDP，1-TCP
const gpuMode = 0 // 是否启用GPU硬解，0-不启用，1-启用
const wndId = -1 // 播放窗口序号（在2x2以上布局下可指定播放窗口）
console.log(cameraIndexCode, "-------cameraIndexCode-");
that.oWebControl.JS_RequestInterface({
funcName: 'startPreview',
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode.trim(), // 监控点编号
streamMode: streamMode, // 主子码流标识
transMode: transMode, // 传输协议
gpuMode: gpuMode, // 是否开启GPU硬解
wndId: wndId // 可指定播放窗口
})
})
},
// 停止全部预览
stopAllPreview() {
this.oWebControl.JS_RequestInterface({
funcName: 'stopAllPreview'
})
},
// 格式化时间
dateFormat(oDate, fmt) {
const o = {
'M+': oDate.getMonth() + 1, // 月份
'd+': oDate.getDate(), // 日
'h+': oDate.getHours(), // 小时
'm+': oDate.getMinutes(), // 分
's+': oDate.getSeconds(), // 秒
'q+': Math.floor((oDate.getMonth() + 3) / 3), // 季度
S: oDate.getMilliseconds() // 毫秒
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(oDate.getFullYear() + '').substr(4 - RegExp.$1.length)
)
}
for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1
? o[k]
: ('00' + o[k]).substr(('' + o[k]).length)
)
}
}
return fmt
},
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
setWndCover() {
var iWidth = $(window).width()
var iHeight = $(window).height()
var oDivRect = $('#playWnd').get(0).getBoundingClientRect()
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0
iCoverLeft = (iCoverLeft > 2041) ? 2041 : iCoverLeft
iCoverTop = (iCoverTop > 945) ? 945 : iCoverTop
iCoverRight = (iCoverRight > 2041) ? 2041 : iCoverRight
iCoverBottom = (iCoverBottom > 945) ? 945 : iCoverBottom
this.oWebControl.JS_RepairPartWindow(0, 0, 2041, 946) // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft !== 0) {
this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 946)
}
if (iCoverTop !== 0) {
this.oWebControl.JS_CuttingPartWindow(0, 0, 2041, iCoverTop) // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight !== 0) {
this.oWebControl.JS_CuttingPartWindow(2041 - iCoverRight, 0, iCoverRight, 946)
}
if (iCoverBottom !== 0) {
this.oWebControl.JS_CuttingPartWindow(0, 946 - iCoverBottom, 2041, iCoverBottom)
}
}
}
}
</script>
二、组件封装版本
appkey: '根据实际情况填写', // 海康平台提供的appkey
ip: '根据实际情况填写', // 平台地址
secret: '根据实际情况填写', // 海康平台提供的secret
2.1. 父页面
<template>
<div>
<el-button type="primary" size="mini" icon="el-icon-search" @click="previewVideo()">预览</el-button>
<div v-if="dialogVideoFlag">
<el-dialog
v-show="dialogVideoFlag"
title="海康视频实时录像"
:before-close="handleClose">
<span>海康视频</span>
<span slot="footer" class="dialog-footer">
<HaiKangVideo
:equipmentno="equipmentno"
></HaiKangVideo>
<el-button @click="dialogVideoFlag = false">取 消</el-button>
<el-button type="primary" @click="dialogVideoFlag = false">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
// 父页面
import HaiKangVideo from "../components/HaiKangVideo";
export default {
name: 'Video',
components: {
HaiKangVideo},
data() {
return {
dialogVideoFlag: false,
equipmentno: '8888',
}
},
methods: {
previewVideo() {
this.dialogVideoFlag = true
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {
});
}
}
}
</script>
2.2. 子组件
<template>
<div>
<div style="display: flex;margin-top: 20px;margin-left: 20px">
<el-input
style="width: 260px;"
placeholder="请输入 equipmentno"
v-model="equipmentno"
clearable>
</el-input>
<el-button type="primary" size="mini" icon="el-icon-search" @click="previewVideo()">预览</el-button>
<el-button type="primary" size="mini" icon="el-icon-search" @click="stopAllPreview()">停止预览</el-button>
</div>
<div ref="playWndBox" class="videoMain" style="margin-top: 20px">
<div
id="playWnd"
class="playWnd"
:style="{
height: playWndHeight + 'px',
width: playWndWidth + 'px',
}"
/>
</div>
</div>
</template>
<script>
export default {
name: 'Video',
props: {
//props列表
equipmentno: {
type: String,
default: "我是默认字符串",//定义参数默认值
required: true//定义参数是否必须值
},
},
created() {
console.log("this.equipmentno 组件->{}", this.equipmentno)
},
data() {
return {
// equipmentno: '',
// height: 735px;
// width: 1144px;
// 视频盒子的高度
playWndHeight: '420',
// playWndHeight: '735',
// playWndHeight: '1076',
// 视频盒子的宽度
playWndWidth: '1144',
// playWndWidth: '1920',
oWebControl: null,
initCount: 0,
pubKey: '',
cameraIndexCode: '', // 这里面是监控点编号
objData: {
appkey: '根据实际情况填写', // 海康平台提供的appkey
ip: '根据实际情况填写', // 平台地址
secret: '根据实际情况填写', // 海康平台提供的secret
port: 443,
playMode: 0, // 0 预览 1回放
layout: '1x1' // 页面展示的模块数【16】
}
}
},
// mounted中获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成
mounted() {
// 首次加载时的到父容器的高度
this.playWndHeight = this.$refs.playWndBox.clientHeight
// 首次加载时的到父容器的宽度
this.playWndWidth = this.$refs.playWndBox.clientWidth
// 初始化播放器插件
this.$nextTick(() => {
this.initPlugin()
})
// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener('scroll', () => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(
this.$refs.playWndBox.clientWidth,
this.$refs.playWndBox.clientHeight
)
this.setWndCover()
}
})
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener('resize', (e) => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(
this.$refs.playWndBox.clientWidth,
this.$refs.playWndBox.clientHeight
)
this.setWndCover()
}
})
},
// 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
destroyed() {
if (this.oWebControl != null) {
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
this.oWebControl.JS_HideWnd()
// 销毁当前播放的视频
this.oWebControl.JS_RequestInterface({funcName: 'destroyWnd'})
// 断开与插件服务连接
this.oWebControl.JS_Disconnect()
}
},
// 方法区域
methods: {
// 创建播放实例
initPlugin() {
const that = this
this.oWebControl = null
// eslint-disable-next-line no-undef
that.oWebControl = new WebControl({
szPluginContainer: 'playWnd', // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess: () => {
// 创建WebControl实例成功
that.oWebControl
.JS_StartService('window', {
// WebControl实例创建成功后需要启动服务
// 值"./VideoPluginConnect.dll"写死
dllPath: './VideoPluginConnect.dll'
})
.then(
function () {
// 设置消息回调
that.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: that.cbIntegrationCallBack
})
// JS_CreateWnd创建视频播放窗口，宽高可设定
that.oWebControl
.JS_CreateWnd('playWnd', 2040, 945, {bEmbed: true})
// 注：2040,945这是我本人项目视频盒子的大小，你们要根据自己视频盒子的大小进行修改，不然初始化插件的时候会有空白闪烁。
.then(function () {
// 创建播放实例成功后初始化
that.init()
})
},
function () {
// 启动插件服务失败
}
)
},
// 创建WebControl实例失败
cbConnectError: function () {
that.oWebControl = null
alert('插件未启动，正在尝试启动，请稍候...')
that.$message.warning("插件未启动，正在尝试启动，请稍候...");
// 程序未启动时执行error函数，采用wakeup来启动程序
window.WebControl.JS_WakeUp('VideoWebPlugin://')
that.initCount++
if (that.initCount < 3) {
setTimeout(function () {
that.initPlugin()
}, 3000)
} else {
// gblfy 默认注释
that.messageBox = true
alert('插件启动失败，请安装插件并重新启动！')
that.downloadHikVideo()
setTimeout(function () {
that.messageBox = false
}, 5000)
setTimeout(function () {
alert('插件启动失败，请检查插件是否安装！')
that.$message({
message: '插件启动失败，请检查插件是否安装！ \n 插件下载地址：https://www.baidu.com',
type: 'warning'
});
}, 5000)
}
},
cbConnectClose: () => {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
// console.log("cbConnectClose");
that.oWebControl = null
}
})
},
// 初始化
init(callback) {
const that = this
that.getPubKey(() => {
const appkey = that.objData.appkey // 综合安防管理平台提供的appkey，必填
const secret = that.setEncrypt(that.objData.secret) // 综合安防管理平台提供的secret，必填
const ip = that.objData.ip // 综合安防管理平台IP地址，必填
const playMode = that.objData.playMode // 初始播放模式：0-预览，1-回放
const port = that.objData.port // 综合安防管理平台端口，若启用HTTPS协议，默认443
const snapDir = 'D:\\SnapDir' // 抓图存储路径
const videoDir = 'D:\\VideoDir' // 紧急录像或录像剪辑存储路径
const layout = that.objData.layout // playMode指定模式的布局
const enableHTTPS = 1 // 是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
const encryptedFields = 'secret' // 加密字段，默认加密领域为secret
const showToolbar = 1 // 是否显示工具栏，0-不显示，非0-显示
const showSmart = 1 // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
const buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' // 自定义工具条按钮
// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
that.oWebControl
.JS_RequestInterface({
funcName: 'init',
argument: JSON.stringify({
appkey: appkey, // API网关提供的appkey
secret: secret, // API网关提供的secret
ip: ip, // API网关IP地址
playMode: playMode, // 播放模式（决定显示预览还是回放界面）
port: port, // 端口
snapDir: snapDir, // 抓图存储路径
videoDir: videoDir, // 紧急录像或录像剪辑存储路径
layout: layout, // 布局
enableHTTPS: enableHTTPS, // 是否启用HTTPS协议
encryptedFields: encryptedFields, // 加密字段
showToolbar: showToolbar, // 是否显示工具栏
showSmart: showSmart, // 是否显示智能信息
buttonIDs: buttonIDs // 自定义工具条按钮
})
})
.then(function (oData) {
that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
if (callback) {
callback()
}
// 隐藏
// that.oWebControl.JS_HideWnd()
})
})
},
// 获取公钥
getPubKey(callback) {
const that = this
this.oWebControl
.JS_RequestInterface({
funcName: 'getRSAPubKey',
argument: JSON.stringify({
keyLength: 1024
})
})
.then(function (oData) {
if (oData.responseMsg.data) {
that.pubKey = oData.responseMsg.data
callback()
}
})
},
// RSA 加密
setEncrypt(value) {
const that = this
const encrypt = new window.JSEncrypt()
encrypt.setPublicKey(that.pubKey)
return encrypt.encrypt(value)
},
// 回调的消息
cbIntegrationCallBack(oData) {
const {responseMsg: type} = oData
if (type === 'error') {
// eslint-disable-next-line no-empty
} else {
}
},
// 视频预览功能
previewVideo() {
console.log("-------开始 预览---------");
const that = this
console.log("-------that.equipmentno->{}", that.equipmentno);
const cameraIndexCode = that.equipmentno // 获取输入的监控点编号值，必填
const streamMode = 0 // 主子码流标识：0-主码流，1-子码流
const transMode = 0 // 传输协议：0-UDP，1-TCP
const gpuMode = 0 // 是否启用GPU硬解，0-不启用，1-启用
const wndId = -1 // 播放窗口序号（在2x2以上布局下可指定播放窗口）
// console.log(cameraIndexCode, "-------cameraIndexCode-");
that.oWebControl.JS_RequestInterface({
funcName: 'startPreview',
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode.trim(), // 监控点编号
streamMode: streamMode, // 主子码流标识
transMode: transMode, // 传输协议
gpuMode: gpuMode, // 是否开启GPU硬解
wndId: wndId // 可指定播放窗口
})
})
},
// 停止全部预览
stopAllPreview() {
console.log("-------预览 结束---------");
this.oWebControl.JS_RequestInterface({
funcName: 'stopAllPreview'
})
},
// 格式化时间
dateFormat(oDate, fmt) {
const o = {
'M+': oDate.getMonth() + 1, // 月份
'd+': oDate.getDate(), // 日
'h+': oDate.getHours(), // 小时
'm+': oDate.getMinutes(), // 分
's+': oDate.getSeconds(), // 秒
'q+': Math.floor((oDate.getMonth() + 3) / 3), // 季度
S: oDate.getMilliseconds() // 毫秒
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(oDate.getFullYear() + '').substr(4 - RegExp.$1.length)
)
}
for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1
? o[k]
: ('00' + o[k]).substr(('' + o[k]).length)
)
}
}
return fmt
},
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
setWndCover() {
var iWidth = $(window).width()
var iHeight = $(window).height()
var oDivRect = $('#playWnd').get(0).getBoundingClientRect()
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0
iCoverLeft = (iCoverLeft > 2041) ? 2041 : iCoverLeft
iCoverTop = (iCoverTop > 945) ? 945 : iCoverTop
iCoverRight = (iCoverRight > 2041) ? 2041 : iCoverRight
iCoverBottom = (iCoverBottom > 945) ? 945 : iCoverBottom
this.oWebControl.JS_RepairPartWindow(0, 0, 2041, 946) // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft !== 0) {
this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 946)
}
if (iCoverTop !== 0) {
this.oWebControl.JS_CuttingPartWindow(0, 0, 2041, iCoverTop) // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight !== 0) {
this.oWebControl.JS_CuttingPartWindow(2041 - iCoverRight, 0, iCoverRight, 946)
}
if (iCoverBottom !== 0) {
this.oWebControl.JS_CuttingPartWindow(0, 946 - iCoverBottom, 2041, iCoverBottom)
}
}
},
//把视频预览中的playMode修改成1，插件就会自动调用回放功能
// playMode: 1, // 0 预览 1回放
//然后点击事件调用 backVideo(VideoIndex)这个函数，可以实现预览功能
// 视频回放
backVideo(VideoIndex) {
//我这是查询三天前的数据，可以根据直接需求自行修改。
//逻辑可能写的比较垃圾，我这是写死的，对着开发文档根据自己需求修改
let cameraIndexCode = VideoIndex;
let months = new Date().getMonth() + 1
let end = new Date().getFullYear() + '/' + months + '/' + new Date().getDate() + ' 23:59:59'
let endT = String(parseInt(new Date(end).getTime() / 1000));
let star = String(parseInt(new Date(end).getTime() / 1000 - 3 * 24 * 60 * 60))
this.oWebControl.JS_RequestInterface({
funcName: "startPlayback",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode.trim(), // 监控点编号
startTimeStamp: star, // 录像查询开始时间戳，单位：秒
endTimeStamp: endT, // 录像查询结束时间戳，单位：秒
recordLocation: 0, // 录像存储类型 0-中心存储 1-设备存储
transMode: 0, // 传输协议 ，0-UDP 1-TCP
gpuMode: 0, // 是否开启 GPU 硬解，0-不开启 1-开启
wndId: -1 //可指定播放窗口
})
});
},
}
}
</script>
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
智能推荐
Vue基础知识总结 1：Vue入门-程序员宅基地
文章浏览阅读8.3w次，点赞167次，收藏1.1k次。Vue基础教程系列，打造精品专栏。_vue
前端之SEO搜索引擎优化_前端seo-程序员宅基地
文章浏览阅读1.8k次。SEO（Search Engine Optimization）是指通过优化网站的内容、结构和技术，提高网站在搜索引擎中的排名，从而增加网站的曝光度和流量。_前端seo
软链接和硬链接区别-程序员宅基地
文章浏览阅读8.4k次，点赞17次，收藏89次。一、软链接:又被叫为符号链接，它包含了到原文件的路径信息。创建软链接:ln -s file link二、硬链接:是对原文件起了一个别名。创建硬链接:ln file link1.本质：硬链接：本质是同一个文件软链接：本质不是同一个文件2.跨设备硬链接：不支持软链接：支持3.inode硬链接：相同软链接：不同4.链接数硬链接：创建新的硬链接，链接数会增加，删除硬链接，链接数减少软链接：创建或删除，链接数不会变化5.文件夹硬链接：不支持软链接_软链接和硬链接区别
用栈来实现括号匹配问题_js 栈 多层成对括号-程序员宅基地
文章浏览阅读1.8k次。在这里只做简单的一个括号匹配的问题其实思想都是一样的，若碰到左的，都入栈，右的，且原来的栈不为空，则拿出来进行匹配，成功了则继续往下做，否则，直接跳出循环。在这里为了省略起见，用了stl#include#include#include#includeusing namespace std;int main() { int i, j, k, n, m; char s[100_js 栈 多层成对括号
操作系统原理与Linux实践教程申丰山版习题2的2-3答案_操作系统原理与linux申丰山课后答案-程序员宅基地
文章浏览阅读9.5k次，点赞4次，收藏47次。习题2部分答案2-3①先来先服务算法②最短作业优先算法③最短作业优先算法④最短剩余时间优先算法⑤抢占式优先数算法⑥时间片轮转算法（每个作业获得2min长的时间片）⑦最高响应比优先算法2-35个批处理作业A~E到达系统的时间、需要运行的时间及各自的优先级如下表所示，分别采用先来先服务算法、最短作业优先算法、最短作业优先算法、最短剩余时间优先算法、抢占式优先数算法、时间片轮转算法（每个作业获得2m..._操作系统原理与linux申丰山课后答案
pde中微元分析法的主要思想_销售部如何做SWOT分析：运用的管理工具PEST分析法，波特五力模型...-程序员宅基地
文章浏览阅读364次。从0开始学管理：专注科学系统提升管理能力：基础 中层 高层 综合管理销售部SWOT分析报告：一、什么是SWOT分析?二、SWOT分析模式三、SWOT分析法的规则四、SWOT分析步骤一、什么是SWOT分析1、优势2、劣势3、机会4、威胁SWOT分析法:是用来确定企业自身的竞争优势、竞争劣势、机会和威胁，从而将公司的战略与公司内部资源、外部环境有机地结合起来的一种科学的分析方法。即基于内外部竞争环境和..._旷视波特五力模型
随便推点
多元回归预测 | Matlab主成分分析PCA降维，BP神经网络回归预测。PCA-BP回归预测模型_bp多元回归预测模型-程序员宅基地
文章浏览阅读458次。多元回归预测 | Matlab主成分分析PCA降维，BP神经网络回归预测。PCA-BP回归预测模型_bp多元回归预测模型
"野马"中的桌面Java特性_access野马-程序员宅基地
文章浏览阅读1.4k次。Sun的桌面Java客户端组正在为下一版Java(代码名"野马")的某些重要特性和功能而工作；我们认为在此细说其中的某些亮点也许对您有所帮助。我们尽量给附加信息添加链接(如Bug ID或其它文章)并且在开发进程中告诉你每项特性添加到“野马”中的构建号的信息。并且随着野马的发布，这不仅只是说说而已，你可以随时从 http://mustang.dev.java.net下载到野马的最近版本。在此我们尽量_access野马
JDK基础脚本工具总结_基础工具总结-程序员宅基地
文章浏览阅读160次。本文摘自《深入理解Java虚拟机 第三版》，如此书的作者所说，虽然现在已经有个各种可视化工具实现了对命令行工具的封装，方便且体验良好。但是不论JDK发展到什么版本，或者工具如何封装，这些底层实现的基本思想都不会过时，都值得广大开发人员学习。1 基础工具：用于支持基本的程序创建和运行名称主要作用appletviewer在不适用web浏览器的情况下运行和调试Applet ，JDK11中被移除excheck检查jar冲突的工具，JDK9中被移除jar创建和管理jar文件_基础工具总结
【深度学习】ICPR 2022｜3DUNet：卷积+胶囊强强联手，医学图像分割的新良方-程序员宅基地
文章浏览阅读3.1k次。作者丨ZiyangLi编辑丨极市平台导读卷积神经网络（CNN）目前在医学图像分割领域应用广泛。本文基于胶囊网络，设计了一种包含卷积与胶囊编码器的3DUNet架构并应用于医学图像分割，在减少推理时间的同时性能远优于以往UNet类架构。论文地址：https://arxiv.org/abs/2205.09299一、为什么要引入胶囊网络（Capsule Network）？..._icpr 2022 papers
【UE4】【笔记】5、UE4学习笔记 LOD与合并静态网格体_ue的lod功能-程序员宅基地
文章浏览阅读6.2k次，点赞2次，收藏20次。UE4官方视频学习笔记——LOD与合并静态网格体大纲如下：UE4LOD自动创建工具LOD自动创建工具选择一个静态网格体，打开静态网格编辑器，并在细节面板中找到LOD Settings分组：该分组中有一个属性“LOD Group”：该属性中预存了许多类型的分组，比如Foliage、HighDetail等，当你选择其中一个的时候，UE4将会读取BaseEngine.ini中的配置数据，并按照预设好的配置为该静态网格体生成指定规格的LOD数据：手动修改LOD参数假如我们应用了Larg_ue的lod功能
无公网IP，SSH远程连接Linux CentOS服务器【内网穿透】_如何ssh到一个非固定ip的linux-程序员宅基地
文章浏览阅读972次，点赞21次，收藏26次。[TOC]本次教程我们来实现如何在外公网环境下，SSH远程连接家里/公司的Linux CentOS服务器，无需公网IP，也不需要设置路由器。_如何ssh到一个非固定ip的linux