二十分钟速成海康视频接web系统

最新推荐文章于 2024-09-11 17:47:44 发布

竹春

最新推荐文章于 2024-09-11 17:47:44 发布

阅读量1.7k

点赞数 1

分类专栏：笔记第三方插件使用指南文章标签： javascript html html5 vue.js css

本文链接：https://blog.csdn.net/cmy0816/article/details/108521581

版权

本文提供一个二十分钟内完成海康视频接入Web系统的教程，旨在简化复杂流程。通过分享一个简单的DEMO，展示如何实现实时查看图像功能。关键步骤包括引入依赖文件、实例化API，并注意配合官方视频插件使用。代码已提供，适用于大多数系统，直接粘贴即可运行。如有问题，作者提供私信支持。

摘要由CSDN通过智能技术生成

二十分钟速成海康视频接web系统

前几天有需求一个系统要接入海康视频，看着三十多页的开发指南…陷入了沉思。
为了解救广大同胞于水火之中，所以写了一个简单的小demo，便于快速接入。本demo只有一个功能（实时查看图像），但对于大部分系统来说，已经够用了。

隐私原因，修改了配置。如果配置正确的话，下面的四个窗口是能正常出现图像的。
在这里插入图片描述

需要引入依赖文件，一共有两个文件
jsencrypt.min.js和jsWebControl-1.0.0.min.js

如果是html的话，可以直接引入，但现在大多项目都是单页面应用，可以在public中的html中引入

开始进行实例化（这些代码都是从官方的API和DEMO中粘贴出来的）

    var oWebControl;
    ...
    // 实例化
    initWebControl() {
      let that = this;
      oWebControl = new WebControl({
        // 创建 WebControl 实例

        szPluginContainer: "playWnd", // 要绑定容器的id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15909, // 用于 IE10 使用 ActiveX 的 clsid
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
        cbConnectSuccess: function () {
          // 创建 WebControl 实例成功
          console.log("创建 WebControl 实例成功");
          // 实例创建成功后启动服务
          oWebControl
            .JS_StartService("window", {
              dllPath: "./VideoPluginConnect.dll", //
            })
            .then(
              function () {
                console.log("插件启用成功");
                // 启动插件服务成功

                // 设置消息回调
                // oWebControl.JS_SetWindowControlCallback({
                //   cbIntegrationCallBack: cbIntegrationCallBack,
                // });

                //JS_CreateWnd 创建视频播放窗口，宽高可设定
                oWebControl
                  .JS_CreateWnd("playWnd", 1000, 600)
                  .then(function () {
                    that.initPlayWnd();
                    // init(); // 创建播放实例成功后初始化
                  });
              },
              function () {
                // 启动插件服务失败
              }
            );
        },
        cbConnectError: function () {
          // 创建 WebControl 实例失败
          console.log("创建失败，请安装插件");
          that.showExe = true;
        },
        cbConnectClose: function (bNormalClose) {
          // 插件使用过程中发生的断开与插件服务连接的回调    // bNormalClose = false 时表示异常断开    // bNormalClose = true 时表示正常断开
        },
      });
    },
    setEncrypt(value) {
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(pubKey);
      return encrypt.encrypt(value);
    },
    initPlayWnd() {
      let that = this;
      this.getPubKey(() => {
        // 请自行修改以下变量值	
        var appkey = "28730366"; //综合安防管理平台提供的appkey，必填
        var secret = this.setEncrypt("HSZkCJpSJ7gSUYrO6wVi"); //综合安防管理平台提供的secret，必填
        var ip = "10.19.132.75"; //综合安防管理平台IP地址，必填
        var playMode = 0; //初始