第一步:需要先下载 海康 的运行包,并在HTML中引入:
第二步:在相应的页面中开始编写,具体代码如下:
HTML部分
<template>
<el-container>
<el-aside width="300px">
<el-tree
node-key="id"
:data="treeData"
:props="defaultProps"
style="min-height: 580px"
@node-click="handleNodeClick"
/>
</el-aside>
<el-main>
<div ref="playWndBox">
<!-- 视频数据站位 -->
<div
id="playWnd"
class="playWnd"
:style="{
height: playWndHeight + 'px',
width: playWndWidth + 'px',
}"
/>
</div>
</el-main>
</el-container>
</template>
JS部分
<script>
import { getVideoRegionTree, getVideoInfo } from "@/api/realTimeInformation";
export default {
data() {
return {
treeData: [],
defaultProps: {
children: "children",
label: "name",
},
// 视频盒子的高度
playWndHeight: "",
// 视频盒子的宽度
playWndWidth: "",
oWebControl: null,
initCount: 0,
pubKey: "",
cameraIndexCode: "", // 监控点编号
objData: {
appkey: "24057559",
ip: "172.16.100.77",
port: 443,
playMode: 0, // 0 预览 1回放
layout: "2x2", //页面展示的模块数【16】
secret: "wekC84ynkwyvLbNUnr20",
},
};
},
mounted() {
this.getTreeList();
// 首次加载时的到父容器的高度
this.playWndHeight = this.$refs.playWndBox.clientHeight;
// 首次加载时的到父容器的宽度
this.playWndWidth = this.$refs.playWndBox.clientWidth - 140;
// 初始化摄像头
this.$nextTick(() => {
this.initPlugin();
});
// 监听resize事件,使插件窗口尺寸跟随DIV窗口变化
window.addEventListener("resize", () => {
console.log(