vue引入海康播放实时监控(包含遮挡裁剪，销毁窗口方法，设置初始化窗口数)
项目需要引入海康平台的实时监控，甲方已经有海康官方平台播放地址，我们需要的是将实时监控引入我们页面，因为我们的摄像头在海康平台都可以直接播放，所以我们引入的是插件版本。（：注：直流播放不要用这种方式，用无插件或控件版本，具体询问官方客服）
在海康官方客服处领取下载了海康的有控件版本，无插件及控件版本引入类似
index.html
注：框起来是我们项目的解析地址，我们的是存在static里的，这个地方很容易报错，类似webcontrol undefined等等，报错后基本是地址引入问题，把相对路径，绝对路径各种都尝试下，总有一个可以。
<script src="<%= BASE_URL %>static/hikvideo/jquery-1.12.4.min.js"></script>
<script src="<%= BASE_URL %>static/hikvideo/jsencrypt.min.js"></script>
<script src="<%= BASE_URL %>static/hikvideo/jsWebControl-1.0.0.min.js"></script>
页面引入：
// 进入页面要先设置ip appkey secret才能成功初始化，这里是在登陆后存了缓存,不变的话可以 直接在组件写死 // localStorage.setItem("appKey"); // 综合安防管理平台提供的appkey，必填 // localStorage.setItem("appSecret"); // 综合安防管理平台提供的secret，必填 // localStorage.setItem("ip"); // 综合安防管理平台IP地址，必填 // show()根据从后台获取到的code实现实时预览 // initShow() 初始化海康插件 // stopAllPreview() 停止预览 //this.$refs.myVedio.cutting 裁剪被海康插件遮挡需要显示的内容 //reduction() 被遮挡的内容关闭后还原被裁减的海康插件 // :wnd-num.sync="WndNum" 设置播放窗口数，不需要就直接组件设成默认4或者9 // :layout.sync="layout" 设置窗口排列方式，不需要就直接组件设成默认2x2或者3x3 // this.$refs.myVedio.back() 离开页面调用销毁插件，断开连接
<template>
<div class="app-main">
<!-- <scmsa-split split="vertical" :min-percent="10" :default-percent="15"> -->
<!-- <div slot="paneL">
<el-input v-model="keyword" placeholder="搜索" clearable />
<div class="paneL-tree">
<el-tree
ref="tree"
class="filter-tree"
:data="treeData"
:props="treeProps"
default-expand-all
:filter-node-method="filterNode"
:highlight-current="true"
@node-click="handleClick"
/>
</div>
</div> -->
<!-- <el-button type="primary" v-hasPermi="['placementIntegration:setting']"
>111</el-button
> -->
<div class="headBox">
<span @click="handleOpen"><i class="el-icon-setting" /> 配置点位</span>
</div>
<div id="paneR" slot="paneR">
<my-vedio
ref="myVedio"
:o-width="oWidth"
:o-height="oHeight"
:role="role"
:play-mode="0"
:wnd-num.sync="WndNum"
:layout.sync="layout"
:show="show"
/>
</div>
<el-dialog
id="dialogBox"
:append-to-body="true"
title="选择视频点位"
:visible.sync="dialogVisible"
width="30%"
:fullscreen="false"
@close="handleClose"
>
<div>
<el-input v-model="seachValue" placeholder="请输入内容" maxlength="30">
<el-button slot="append" icon="el-icon-search" @click="getList(1)" />
</el-input>
<div>
<div style="color: red; font-size: 12px; margin-top: 10px">
最多可选{
{ WndNum }}个视频
</div>
<el-checkbox-group
v-model="checkedSpotsId"
:max="WndNum"
style="max-height: 200px; overflow: auto; margin-top: 10px"
>
<el-checkbox v-for="item in spots" :key="item.id" :label="item.id">
{
{ item.deviceName }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleEdit">确 定</el-button>
</span>
</el-dialog>
<!-- <el-dialog
title="电子围栏："
:visible.sync="dialogVisible"
width="1000px"
height="660px"
>
<iframe
frameborder="0"
width="1000px"
height="600px"
style="position: absolute; margin-top: -85px; margin-left: -20px"
/>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog> -->
<!-- </scmsa-split> -->
</div>
</template>
<script>
import ResizeObserver from 'resize-observer-polyfill'
// import * as api from "@/api/vedio.js";
import myVedio from '@/views/placementIntegration/components/vedio'
import { hikScreen } from './api/index'
export default {
components: {
myVedio
},
data() {
return {
dialogVisible: false,
keyword: '',
treeData: [],
treeProps: {
children: 'children',
label: 'nodeName'
},
role: 0, // 0：普通用户，1：可以操作摄像头用户
oHeight: 0,
oWidth: 0,
// 配置查询关键字
seachValue: '',
// 多选框
// 默认播放
checkedSpots: [],
// 默认点亮
checkedSpotsId: [],
// 多选选项
spots: [],
// 窗口数
WndNum: 4,
layout: '2x2'
}
},
beforeRouteLeave(to, from, next) {
// 导航离开当前路由的时候被调用，this可以被访问到
// console.log(to.name, from, "//"); // 可以访问this
// var that = this;
// console.log("beforeRouteLeave");
// if (to.name !== "PlacementIntegration") {
if (this.$refs.myVedio) {
this.$refs.myVedio.back()
}
// }
next()
},
computed: {
//我们导航栏菜单的下拉菜单被海康插件遮挡计算裁剪区域，不需要的去掉
getStoreItem() {
//监听下拉弹窗是否显示
return this.$store.state.user.dropdownVisible
},
//我们导航栏菜单的右键菜单被海康插件遮挡计算裁剪区域，不需要的去掉
getStoreItemRight() {
//监听右键菜单弹窗是否显示
return this.$store.state.user.rightMenuLeft
}
},
watch: {
keyword(val) {
this.$refs.tree.filter(val)
},
// $route(to, from) {
// console.log("this.$route", to, from);
// if (to.name !== "PlacementIntegration") {
// this.$refs.myVedio.back();
// }
// },
getStoreItem() {
if (
this.$store.state.user.dropdownVisible &&
this.$route.name === 'PlacementIntegration'
) {
this.$nextTick(() => {
this.$refs.myVedio.reduction('drop')
})
var top = localStorage.getItem('dropdownTop')
var width = localStorage.getItem('dropdownWidth')
var left = localStorage.getItem('dropdownLeft')
var height = localStorage.getItem('dropdownHeight')
this.$nextTick(() => {
const playWnd = document.getElementById('paneR')
// let dialogBox = document.getElementById("dialogBox");
var headconWidth = $('.sidebar-logo-container').width()
// 计算裁剪的偏移量
this.$refs.myVedio.cutting(
left - playWnd.offsetLeft - headconWidth,
0,
width,
height - (playWnd.offsetTop + 84 - top)
)
// console.log("ccc", this.$refs.myVedio.getWndNum());
// this.$refs.myVedio.getWndNum();
// this.getList(2);
// this.show();
})
} else if (
!this.$store.state.user.rightMenuVisible &&
this.$route.name === 'PlacementIntegration'
) {
// this.handleClose();
// let playWnd = document.getElementById("dialogBox");
this.$nextTick(() => {
this.$refs.myVedio.reduction('drop')
})
}
},
getStoreItemRight() {
if (
this.$store.state.user.rightMenuVisible &&
this.$route.name === 'PlacementIntegration'
) {
this.$nextTick(() => {
this.$refs.myVedio.reduction('drop')
})
var top = this.$store.state.user.rightMenuTop
var width = localStorage.getItem('rightMenuWidth')
var left = this.$store.state.user.rightMenuLeft
var height = localStorage.getItem('rightMenuHeight')
this.$nextTick(() => {
const playWnd = document.getElementById('paneR')
// let dialogBox = document.getElementById("dialogBox");
var headconWidth = $('.sidebar-logo-container').width()
// 计算裁剪的偏移量
this.$refs.myVedio.cutting(
left - playWnd.offsetLeft + 2,
0,
width,
height - (playWnd.offsetTop + 84 - top)
)
// console.log("ccc", this.$refs.myVedio.getWndNum());
// this.$refs.myVedio.getWndNum();
// this.getList(2);
// this.show();
})
}
// if (
// !this.$store.state.user.rightMenuVisible &&
// this.$route.name === "PlacementIntegration"
// )
else if (this.$route.name === 'PlacementIntegration') {
// this.handleClose();
// let playWnd = document.getElementById("dialogBox");
this.$nextTick(() => {
// 窗口还原
this.$refs.myVedio.reduction('drop')
})
}
}
},
// 离开页面销毁窗口，断开连接
beforeDestroy() {
if (this.$refs.myVedio) {
this.$refs.myVedio.back()
}
},
created() {
// this.getList();
// this.getUserOrgId();
},
// mounted() {
// // window.addEventListener("storage", (event) => {
// // if (event.key === "dropdownVisible") {
// // console.log("dropdownVisible", event.newValue);
// // }
// // });
// },
mounted() {
// 初始化海康插件
this.initShow()
// 获取初始化播放列表 都是业务逻辑，不需要的可以不用管
this.getList()
//重点关注
// 进入页面要先设置ip appkey secret才能成功初始化，这里是在登陆后存了缓存,不变的话可以直接在组件写死
// localStorage.setItem("appKey"); // 综合安防管理平台提供的appkey，必填
// localStorage.setItem("appSecret"); // 综合安防管理平台提供的secret，必填
// localStorage.setItem("ip"); // 综合安防管理平台IP地址，必填
// show()根据从后台获取到的code实现实时预览
// initShow() 初始化海康插件
// stopAllPreview() 停止预览
//this.$refs.myVedio.cutting 裁剪被海康插件遮挡需要显示的内容
//reduction() 被遮挡的内容关闭后还原被裁减的海康插件
// :wnd-num.sync="WndNum" 设置播放窗口数，不需要就直接组件设成默认4或者9
// :layout.sync="layout" 设置窗口排列方式，不需要就直接组件设成默认2x2或者3x3
// this.$refs.myVedio.back() 离开页面调用销毁插件，断开连接
},
methods: {
initShow() {
this.$refs.myVedio.initPlugin()
const that = this
this.oHeight = $(window).height() - 160
// this.oHeight = $(window).height() - 100;
// this.oWidth = $("#paneR").height();
this.oWidth = $('#paneR').width()
// console.log("this.oHeight", this.oHeight, " this.oWidth", this.oWidth);
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
const element = document.getElementById('paneR') // dom注意ref=“paneR”不要写在组件上，容易无效
// 监听及监听后操作
const robserver = new ResizeObserver((entries) => {
if (that.$refs.myVedio.oWebControl != null) {
that.$refs.myVedio.oWebControl.JS_Resize(
entries[0].contentRect.width,
that.oHeight
)
}
})
robserver.observe(element)
},
// 修改保存的播放列表，这是我们的业务逻辑，与海康播放无关
handleEdit() {
this.dialogVisible = false
// console.log("checkedSpots", this.checkedSpots, thischeckedSpotsId);
const params = {
list: this.checkedSpotsId,
layout: this.layout
}
hikScreen.edit(params).then((res) => {
if (res.code === "0") {
this.$message({
message: '保存成功',
type: 'success'
})
// this.initShow();
this.getList()
}
// console.log("res");
// this.spots = res.data;
})
},
getList(flag) {
// const params = {
// deviceName: this.seachValue,
// };
hikScreen.list(this.seachValue).then((res) => {
this.spots = res.data
var that = this
if (flag !== 1) {
hikScreen.selectlist().then((res) => {
if (res.data.code.length > 0) {
that.checkedSpots = []
that.checkedSpotsId = []
// res.data.code.forEach((item) => {
// that.checkedSpots.push(item.deviceCode);
// });
res.data.code.forEach((ele, index) => {
var xData = that.spots.find((item) => {
return item.id === ele.deviceInfoId
})
if (xData) {
that.checkedSpots.push(xData.deviceCode)
that.checkedSpotsId.push(ele.deviceInfoId)
// that.checkedSpots = that.checkedSpots.splice(index, 1);
}
// xData
})
if (that.checkedSpots.length > that.WndNum) {
that.checkedSpots.splice(that.WndNum - 1, that.checkedSpots.length - that.WndNum)
that.checkedSpotsId.splice(that.WndNum - 1, that.checkedSpotsId.length - that.WndNum)
}
// this.$forceUpdate()
// this.layout = res.data.code[0].layout;
// that.show();
if (flag !== 2) {
this.$nextTick(() => {
this.layout = res.data.code[0].layout
this.$refs.myVedio.stopAllPreview()
this.$refs.myVedio.init()
})
}
// setTimeout(this.$refs.myVedio.init(), 5000);
// this.initShow();
}
// console.log("res");
// this.spots = res.data;
})
}
})
},
handleOpen() {
this.getList(2)
this.dialogVisible = true
this.$nextTick(() => {
const playWnd = document.getElementById('paneR')
const dialogBox = document.getElementById('dialogBox')
var headconWidth = $('.sidebar-logo-container').width()
// console.log(
// "sidebar-logo-container",
// document.getElementById("sidebar-logo-container"),
// headconWidth
// );
// 计算裁剪的偏移量
this.$refs.myVedio.cutting(
dialogBox.childNodes[0].offsetLeft -
playWnd.offsetLeft -
headconWidth,
0,
dialogBox.childNodes[0].offsetWidth + 2,
dialogBox.childNodes[0].offsetHeight -
(playWnd.offsetTop + 84 - dialogBox.childNodes[0].offsetTop)
)
// console.log("ccc", this.$refs.myVedio.getWndNum());
// this.$refs.myVedio.getWndNum();
// this.getList(2);
// this.show();
})
},
show() {
// const code = [
// "dc14243a7b1447778299bfc0b8bc8d3d",
// // "a942f916f5644cdb940bb8c1bd843a5c",
// // "453320f459f142b0a18c946662489619",
// // "b6ac907050574a4fac20b0447e2a8289",
// ];
this.checkedSpots.forEach((item, index) => {
this.$refs.myVedio.startPreview(item, index + 1)
})
// code.forEach((item) => {
// this.$refs.myVedio.startPreview(item);
// });
},
handleClose() {
const playWnd = document.getElementById('dialogBox')
this.$refs.myVedio.reduction(playWnd)
this.seachValue = ''
}
// 获取组织id
// getUserOrgId() {
// api
// .getUserOrgId({ userId: this.$store.state.user.userInfo.username })
// .then((res) => {
// if (res.code === "0") {
// this.getDeviceTree(res.data.organizationId);
// this.getRoleList(res.data.organizationId);
// } else {
// this.$message({
// type: "error",
// message: res.message,
// });
// }
// });
// },
// 获取角色列表
// getRoleList(organizationId) {
// const that = this;
// api.getRoleList({ orgId: organizationId }).then((res) => {
// res.data.forEach((ele) => {
// if (ele.roleId === "ff91429f-e56c-46ab-bc90-f22647a20c09") {
// // 是否可以操作摄像头角色
// that.role = 1;
// }
// });
// that.$refs.myVedio.initPlugin();
// });
// },
// 获取组织树
// getDeviceTree(organizationId) {
// const data = {
// userId: this.$store.state.user.userInfo.username,
// orgId: organizationId,
// cameraName: "",
// };
// api.deviceTree(data).then((res) => {
// if (res.code === "0") {
// this.treeData = res.data;
// } else {
// this.$message({
// type: "error",
// message: res.message,
// });
// }
// });
// },
// handleClick(data) {
// this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
// if (data.nodeType === 2) {
// this.$refs.myVedio.startPreview(data.nodeId);
// }
// },
// filterNode(value, data) {
// if (!value) return true;
// return data.nodeName.indexOf(value) !== -1;
// },
}
}
</script>
<style lang="scss" scoped>
.app-main {
width: 100%;
height: 100%;
padding: 20px;
// background: bisque;
// display: grid;
}
#paneR {
width: 100%;
height: calc(100% - 30px);
// display: block;
// background: lawngreen;
}
.headBox {
height: 30px;
width: 100%;
text-align: right;
}
// .split-demo-page {
// width: 100%;
// height: calc(100vh - 140px);
// .playWnd {
// margin: 0;
// /*播放容器的宽和高设定*/
// height: calc(100% - 140px);
// }
// }
// .paneL-tree {
// height: calc(100vh - 180px);
// overflow-y: auto;
// &::-webkit-scrollbar {
// width: 3px;
// }
// &::-webkit-scrollbar-thumb {
// background: #d8d8d8;
// border-radius: 10px;
// }
// &::-webkit-scrollbar-track-piece {
// background: transparent;
// }
// }
</style>
封装组件vedio：
这个可以复用
<template>
<div id="vedio">
<div id="playWnd" class="playWnd" />
<el-button v-if="isDownLoad" type="primary" @click="downLoadPlugin()"
>插件启动失败，请下载安装插件，安装成功后请刷新页面！</el-button
>
</div>
</template>
<script>
export default {
props: {
oWidth: {
type: Number,
default: 0,
required: true,
},
oHeight: {
type: Number,
default: 0,
required: true,
},
playMode: {
// 播放模式 0预览 1回放
type: Number,
default: 0,
required: true,
},
role: {
// 是否可以操作摄像头 0 不可以 1 可以
type: Number,
default: 0,
required: true,
},
WndNum: {
// 是否可以操作摄像头 0 不可以 1 可以
type: Number,
default: 4,
required: true,
},
layout: {
type: String,
default: "2x2",
required: true,
},
show: {
// 是否可以操作摄像头 0 不可以 1 可以
type: Function,
default: () => {},
},
},
data() {
return {
isDownLoad: false,
buttonIDs: ",258,512,513", // 258电子放大，512预览云台控制，513 3D放大，
oWebControl: null, // 播放插件
initCount: 0,
pubKey: "",
};
},
// activated() {
// if (this.oWebControl != null) {
// this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
// this.oWebControl.JS_Disconnect().then(
// function () {
// // 断开与插件服务连接成功
// console.log("断开与插件服务连接成功");
// },
// function () {
// // 断开与插件服务连接失败
// console.log("断开与插件服务连接失败");
// }
// );
// }
// },
// watch: {
// WndNum222() {
// console.log("WndNum222", WndNum222);
// },
// // this.oWebControl.JS_SetWindowControlCallback(function () {
// // console.log("111111");
// // // if (oWebControl != null) {
// // // oWebControl.JS_Resize(800, 400);
// // // setWndCover();
// // // }
// // });
// },
// computed: {
// WndNum222() {
// return this.oWebControl.JS_SetWindowControlCallback({
// cbIntegrationCallBack: function (oData) {
// // oData 是封装的视频 web 插件回调消息的消息体
// console.log("sssssss", JSON.stringify(oData)); // 打印消息体至控制台
// // return JSON.stringify(oData);
// },
// });
// },
// },
// mounted() {
// this.$root.eventHub.$on('事件名', (callback)=>{}）
// },
methods: {
// // 设置窗口控制回调
// setCallbacks() {
// this.oWebControl.JS_SetWindowControlCallback({
// cbIntegrationCallBack: cbIntegrationCallBack
// });
// },
// 获取当前窗口个数
getWndNum() {
var WndNum = 1;
var that = this;
this.oWebControl
.JS_RequestInterface({
funcName: "getLayout",
})
.then(function (oData) {
//分析窗口数
var Data = JSON.stringify(oData.responseMsg.data);
Data = Data.replace(/\\n/g, "");
Data = Data.replace(/\\/g, "");
Data = Data.replace(/\"{/g, "{");
Data = Data.replace(/}\"/g, "}");
WndNum = JSON.parse(Data).wndNum;
// that.$emit("getWndNumm", WndNum);
that.$emit("update:WndNum", WndNum);
// if (that.code.length > that.WndNum) {
// that.code.splice(0, that.code.length - that.WndNum);
// }
// that.listt = [];
// // var that=this
// that.code.forEach((item, i) => {
// var text = {
// authUuid: "",
// cameraIndexCode: item,
// ezvizDirect: 0,
// gpuMode: 0,
// streamMode: 0,
// transMode: 1,
// wndId: i + 1,
// };
// that.listt.push(text);
// });
// that.preview();
// for (i = 0; i < WndNum; i++) {
// var cameraIdx = cameraIndexArray[i % arraySize];
// var previewParam = JSON.stringify({
// argument: {
// authUuid: "",
// cameraIndexCode: cameraIdx,
// ezvizDirect: 0,
// gpuMode: 0,
// streamMode: 0,
// transMode: 1,
// wndId: i + 1,
// cascade: 1,
// },
// funcName: "startPreview",
// });
// requestInterface(previewParam);
// }
});
},
// 裁剪窗口
cutting(l, t, w, h) {
this.oWebControl.JS_CuttingPartWindow(l, t, w, h); //注：this.playWnd为 document.getElementById("playWnd")
},
//还原窗口
reduction(playWnd) {
if (playWnd === "drop") {
this.oWebControl.JS_RepairPartWindow(0, 0, 1920, 608);
} else {
this.oWebControl.JS_RepairPartWindow(
0,
0,
playWnd.offsetWidth,
playWnd.offsetHeight
);
}
// this.oWebControl.JS_RepairPartWindow(
// 0,
// 0,
// playWnd.offsetWidth,
// playWnd.offsetHeight
// );
},
// 销毁窗口
back() {
if (this.oWebControl != null) {
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
this.oWebControl.JS_Disconnect().then(
function () {
// 断开与插件服务连接成功
console.log("断开与插件服务连接成功");
},
function () {
// 断开与插件服务连接失败
console.log("断开与插件服务连接失败");
}
);
}
},
createPlayer() {
let that = this;
console.log("创建");
this.myPlugin = new JSPlugin({
szId: "playWind", //需要英文字母开头 必填
szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
iWidth: 600,
iHeight: 400,
// 分屏播放，默认最大分屏4*4
iMaxSplit: 1,
iCurrentSplit: 1,
openDebug: true,
// 样 式
oStyle: {
// border: "#343434",
// borderSelect: "#FFCC00",
// background: "#000"
},
});
this.myPlugin.JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) {
//插件选中窗口回调
console.log("windowSelect callback: ", iWndIndex);
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
//插件错误回调
console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
uni.postMessage({
data: {
action: "tip",
data: oError,
},
});
},
windowEventOver: function (iWndIndex) {
//鼠标移过回调
console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) {
//鼠标移出回调
console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) {
//鼠标mouseup事件回调
console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) {
//全屏切换回调
uni.postMessage({
data: {
action: "fullScreen",
data: bFull,
},
});
console.log("fullScreen callback: ", bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
//首帧显示回调
console.log(
"firstFrame loaded callback: ",
iWndIndex,
iWidth,
iHeight
);
},
performanceLack: function () {
//性能不足回调
uni.postMessage({
data: {
action: "downLoad",
data: "性能不足",
},
});
},
});
},
// 创建播放实例
initPlugin() {
const that = this;
this.oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () {
// 创建WebControl实例成功
that.oWebControl
.JS_StartService("window", {
// WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
})
.then(
function () {
// 启动插件服务成功
that.oWebControl.JS_SetWindowControlCallback({
// 设置消息回调
cbIntegrationCallBack: that.cbIntegrationCallBack,
});
that.oWebControl
.JS_CreateWnd("playWnd", that.oWidth, that.oHeight)
.then(function () {
// JS_CreateWnd创建视频播放窗口，宽高可设定
that.init(); // 创建播放实例成功后初始化
});
},
function () {
// 启动插件服务失败
}
);
},
cbConnectError: function () {
// 创建WebControl实例失败
that.oWebControl = null;
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
that.initCount++;
if (that.initCount < 3) {
setTimeout(function () {
that.initPlugin();
}, 3000);
} else {
$("#playWnd").html("");
that.isDownLoad = true;
}
},
cbConnectClose: function (bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose");
this.oWebControl = null;
},
});
},
// 初始化
init() {
const that = this;
// console.log(process.env.VUE_APP_VEDIOIP)
this.getPubKey(function () {
// 请自行修改以下变量值
const appkey = localStorage.getItem("appKey"); // 综合安防管理平台提供的appkey，必填
const secret = that.setEncrypt(localStorage.getItem("appSecret")); // 综合安防管理平台提供的secret，必填
const ip = localStorage.getItem("ip"); // 综合安防管理平台IP地址，必填
// const appkey = process.env.VUE_APP_VEDIOKEY; // 综合安防管理平台提供的appkey，必填
// const secret = that.setEncrypt(process.env.VUE_APP_VEDIOSECRET); // 综合安防管理平台提供的secret，必填
// const ip = process.env.VUE_APP_VEDIOIP; // 综合安防管理平台IP地址，必填
const playMode = that.playMode; // 初始播放模式：0-预览，1-回放
const port = 443; // 综合安防管理平台端口，若启用HTTPS协议，默认443
const snapDir = "D:\\SnapDir"; // 抓图存储路径
const videoDir = "D:\\VideoDir"; // 紧急录像或录像剪辑存储路径
// const layout = that.playMode === 0 ? "2x2" : "1x1"; // playMode指定模式的布局
const layout = that.layout;
const enableHTTPS = 1; // 是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
const encryptedFields = "secret"; // 加密字段，默认加密领域为secret
const showToolbar = 1; // 是否显示工具栏，0-不显示，非0-显示
const showSmart = 1; // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
let buttonIDs = "0,16,256,257,259,260,514,515,516,517,768,769"; // 自定义工具条按钮
const reconnectTimes = 1; // 重连次数
if (that.role === 1) {
buttonIDs += that.buttonIDs;
}
// 请自行修改以上变量值
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, // 自定义工具条按钮
reconnectTimes: reconnectTimes, // 重连次数
}),
})
.then(function (oData) {
that.oWebControl.JS_Resize(that.oWidth, that.oHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
that.show();
// that.$emit("getList");
});
});
},
// 获取公钥
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();
}
});
},
// 推送消息
cbIntegrationCallBack(oData) {
// console.log("oData", oData);
if (oData && oData.responseMsg && oData.responseMsg.type === 6) {
// WndNum = JSON.parse(Data).wndNum;
var WndNum = oData.responseMsg.msg.wndNum;
var layout = oData.responseMsg.msg.layout;
// that.$emit("getWndNumm", WndNum);
this.$emit("update:WndNum", WndNum);
this.$emit("update:layout", layout);
}else{
this.getWndNum()
}
// showCBInfo(JSON.stringify(oData.responseMsg));
},
//停止全部预览
stopAllPreview() {
// $("#stopAllPreview").click(function () {
// oWebControl.JS_RequestInterface({
// funcName: "stopAllPreview"
// });
this.oWebControl.JS_RequestInterface({
funcName: "stopAllPreview",
// argument: JSON.stringify(params),
});
// this.init();
},
// 视频预览功能
startPreview(cameraIndexCode, wndIdex, startTime, endTime) {
// 设置录像回放时间的默认值
const recordLocation = 0; // 录像存储位置：0-中心存储，1-设备存储
const streamMode = 0; // 主子码流标识：0-主码流，1-子码流
const transMode = 1; // 传输协议：0-UDP，1-TCP
const gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
// const wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）
const wndId = wndIdex; // 播放窗口序号（在2x2以上布局下可指定播放窗口）
let funcname = ""; // 视频播放方式 预览 、回放
const params = {
cameraIndexCode: cameraIndexCode, // 监控点编号
transMode: transMode, // 传输协议
gpuMode: gpuMode, // 是否开启GPU硬解
wndId: wndId, // 可指定播放窗口
};
if (this.playMode === 0) {
funcname = "startPreview";
Object.assign(params, {
streamMode: streamMode, // 主子码流标识
});
} else {
const startTimeStamp = new Date(
startTime.replace("-", "/").replace("-", "/")
).getTime(); // 回放开始时间戳，必填
const endTimeStamp = new Date(
endTime.replace("-", "/").replace("-", "/")
).getTime(); // 回放结束时间戳，必填
funcname = "startPlayback";
Object.assign(params, {
startTimeStamp: Math.floor(startTimeStamp / 1000).toString(), // 录像查询开始时间戳，单位：秒
endTimeStamp: Math.floor(endTimeStamp / 1000).toString(), // 录像结束开始时间戳，单位：秒
recordLocation: recordLocation, // 录像存储类型：0-中心存储，1-设备存储
});
}
// console.log(params);
this.oWebControl.JS_RequestInterface({
funcName: funcname,
argument: JSON.stringify(params),
});
},
// RSA加密
setEncrypt(value) {
const encrypt = new JSEncrypt();
encrypt.setPublicKey(this.pubKey);
return encrypt.encrypt(value);
},
// 格式化时间
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;
},
// 下载插件
downLoadPlugin() {
// window.location.href =
// process.env.VUE_APP_BASE_API + "/static/VideoWebPlugin.exe";
window.location.href = "/static/VideoWebPlugin.exe";
},
},
};
</script>
<style></style>