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

最新推荐文章于 2024-02-27 15:21:04 发布
最新推荐文章于 2024-02-27 15:21:04 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： 笔记 第三方插件使用指南 文章标签： javascript html html5 vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmy0816/article/details/108521581
版权

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

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

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

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

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

  1. 开始进行实例化（这些代码都是从官方的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; //初始播放模式：0-预览，1-回放
        var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
        var snapDir = "D:\\SnapDir"; //抓图存储路径
        var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
        var layout = "2x2"; //playMode指定模式的布局
        var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        var encryptedFields = "secret"; //加密字段，默认加密领域为secret
        var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
        var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        var buttonIDs =
          "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
        //var reconnectTimes = 2;                            // 重连次数，回放异常情况下有效
        //var reconnectTime = 4;                             // 每次重连的重连间隔 >= reconnectTime
        // 请自行修改以上变量值	

        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,            //重连次数
              //reconnectDuration：reconnectTime           //重连间隔
            }),
          })
          .then(function (oData) {
            oWebControl.JS_Resize(600, 600); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
            let arr = [
              "xxx",
            ];// 这个数组里面是摄像头的ID
            arr.forEach((item, index) => {
              that.startPreview(item, index + 1); // 我用的是一个2*2的框，这个函数用来给对应的位置播放对应的设备图像
            });
          });
      });
    },
    getPubKey(callback) {
      oWebControl
        .JS_RequestInterface({
          funcName: "getRSAPubKey",
          argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then(function (oData) {
          console.log(oData);
          if (oData.responseMsg.data) {
            pubKey = oData.responseMsg.data;
            callback();
          }
        });
    },
    startPreview(code, index) {
      var cameraIndexCode = code; // 监控点编号，json 中必填
      var streamMode = 0; //主子码流标识：0-主码流，1-子码流，json 中选填
      var transMode = 1; // 传输协议：0-UDP，1-TCP，json 中选填
      var gpuMode = 0; // 是否启用 GPU 硬解，0-不启用，1-启用，json 中选填
      var wndId = index; // 播放窗口序号（在 2x2 以上布局下可指定播放窗口），json 中选填 从1开始1,2,3,4
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
      oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode,
          streamMode: streamMode,
          transMode: transMode,
          gpuMode: gpuMode,
          wndId: wndId,
        }),
      });
    },
 ...
 mounted(){
     this.initWebControl();
 }

其实需要修改的参数只有三个，别的根据自己的需求，用默认值即可。必须修改的三个参数分别是：appkey,secret里面的参数,ip其余的参数用默认值即可。

其中有一个要注意的点是，这个必须要配套海康的一个视频插件使用，如果没有安装插件，就会执行此函数cbConnectError，可以在这个函数中进行提醒用户下载插件。具体代码如下

<template>
  <div>
    <div id="playWnd">
      <p v-show="showExe">
        <a href="../VideoWebPlugin.exe" download="VideoWebPlugin.exe">点击下载插件</a>
      </p>
    </div>
  </div>
</template>

VideoWebPlugin这个插件，官方文档应该已经给出来了。
这里强调的是，注意路径的问题。

此demo中用到的所有静态资源，都在public文件下，也都可以在官方demo中找到，此处不再放置资源。

伸手党来这里，直接粘贴就可用的代码在这里。
    <template>
      <div>
        <div id="playWnd">
          <p v-show="showExe">
            <a href="../VideoWebPlugin.exe" download="VideoWebPlugin.exe">点击下载插件</a>
          </p>
        </div>
      </div>
    </template>
    
    <script>
    var oWebControl;
    var pubKey = "";
    export default {
      data() {
        return {
          showExe: false,
        };
      },
      mounted() {
        this.initWebControl();
      },
      destroyed() {
        console.log("执行函数");
        if (oWebControl != null) {
          oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
          oWebControl.JS_Disconnect().then(
            function () {},
            function () {}
          );
        }
      },
      methods: {
        initWebControl() {
          let that = this;
          oWebControl = new WebControl({
            // 创建 WebControl 实例
    
            szPluginContainer: "playWnd", // 指定 DIV 窗口标识
            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; //初始播放模式：0-预览，1-回放
            var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
            var snapDir = "D:\\SnapDir"; //抓图存储路径
            var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
            var layout = "2x2"; //playMode指定模式的布局
            var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
            var encryptedFields = "secret"; //加密字段，默认加密领域为secret
            var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
            var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
            var buttonIDs =
              "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
            //var reconnectTimes = 2;                            // 重连次数，回放异常情况下有效
            //var reconnectTime = 4;                             // 每次重连的重连间隔 >= reconnectTime
            // 请自行修改以上变量值	
    
            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,            //重连次数
                  //reconnectDuration：reconnectTime           //重连间隔
                }),
              })
              .then(function (oData) {
                oWebControl.JS_Resize(600, 600); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                let arr = [
                  "xxx",
                  "xxx",
                  "xxx",
                  "xxx",
                ];【这里是摄像头的ID】
                arr.forEach((item, index) => {
                  that.startPreview(item, index + 1);
                });
              });
          });
        },
        getPubKey(callback) {
          oWebControl
            .JS_RequestInterface({
              funcName: "getRSAPubKey",
              argument: JSON.stringify({
                keyLength: 1024,
              }),
            })
            .then(function (oData) {
              console.log(oData);
              if (oData.responseMsg.data) {
                pubKey = oData.responseMsg.data;
                callback();
              }
            });
        },
        startPreview(code, index) {
          var cameraIndexCode = code; // 监控点编号，json 中必填
          var streamMode = 0; //主子码流标识：0-主码流，1-子码流，json 中选填
          var transMode = 1; // 传输协议：0-UDP，1-TCP，json 中选填
          var gpuMode = 0; // 是否启用 GPU 硬解，0-不启用，1-启用，json 中选填
          var wndId = index; // 播放窗口序号（在 2x2 以上布局下可指定播放窗口），json 中选填
          cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
          cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
          oWebControl.JS_RequestInterface({
            funcName: "startPreview",
            argument: JSON.stringify({
              cameraIndexCode: cameraIndexCode,
              streamMode: streamMode,
              transMode: transMode,
              gpuMode: gpuMode,
              wndId: wndId,
            }),
          });
        },
      },
    };
    </script>
    
    <style>
    </style>

如果你有耐心看到这里，整篇文章就基本结束了。
任何操作过程中遇到什么问题，可直接与我私信。

竹春
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
海康威视摄像头集成方式.rar
01-20
在项目中，需要集成监控，可以针对不同的设备情况集成不同的监控插件进行监控视频播放。
海康实时监控预览视频流接入web
LB_bei的博客
01-26 1816
海康开放平台海康威视合作生态致力打造一个能力开放体系、两个生态圈，Hikvision AI Cloud开放平台是能力开放体系的核心内容。它是海康威视基于多年在视频及物联网核心技术积累之上，融合AI、大数据、云计算等技术，为合作伙伴提供的一个二次开发及创新的平台。我们采取的方案是后端获取视频流返回给前端，然后前端播放海康开放平台海康威视合作生态致力打造一个能力开放体系、两个生态圈，Hikvision AI Cloud开放平台是能力开放体系的核心内容。
Web端集成海康视频监控画面
最新发布
何以问_的博客
02-27 978
Web端集成海康视频监控画面
海康视频WEB插件开发指南
01-08
海康视频WEB插件开发指南
海康视频WEB端接入Demo
06-27
海康威视视频前端无插件接入，可以对视频进行预览，云台控制，预埋点设置等功能，支持视频录制和回放
angular项目集成海康视频web插件.rar
04-20
在angular项目中集成海康 视频web插件 V1.4.1，利用angular中的directive进行订制。
海康威视NVR嵌入设备WEB程序
07-04
ASP源代码, 海康威视NVR嵌入设备中是带有WEB程序的，但是却不提供源代码下载，http://192.168.5.107/doc/page/login.asp 这是我从DS-8632N-ST设备中导出的ASP程序， 大家可以参考一下。
WEB端项目中接入海康监控视频播放监控画面
爱码代码的小马
07-29 2万+
需求： 以树形结构展示组织以及组织下的摄像头列表，点击单个摄像头进行预览 效果图： 该博客基于 海康开放平台API开发 准备工作 1. APPkey、APPsecret、服务器ip地址、端口号 2. [OpenAPI 安全认证库 （JAVA） V1.1.3](https://open.hikvision.com/download/5c67f20bb254d61550c2f63e?type=10) 3. [视频web插件 V1.4.1](https://open.hikvision.com/downloa
海康监控NVR模式下+web调用（附官方开发包）+手把手教你接入
热门推荐
唐僧洗发用飘柔
11-13 3万+
最近公司的音视频项目需要做一个网络摄像头模块，客户正在使用的是海康摄像头，通过NVR管理。要求我们在web端实现一些功能：实时查看 视频截图 视频回放 视频下载 视频抓图 摄像头方向调整 等等。。。 附上下载地址：http://download.csdn.net/download/u012279452/10116248 下载后，直接点开就可以用浏览器打开demo编号对应图中红色编号
vue+js+海康web开发包接入海康威视摄像头
weixin_46653941的博客
03-10 1万+
vue+js+海康web开发包接入海康威视摄像头
海康威视web 对接插件及资料
03-28
海康威视支持在线预览，云台控制，附带说明文档，可自行二次开发
海康视频web插件，亲测可用
10-20
海康视频web插件，直接打开demo就可以使用。。。。。。
WEB方式直连海康设备Demo&SDK;（带云台）
01-08
web页面完美调用海康摄像头demo，支持预览、抓拍、录像、最重要的是支持云台、支持云台、支持云台。
web页面完美调用海康摄像头demo，支持预览、抓拍、录像、最重要的是支持云台
06-16
web页面完美调用海康摄像头demo，支持预览、抓拍、录像、最重要的是支持云台、支持云台、支持云台。
海康web3.0+api
09-18
海康web3.0+api海康web3.0+api海康web3.0+api海康web3.0+api海康web3.0+api海康web3.0+api海康web3.0+api海康web3.0+api
海康视频播放插件
04-30
海康视频播放插件，海康视频下载后不能在网页上播放需要安装插件
webVideoCtrl.js海康威视摄像vue引用脚本
03-14
vue集成原版的webVideoCtrl.js会出现报错，该资源修改了部分源码，用于支持vue，使用代码前请参考博客：https://blog.csdn.net/yushi6310/article/details/88549363
vue海康视频WEB插件
01-20
或者去https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20这里下载
海康视频web component已经不支持google chrome
07-15
此外，海康视频也推出了其他的客户端软件，比如海康视通客户端和iVMS-4200客户端，这些软件可以在不同的操作系统上运行，并提供类似于web组件的功能。所以，使用Google Chrome浏览器的用户可以尝试使用这些软件来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值