vue实现海康实时监控代码详情

第一步：需要先下载 海康 的运行包，并在HTML中引入：

第二步：在相应的页面中开始编写，具体代码如下：

HTML部分

1.  
    
2.  
   <template>
3.  
   <el-container>
4.  
   <el-aside width="300px">
5.  
   <el-tree
6.  
   node-key="id"
7.  
   :data="treeData"
8.  
   :props="defaultProps"
9.  
   style="min-height: 580px"
10.  
    @node-click="handleNodeClick"
11.  
    />
12.  
    </el-aside>
13.  
    <el-main>
14.  
    <div ref="playWndBox">
15.  
    <!-- 视频数据站位 -->
16.  
    <div
17.  
    id="playWnd"
18.  
    class="playWnd"
19.  
    :style="{
20.  
    height: playWndHeight 'px',
21.  
    width: playWndWidth 'px',
22.  
    }"
23.  
    />
24.  
    </div>
25.  
    </el-main>
26.  
    </el-container>
27.  
    </template>

JS部分

1.  
   <script>
2.  
   import { getVideoRegionTree, getVideoInfo } from "@/api/realTimeInformation";
3.  
   export default {
4.  
   data() {
5.  
   return {
6.  
   treeData: [],
7.  
   defaultProps: {
8.  
   children: "children",
9.  
   label: "name",
10.  
    },
11.  
    // 视频盒子的高度
12.  
    playWndHeight: "",
13.  
    // 视频盒子的宽度
14.  
    playWndWidth: "",
15.  
    oWebControl: null,
16.  
    initCount: 0,
17.  
    pubKey: "",
18.  
    cameraIndexCode: "", // 监控点编号
19.  
    objData: {
20.  
    appkey: "24057559",
21.  
    ip: "172.16.100.77",
22.  
    port: 443,
23.  
    playMode: 0, // 0 预览 1回放
24.  
    layout: "2x2", //页面展示的模块数【16】
25.  
    secret: "wekC84ynkwyvLbNUnr20",
26.  
    },
27.  
    };
28.  
    },
29.  
    mounted() {
30.  
    this.getTreeList();
31.  
    // 首次加载时的到父容器的高度
32.  
    this.playWndHeight = this.$refs.playWndBox.clientHeight;
33.  
    // 首次加载时的到父容器的宽度
34.  
    this.playWndWidth = this.$refs.playWndBox.clientWidth - 140;
35.  
    // 初始化摄像头
36.  
    this.$nextTick(() => {
37.  
    this.initPlugin();
38.  
    });
39.  
    // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
40.  
    window.addEventListener("resize", () => {
41.  
    console.log(
42.  
    this.$refs.playWndBox.clientHeight,
43.  
    this.$refs.playWndBox.clientWidth
44.  
    );
45.  
    if (this.oWebControl != null) {
46.  
    this.oWebControl.JS_Resize(
47.  
    this.$refs.playWndBox.clientWidth - 140,
48.  
    this.$refs.playWndBox.clientHeight
49.  
    );
50.  
    }
51.  
    });
52.  
    },
53.  
     
54.  
    methods: {
55.  
    // 获取左侧树列表
56.  
    getTreeList() {
57.  
    getVideoRegionTree().then((res) => {
58.  
    this.treeData = res.data;
59.  
    });
60.  
    },
61.  
    handleNodeClick(data) {
62.  
    if (!data.children) {
63.  
    getVideoInfo({ videoId: data.id })
64.  
    .then((res) => {
65.  
    this.previewVideo(res.data);
66.  
    })
67.  
    .catch((err) => {
68.  
    console.log(err, "-------");
69.  
    });
70.  
    }
71.  
    },
72.  
     
73.  
    // 创建播放实例
74.  
    initPlugin() {
75.  
    let that = this;
76.  
    this.oWebControl = null;
77.  
    that.oWebControl = new WebControl({
78.  
    szPluginContainer: "playWnd", // 指定容器id
79.  
    iServicePortStart: 15900, // 指定起止端口号，建议使用该值
80.  
    iServicePortEnd: 15909,
81.  
    szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
82.  
    cbConnectSuccess: () => {
83.  
    // 创建WebControl实例成功
84.  
    that.oWebControl
85.  
    .JS_StartService("window", {
86.  
    // WebControl实例创建成功后需要启动服务
87.  
    // 值"./VideoPluginConnect.dll"写死
88.  
    dllPath: "./VideoPluginConnect.dll",
89.  
    })
90.  
    .then(
91.  
    function () {
92.  
    // 设置消息回调
93.  
    that.oWebControl.JS_SetWindowControlCallback({
94.  
    cbIntegrationCallBack: that.cbIntegrationCallBack,
95.  
    });
96.  
    //JS_CreateWnd创建视频播放窗口，宽高可设定
97.  
    that.oWebControl
98.  
    .JS_CreateWnd("playWnd", 1000, 600)
99.  
    .then(function () {
100.  
     // 创建播放实例成功后初始化
101.  
     that.init();
102.  
     });
103.  
     },
104.  
     function () {
105.  
     // 启动插件服务失败
106.  
     }
107.  
     );
108.  
     },
109.  
     // 创建WebControl实例失败
110.  
     cbConnectError: function () {
111.  
     that.oWebControl = null;
112.  
     that.$message.warning("插件未启动，正在尝试启动，请稍候...");
113.  
     // 程序未启动时执行error函数，采用wakeup来启动程序
114.  
     window.WebControl.JS_WakeUp("VideoWebPlugin://");
115.  
     that.initCount ;
116.  
     if (that.initCount < 3) {
117.  
     setTimeout(function () {
118.  
     that.initPlugin();
119.  
     }, 3000);
120.  
     } else {
121.  
     that.$message.warning("插件启动失败，请检查插件是否安装！");
122.  
     }
123.  
     },
124.  
     cbConnectClose: () => {
125.  
     // 异常断开：bNormalClose = false
126.  
     // JS_Disconnect正常断开：bNormalClose = true
127.  
     console.log("cbConnectClose");
128.  
     that.oWebControl = null;
129.  
     },
130.  
     });
131.  
     },
132.  
     // 初始化
133.  
     init(callback) {
134.  
     let that = this;
135.  
     that.getPubKey(() => {
136.  
     let appkey = that.objData.appkey; //综合安防管理平台提供的appkey，必填
137.  
     let secret = that.setEncrypt(that.objData.secret); //综合安防管理平台提供的secret，必填
138.  
     let ip = that.objData.ip; //综合安防管理平台IP地址，必填
139.  
     let playMode = that.objData.playMode; //初始播放模式：0-预览，1-回放
140.  
     let port = that.objData.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
141.  
     let snapDir = "D:\\SnapDir"; //抓图存储路径
142.  
     let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
143.  
     let layout = that.objData.layout; //playMode指定模式的布局
144.  
     let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
145.  
     let encryptedFields = "secret"; //加密字段，默认加密领域为secret
146.  
     let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
147.  
     let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
148.  
     let buttonIDs =
149.  
     "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
150.  
     // var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
151.  
     that.oWebControl
152.  
     .JS_RequestInterface({
153.  
     funcName: "init",
154.  
     argument: JSON.stringify({
155.  
     appkey: appkey, //API网关提供的appkey
156.  
     secret: secret, //API网关提供的secret
157.  
     ip: ip, //API网关IP地址
158.  
     playMode: playMode, //播放模式（决定显示预览还是回放界面）
159.  
     port: port, //端口
160.  
     snapDir: snapDir, //抓图存储路径
161.  
     videoDir: videoDir, //紧急录像或录像剪辑存储路径
162.  
     layout: layout, //布局
163.  
     enableHTTPS: enableHTTPS, //是否启用HTTPS协议
164.  
     encryptedFields: encryptedFields, //加密字段
165.  
     showToolbar: showToolbar, //是否显示工具栏
166.  
     showSmart: showSmart, //是否显示智能信息
167.  
     buttonIDs, //自定义工具条按钮
168.  
     }),
169.  
     })
170.  
     .then(function (oData) {
171.  
     that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
172.  
     if (callback) {
173.  
     callback();
174.  
     }
175.  
     // 隐藏
176.  
     // that.oWebControl.JS_HideWnd()
177.  
     });
178.  
     });
179.  
     },
180.  
     // 获取公钥
181.  
     getPubKey(callback) {
182.  
     let that = this;
183.  
     this.oWebControl
184.  
     .JS_RequestInterface({
185.  
     funcName: "getRSAPubKey",
186.  
     argument: JSON.stringify({
187.  
     keyLength: 1024,
188.  
     }),
189.  
     })
190.  
     .then(function (oData) {
191.  
     if (oData.responseMsg.data) {
192.  
     that.pubKey = oData.responseMsg.data;
193.  
     callback();
194.  
     }
195.  
     });
196.  
     },
197.  
     // RSA 加密
198.  
     setEncrypt(value) {
199.  
     let that = this;
200.  
     let encrypt = new window.JSEncrypt();
201.  
     encrypt.setPublicKey(that.pubKey);
202.  
     return encrypt.encrypt(value);
203.  
     },
204.  
     // 回调的消息
205.  
     cbIntegrationCallBack(oData) {
206.  
     let { responseMsg: type } = oData;
207.  
     if (type === "error") {
208.  
     console.log(
209.  
     type,
210.  
     type,
211.  
     this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss")
212.  
     );
213.  
     } else {
214.  
     console.log(
215.  
     type,
216.  
     type,
217.  
     this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss")
218.  
     );
219.  
     }
220.  
     },
221.  
     // 视频预览功能
222.  
     previewVideo(data) {
223.  
     let that = this;
224.  
     let cameraIndexCode = data.cameraIndexCode; // 获取输入的监控点编号值，必填
225.  
     let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
226.  
     let transMode = 0; // 传输协议：0-UDP，1-TCP
227.  
     let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
228.  
     let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）
229.  
     console.log(cameraIndexCode, "-------cameraIndexCode-");
230.  
      
231.  
     that.oWebControl.JS_RequestInterface({
232.  
     funcName: "startPreview",
233.  
     argument: JSON.stringify({
234.  
     cameraIndexCode: cameraIndexCode.trim(), // 监控点编号
235.  
     streamMode: streamMode, // 主子码流标识
236.  
     transMode: transMode, // 传输协议
237.  
     gpuMode: gpuMode, // 是否开启GPU硬解
238.  
     wndId: wndId, // 可指定播放窗口
239.  
     }),
240.  
     });
241.  
     },
242.  
     // 停止全部预览
243.  
     stopAllPreview() {
244.  
     this.oWebControl.JS_RequestInterface({
245.  
     funcName: "stopAllPreview",
246.  
     });
247.  
     },
248.  
     // 格式化时间
249.  
     dateFormat(oDate, fmt) {
250.  
     let o = {
251.  
     "M ": oDate.getMonth() 1, //月份
252.  
     "d ": oDate.getDate(), //日
253.  
     "h ": oDate.getHours(), //小时
254.  
     "m ": oDate.getMinutes(), //分
255.  
     "s ": oDate.getSeconds(), //秒
256.  
     "q ": Math.floor((oDate.getMonth() 3) / 3), //季度
257.  
     S: oDate.getMilliseconds(), //毫秒
258.  
     };
259.  
     if (/(y )/.test(fmt)) {
260.  
     fmt = fmt.replace(
261.  
     RegExp.$1,
262.  
     (oDate.getFullYear() "").substr(4 - RegExp.$1.length)
263.  
     );
264.  
     }
265.  
     for (let k in o) {
266.  
     if (new RegExp("(" k ")").test(fmt)) {
267.  
     fmt = fmt.replace(
268.  
     RegExp.$1,
269.  
     RegExp.$1.length == 1
270.  
     ? o[k]
271.  
     : ("00" o[k]).substr(("" o[k]).length)
272.  
     );
273.  
     }
274.  
     }
275.  
     return fmt;
276.  
     },
277.  
     },
278.  
     // 组件销毁后
279.  
     destroyed() {
280.  
     if (this.oWebControl != null) {
281.  
     // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
282.  
     this.oWebControl.JS_HideWnd();
283.  
     // 销毁当前播放的视频
284.  
     this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
285.  
     // 断开与插件服务连接
286.  
     this.oWebControl.JS_Disconnect();
287.  
     }
288.  
     },
289.  
     };
290.  
     </script>

css样式部分如下

1.  
   <style lang="scss" scoped>
2.  
   .playWnd {
3.  
   margin: 30px 0 0 50px;
4.  
   width: 900px;
5.  
   height: 500px;
6.  
   border: 1px solid red;
7.  
   }
8.  
   .cbInfoDiv {
9.  
   float: left;
10.  
    width: 360px;
11.  
    margin-left: 16px;
12.  
    border: 1px solid #7f9db9;
13.  
    }
14.  
    .cbInfo {
15.  
    height: 200px;
16.  
    padding: 5px;
17.  
    border: 1px solid #7f9db9;
18.  
    word-break: break-all;
19.  
    overflow: scroll／auto;
20.  
    }
21.  
    .operate {
22.  
    margin-top: 24px;
23.  
    }
24.  
    .operate::after {
25.  
    content: "";
26.  
    display: block;
27.  
    clear: both;
28.  
    }
29.  
    .operate .btns {
30.  
    height: 32px;
31.  
    }
32.  
    .module {
33.  
    float: left;
34.  
    width: 120px;
35.  
    min-height: 290px;
36.  
    margin-left: 10px;
37.  
    padding: 16px 8px;
38.  
    box-sizing: border-box;
39.  
    border: 1px solid #e5e5e5;
40.  
    }
41.  
    .module .item {
42.  
    margin-bottom: 4px;
43.  
    }
44.  
    .module .label {
45.  
    width: 150px;
46.  
    display: inline-block;
47.  
    vertical-align: middle;
48.  
    margin-right: 8px;
49.  
    text-align: right;
50.  
    }
51.  
    .module input[type="text"],
52.  
    .module select {
53.  
    box-sizing: border-box;
54.  
    display: inline-block;
55.  
    vertical-align: middle;
56.  
    margin-left: 0;
57.  
    width: 150px;
58.  
    min-height: 20px;
59.  
    }
60.  
    .module .btn {
61.  
    min-width: 80px;
62.  
    min-height: 24px;
63.  
    margin-top: 16px;
64.  
    margin-left: 158px;
65.  
    }
66.  
    .el-aside {
67.  
    margin: 0px;
68.  
    height: 84vh;
69.  
    color: #333;
70.  
    background-color: #d3dce6;
71.  
    }
72.  
    .el-main {
73.  
    background-color: #e9eef3;
74.  
    color: #333;
75.  
    text-align: center;
76.  
    }
77.  
    </style>

这里需要下载海康的插件才可以查看

这篇好文章是转载于：学新通技术网