精华内容
下载资源
问答
  • 2、 安装“海康威视插件”中的“插件_科达_海康插件”文件; 3、 将“海康威视插件”中的“海康解码”中的文件拷贝并覆盖到C:\Program Files\中国电信\全球眼企业客户端;同时覆盖到C:\Program Files\中国电信\全球...
  • 海康 web 插件

    2019-05-08 11:39:27
    网页插件版本:V3.0.3.3 (64位)。 谷歌浏览器45版本以上已经完全屏蔽第三方控件,建议使用45版本以下的谷歌浏览器
  • 在vue中使用海康插件实现视频实时监控(海康插件)

    万次阅读 多人点赞 2019-10-17 09:30:30
    在vue中使用海康插件实现视频实时监控(海康插件) 首先 下载并安装海康插件 webcontrol.exe 然后 直接就写代码把,所有方法都是海康他们直接封装好的demo 初始化之后,后台把密钥和一些配置的东西返回给你 然后只需要...

    在vue中使用海康插件实现视频实时监控(海康插件)

    首先

    下载并安装海康插件 webcontrol.exe

    然后

    直接就写代码把,所有方法都是海康他们直接封装好的demo

    初始化之后,后台把密钥和一些配置的东西返回给你

    然后只需要把监控点编号给你就可以了。实现之后几乎你想要的操作都有

    各种黑科技,而你只需处理这个插件的兼容问题和一些bug,底层他们时用C写得,但是最终实现播放呢,又是webscoket实现的。

    代码

    在index.html中引入下面这三个js

    <script src="./static/hkjs/jquery-1.12.4.min.js"></script>
    <script src="./static/hkjs/jsencrypt.min.js"></script>
    <script src="./static/hkjs/jsWebControl-1.0.0.min.js"></script>
    

    html:

    采用了动态获取容器的宽和高

    <div id="playWnd" class="playWnd" :style="{width:swfWidth+'px',height:swfHeight+'px'}"></div>
    

    data:

         swfHeight: "",
         swfWidth: "",
        //初始化参数
          initparam: {
            appKey: "xxxxx",
            secret: "xxxxxxx",
            apiIp: "xxx.xxx.xxx",
            apiPort: 8099,
            layout: "1x1"//这里是来控制你一开始初始化之后的分屏的
          },
          //监控点编号
          pointCode: "xxxxxxx",
          pubKey: "",
          oWebControl: null,
          WebControl: null
    

    methods:

    //海康插件页面渲染方法
        //Html:<div id="playWnd" class="playWnd"></div> 就是放插件的盒子,id不要改,改了的话下面的方法里面也要改
        //css:自己写一个盒子,让上面这个盒子100%就好
        //js:data,methods,生命周期函数里面也要去看下
        //想要用海康视频直接把从onSearch以下的所以方法复制过去
        // 前面三个接口是我们自己要写的
        //查询videoList,密钥getInitParam,执行就是videoPreview
        onSearch() {
          this.oWebControl.JS_ShowWnd();
          this.videoList = [];
            videoList(
             接口参数
            ).then(res => {
              if (res.statusCode == 200) {
                this.videoList = res.result.rows;
              } else {
                this.$message({
                  message: res.message,
                  type: "warning"
                });
              }
            });
          
        },
        //获取海康密钥
        getInitParam() {
          getInitParam('xxx').then(res => {
            this.initparam = res;
            this.init()
          });
        },
        //执行每监控点预览的操作 //获取监控点编号
        videoPreview(val, index) {
          this.position = index;
          this.oWebControl.JS_ShowWnd();
          this.pointCode = val.pointCode;
          this.startpreview();
        },
        // 创建播放实例
        initPlugin() {
          this.oWebControl = new WebControl({
            szPluginContainer: "playWnd", // 指定容器id
            iServicePortStart: 15900, // 指定起止端口号,建议使用该值
            iServicePortEnd: 15909,
            szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
            // 创建WebControl实例成功
            cbConnectSuccess: () => {
              this.oWebControl
                .JS_StartService("window", {
                  // WebControl实例创建成功后需要启动服务
                  dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
                })
                .then(
                  () => {
                    // 启动插件服务成功
                    this.oWebControl.JS_SetWindowControlCallback({
                      // 设置消息回调
                      cbIntegrationCallBack: this.cbIntegrationCallBack
                    });
    
                    this.oWebControl
                      .JS_CreateWnd("playWnd", this.swfWidth, this.swfHeight)
                      .then(() => {
                        //JS_CreateWnd创建视频播放窗口,宽高可设定
                       this.getInitParam(); // 创建播放实例成功后初始化
                      });
                  },
                  () => {
                    // 启动插件服务失败
                  }
                );
            },
            // 创建WebControl实例失败
            cbConnectError: () => {
              this.oWebControl = null;
              $("#playWnd").html("插件未启动,正在尝试启动,请稍候...");
              this.WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数,采用wakeup来启动程序
              this.initCount++;
              if (this.initCount < 3) {
                setTimeout(() => {
                  this.initPlugin();
                }, 3000);
              } else {
                console.log("插件启动失败,请检查插件是否安装!");
              }
            },
            // 异常断开:bNormalClose = false
            cbConnectClose: bNormalClose => {
              // JS_Disconnect正常断开:bNormalClose = true
              console.log("cbConnectClose");
              this.oWebControl = null;
            }
          });
        },
        // 设置窗口控制回调
        setCallbacks() {
          this.oWebControl.JS_SetWindowControlCallback({
            cbIntegrationCallBack: this.cbIntegrationCallBack
          });
        },
        // 推送消息
        cbIntegrationCallBack(oData) {
          console.log(oData.responseMsg);
          /* showCBInfo(JSON.stringify(oData.responseMsg)); */
        },
        //初始化
        init() {
          this.getPubKey(() => {
            // 请自行修改以下变量值	
            let appkey = this.initparam.appKey; //综合安防管理平台提供的appkey,必填
            let secret = this.setEncrypt(this.initparam.secret); //综合安防管理平台提供的secret,必填
            let ip = this.initparam.apiIp; //综合安防管理平台IP地址,必填
            let port = this.initparam.apiPort; //综合安防管理平台端口,若启用HTTPS协议,默认443
            port = parseInt(port);
            let layout = this.initparam.layout;
            let playMode = 0; //初始播放模式:0-预览,1-回放
            let snapDir = "D:\\SnapDir"; //抓图存储路径
            let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
            let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,是为1,否为0
            let encryptedFields = "secret"; //加密字段,默认加密领域为secret
            let showToolbar = 1; //是否显示工具栏,0-不显示,非0-显示
            let showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
            let buttonIDs =
              "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
            // 请自行修改以上变量值	
            this.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 //自定义工具条按钮
                })
              })
              .then(oData => {
                this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                //startpreview();  //初始化之后开启预览
              });
          });
        },
        //获取公钥
        getPubKey(callback) {
          this.oWebControl
            .JS_RequestInterface({
              funcName: "getRSAPubKey",
              argument: JSON.stringify({
                keyLength: 1024
              })
            })
            .then(oData => {
              console.log(oData);
              if (oData.responseMsg.data) {
                this.pubKey = oData.responseMsg.data;
                callback();
              }
            });
        },
        //RSA加密
        setEncrypt(value) {
          let encrypt = new JSEncrypt();
          encrypt.setPublicKey(this.pubKey);
          return encrypt.encrypt(value);
        },
        // 设置窗口裁剪,当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
        setWndCover() {
          let iWidth = $(window).width();
          let iHeight = $(window).height();
          let oDivRect = $("#playWnd")
            .get(0)
            .getBoundingClientRect();
          let iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
          let iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
          let iCoverRight =
            oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
          let iCoverBottom =
            oDivRect.bottom - iHeight > 0
              ? Math.round(oDivRect.bottom - iHeight)
              : 0;
    
          iCoverLeft = iCoverLeft > this.swfWidth ? this.swfWidth : iCoverLeft;
          iCoverTop = iCoverTop > this.swfHeight ? this.swfHeight : iCoverTop;
          iCoverRight = iCoverRight > this.swfWidth ? this.swfWidth : iCoverRight;
          iCoverBottom =
            iCoverBottom > this.swfHeight ? this.swfHeight : iCoverBottom;
          this.oWebControl.JS_RepairPartWindow(0, 0, this.swfWidth+1, this.swfHeight); // 多1个像素点防止还原后边界缺失一个像素条
          if (iCoverLeft != 0) {
            this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.swfHeight);
          }
          if (iCoverTop != 0) {
            this.oWebControl.JS_CuttingPartWindow(0, 0, this.swfWidth+1, iCoverTop); // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条
          }
          if (iCoverRight != 0) {
            this.oWebControl.JS_CuttingPartWindow(
              this.swfWidth - iCoverRight,
              0,
              iCoverRight,
              this.swfHeight
            );
          }
          if (iCoverBottom != 0) {
            this.oWebControl.JS_CuttingPartWindow(
              0,
              this.swfHeight - iCoverBottom,
              this.swfWidth,
              iCoverBottom
            );
          }
        },
        //视频“预览”功能
        startpreview() {
          let pointCode = this.pointCode;
          let cameraIndexCode = pointCode; //获取输入的监控点编号值,必填
          let streamMode = 0; //主子码流标识:0-主码流,1-子码流
          let transMode = 1; //传输协议:0-UDP,1-TCP
          let gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
          let wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)
          cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
          cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
          this.oWebControl.JS_RequestInterface({
            funcName: "startPreview",
            argument: JSON.stringify({
              cameraIndexCode: cameraIndexCode, //监控点编号
              streamMode: streamMode, //主子码流标识
              transMode: transMode, //传输协议
              gpuMode: gpuMode, //是否开启GPU硬解
              wndId: wndId //可指定播放窗口
            })
          });
        },
    
        //停止全部预览功能
        stopAllPreview() {
          this.oWebControl.JS_RequestInterface({
            funcName: "stopAllPreview"
          });
        },
        //关闭视频窗口
        closeWindow() {
          if (this.oWebControl != null) {
            this.oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
            this.oWebControl.JS_Disconnect().then(
              () => {
                // 断开与插件服务连接成功
              },
              () => {
                // 断开与插件服务连接失败
              }
            );
          }
        }
      },
      created() {
        this.getInitParam();//获取初始话所需的参数
      },
      beforeMount() {this.WebControl = WebControl;},//调用电脑中的插件
      mounted() {
        this.swfHeight = document.getElementById("videoMaincontent1").offsetHeight;
        this.swfWidth = document.getElementById("videoMaincontent1").offsetWidth;
        //页面加载时创建播放实例初始化
        this.initPlugin();
        // 监听resize事件,使插件窗口尺寸跟随DIV窗口变化
        $(window).resize(() => {
          if (this.oWebControl != null) {
            this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);
            this.setWndCover();
          }
        });
        // 监听滚动条scroll事件,使插件窗口跟随浏览器滚动而移动
        $(window).scroll(() => {
          if (this.oWebControl != null) {
            this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);
            this.setWndCover();
          }
        });
      },
      beforeDestroy() {
        this.closeWindow();//关闭插件
      }
    
    展开全文
  • vue对接海康播放器插件组件
  • vue中使用海康插件实现视频监控逻辑优化 播放流程:this.initPlugin()//创建播放实例==>this.getInitParam(); // 创建播放实例成功后初始化==>this.init()==>this.startpreview(); //初始化之后开启预览 ...

    vue中使用海康插件实现视频监控逻辑优化

    播放流程:this.initPlugin()//创建播放实例==>this.getInitParam(); // 创建播放实例成功后初始化==>this.init()==>this.startpreview(); //初始化之后开启预览

    methods: {
       
        //获取海康密钥
        getInitParam() {
       
          getInitParam(后端参数).then(res => {
       
            this
    展开全文
  • 海康摄像头插件

    2019-01-03 08:39:57
    海康摄像头网页插件,用于摄像头网页在线预览,支持网页各种
  • 海康播放插件
  • 海康视频插件WebComponents.exe及相关开发文档
  • 直接调用海康插件,需传参数 cameraIndexCode(监控点编号)。 调用海康接口,需传参数 url(监控点预览取流),需注意传输协议(rtsp,hls等)及延时情况。 以下为第一种方法(通过监控点编号cameraIn

    官方文档 :https://open.hikvision.com/docs/3784e07072ee4f09a573d61f20782267

    插件版本:视频WEB插件 V1.5.1(见附件)(另附H5视频播放器开发包 V1.0.0,可用于移动端开发)

    针对于web端的调用方法:

    1. 直接调用海康插件,需传参数 cameraIndexCode(监控点编号)。
    2. 调用海康接口,需传参数 url(监控点预览取流),需注意传输协议(rtsp,hls等)及延时情况。

    以下为第一种方法(通过监控点编号cameraIndexCode直接调用海康插件的方法)说明:

    【开发流程】

    • 安装 VideoWebPlugin.exe 插件包(直接安装,勿自行解压并运行解压后的可执行文件,安装于系统盘的“Program Files (x86)\VideoWebPlugin”目录中)。
    • 在vue项目的入口文件( public - index.vue )中引入js文件。
        <script src="./HikVision/jquery-1.12.4.min.js"></script>
        <script src="./HikVision/jsencrypt.min.js"></script>
        <script src="./HikVision/jsWebControl-1.0.0.min.js"></script>
    • 应用插件,基本对接流程(灰色为可选步骤):

    目录

    1. 创建 WebControl 实例 new WebControl

    2. 启动插件 JS_StartService

    (3.1 设置消息回调 JS_SetWindowControlCallback)

    3.2 创建插件窗口 JS_CreateWnd

    (4.1 申请RSA公钥 JS_RequestInterface - funcName: "getRSAPubKey")

    4.2 初始化 JS_RequestInterface - funcName: "init"

    5.1 调整插件窗口大小、位置接口 JS_Resize

    5.2 预览(实时)JS_RequestInterface - funcName: "startPreview"

    5.3 回放 JS_RequestInterface - funcName: "startPlayback"

    (6.销毁插件窗口 JS_DestroyWnd)

    7. 断开插件服务连接 JS_Disconnect


    1. 创建 WebControl 实例 new WebControl

          this.oWebControl = new WebControl({
            szPluginContainer: "playWnd"+this.settingId, // 指定容器id
            iServicePortStart: 15900, // 指定起止端口号,建议使用该值
            iServicePortEnd: 15909,
            szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
            cbConnectSuccess: () => {
              // ----------创建WebControl实例成功 启动插件---------
              // ---------------2.JS_StartService-----------------
            },
            cbConnectError: () => {
              // 创建WebControl实例失败
              this.oWebControl = null;
              this.playText = '插件未启动,正在尝试启动,请稍候...';
              this.WebControl.JS_WakeUp("VideoWebPlugin://");// 程序未启动时执行error函数,采用wakeup来启动程序
              this.initCount++;
              if (this.initCount < 2) {
                setTimeout(() => {
                  this.initPlugin(); // 重新创建播放实例
                }, 3000);
              } else {
                this.playText = `插件启动失败,请检查插件是否安装!`;
              }
            },
            cbConnectClose: () => {//bNormalClose
              // 异常断开:bNormalClose = false
              // JS_Disconnect正常断开:bNormalClose = true
              this.oWebControl = null;
            }
          });

    2. 启动插件 JS_StartService

              this.oWebControl.JS_StartService("window", {
                  // WebControl实例创建成功后需要启动服务
                  dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
                }).then(() => {
                    // --------------------设置消息回调--------------------
                    //-----------3.1 JS_SetWindowControlCallback----------
                    
                    // ----启动插件服务成功 创建视频播放窗口(宽高可设定)----
                    // ------------------3.2 JS_CreateWnd------------------
                    
                  },
                  function() {
                    // 启动插件服务失败
                  }
                );

    (3.1 设置消息回调 JS_SetWindowControlCallback)

                    this.oWebControl.JS_SetWindowControlCallback({
                      cbIntegrationCallBack:function (oData) {
    //                    console.log('回调信息',oData)
                      }
    //                  this.cbIntegrationCallBack() // 封装的推送消息方法
                    });

    3.2 创建插件窗口 JS_CreateWnd

                    this.oWebControl.JS_CreateWnd("playWnd"+this.settingId, this.$refs.playWnd.offsetWidth, this.$refs.playWnd.offsetHeight).then(() => {
                      // ------------------创建播放实例成功后初始化-------------------
                      // -----4.1 JS_RequestInterface - funcName: "getRSAPubKey"-----
                      
                      // ------------------创建播放实例成功后初始化-------------------
                      // ---------4.2 JS_RequestInterface - funcName: "init"----------
                    });

    (4.1 申请RSA公钥 JS_RequestInterface - funcName: "getRSAPubKey")

              this.oWebControl.JS_RequestInterface({
                  //通用请求响应接口
                  funcName: "getRSAPubKey", // 功能标识
                  argument: JSON.stringify({
                    keyLength: 1024 // 秘钥长度,可选1024或2048
                  })
                })
                .then(oData => {
                  if (oData.responseMsg.data) {
                    // 当code为-1时无data字段
                    this.pubKey = oData.responseMsg.data; // 返回的数据,如RSA公钥
                    callback();
                  }
                });
                
                //RSA加密
                setEncrypt(value) {
                  var encrypt = new JSEncrypt();
                  encrypt.setPublicKey(this.pubKey);
                  return encrypt.encrypt(value);
                },
    

    4.2 初始化 JS_RequestInterface - funcName: "init"

      		//参数
      		var appkey = this.initparam.appKey; //综合安防管理平台提供的appkey,必填
      		var secret = this.setEncrypt(this.initparam.secret); //综合安防管理平台提供的secret,必填
      		var ip = this.initparam.apiIp; //综合安防管理平台IP地址,必填
      		var playMode = this.isLive; //初始播放模式:0-预览,1-回放
      		var port = this.initparam.apiPort; //综合安防管理平台端口,若启用HTTPS协议,默认443
      		port = parseInt(port);
      		var snapDir = ""; //抓图存储路径
      		var videoDir = ""; //紧急录像或录像剪辑存储路径
      		var layout = this.initparam.layout; //playMode指定模式的布局
      		var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
     		var encryptedFields = "secret"; //加密字段,默认加密领域为secret
      		var showToolbar = 0; //是否显示工具栏,0-不显示,非0-显示
      		var showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
    
        	var buttonIDs =this.buttonShow?"0,1,256,257,258,259,260,512,513,514,515,516,517,768,769":""; //自定义工具条按钮
                this.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, //自定义工具条按钮
        //              toolBarButtonIDs:toolBarButtonIDs//自定义工具条按钮字符串
        //              name:name//无效
                    })
                  })
                  .then(() => {//oData
        //            console.log('oData',oData)
                      // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                      // ------------------创建播放实例成功后初始化-------------------
                      // -----------------------5.1 JS_Resize-----------------------
                      
                      // --------------------初始化后开启预览或回放-------------------
                      if(this.isLive==0){
                        //------------------------开启预览(实时)-------------------------
                      	 // ------5.2 JS_RequestInterface - funcName: "startPreview"-------
                      }else {
                        //----------------------------开启回放------------------------------
                      	 // ------5.3 JS_RequestInterface - funcName: "startPlayback"-------
                      }
                  });
    

    5.1 调整插件窗口大小、位置接口 JS_Resize

        	this.oWebControl.JS_Resize(this.$refs.playWnd.offsetWidth, this.$refs.playWnd.offsetHeight);

    5.2 预览(实时)JS_RequestInterface - funcName: "startPreview"

                  this.oWebControl.JS_RequestInterface({
                    funcName: "startPreview",
                    argument: JSON.stringify({
                      cameraIndexCode: cameraIndexCode, //监控点编号
                      streamMode: streamMode, //主子码流标识
                      transMode: transMode, //传输协议
                      gpuMode: gpuMode, //是否开启GPU硬解
            //          wndId: wndId //可指定播放窗口
                    })
                  });

    5.3 回放 JS_RequestInterface - funcName: "startPlayback"

              this.oWebControl.JS_RequestInterface({
                funcName: "startPlayback",
                argument: JSON.stringify({
                  cameraIndexCode: cameraIndexCode, //监控点编号
                  recordLocation: recordLocation, // 录像存储类型
                  streamMode: streamMode, //主子码流标识
                  transMode: transMode, //传输协议
                  gpuMode: gpuMode, //是否开启GPU硬解
        //          wndId: wndId, //可指定播放窗口
                  startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),  //录像查询开始时间戳,单位:秒
                  endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),      //录像结束开始时间戳,单位:秒
                })
              });

    (6.销毁插件窗口 JS_DestroyWnd)

                if (this.oWebControl) {
                  this.oWebControl.JS_HideWnd();
                  this.oWebControl.JS_DestroyWnd({
                      funcName: 'destroyeWnd'
                    }).then(function () {});
                }

    7. 断开插件服务连接 JS_Disconnect

              if (this.oWebControl != null) {
                this.oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
                this.oWebControl.JS_Disconnect().then(
                  () => {
                    // 断开与插件服务连接成功
                  },
                  () => {
                    // 断开与插件服务连接失败
                  }
                );
              }

    完整代码:

    <template>
      <div class="video-player-container" id="videoPlayer">
        <div v-show="oWebControl" :id="'playWnd'+settingId" class="playWnd" ref="playWnd"></div>
        
        <div class="no-HKplugin" v-show="!oWebControl">
          <div>{{playText}}
            <a :href="href"
               style='color:#4194fc;cursor: pointer;'
               type="primary"
               download="VideoWebPlugin.exe">下载地址</a>
          </div>
          <div v-show="playText.includes('插件启动失败')">
            下载并安装完成?
            <el-button type="primary" @click="destroyedAndCreate">点击此处</el-button>
            重新加载
          </div>
        </div>
      </div>
    </template>

     

    <script>
    import { getFileDownload } from '../../api/api';
    import { formatTime } from '../../utils/index.js'
    
    export default {
      props:{
        isLive:0,//0-预览(实时),1-回放
        cameraIndexCode:'',//监控点编号
        settingId:'',
        hidePluginVal:false,
        buttonShow:false,
        resizeFlag:false,
        date:''
      },
      data() {
        return {
          //声明公用变量
          initCount: 0,
          //初始化参数
          initparam: {},
          pubKey: "",
          oWebControl: null,
          WebControl: null,
    
          playText: '加载中...',
          href: process.env.VUE_APP_BASE_API+'/file/download?fileName=VideoWebPlugin.exe',
        }
      },
      watch:{
        hidePluginVal(){
          if(this.hidePluginVal){
            this.closeWindow();//关闭插件
          }
        },
        resizeFlag(){
          // 监听resize事件,使插件窗口尺寸跟随DIV窗口变化
          if (this.oWebControl != null) {
            this.oWebControl.JS_Resize(this.$refs.playWnd.offsetWidth, this.$refs.playWnd.offsetHeight);
            this.setWndCover();
          }
        }
      },
      created() {
        //调用电脑中的插件
        this.WebControl = WebControl;
    
        //初始化视频插件参数
        const playerKey=JSON.parse(localStorage.getItem('playerKey'));
        this.initparam={
          appKey: playerKey.appKey,
          secret: playerKey.appSecret,
          apiIp: playerKey.deviceHost.split(':')[0],
          apiPort: playerKey.deviceHost.split(':')[1],
          layout: "1x1"
        };
      },
      mounted() {
        //页面加载时创建播放实例初始化
        this.initPlugin();
        //获取初始话所需的参数
        this.init();
    
      beforeDestroy() {
        this.closeWindow();//关闭插件
      },
      methods: {
        //创建播放实例
        initPlugin() {
          this.oWebControl = new WebControl({
            szPluginContainer: "playWnd"+this.settingId, // 指定容器id
            iServicePortStart: 15900, // 指定起止端口号,建议使用该值
            iServicePortEnd: 15909,
            szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
            cbConnectSuccess: () => {
    
              // 创建WebControl实例成功
              this.oWebControl
                .JS_StartService("window", {
                  // WebControl实例创建成功后需要启动服务
                  dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
                }).then(
                  () => {
                    // 启动插件服务成功
                    this.oWebControl.JS_SetWindowControlCallback({
                      // 设置消息回调
                      cbIntegrationCallBack:function (oData) {
    //                    console.log('回调信息',oData)
                      }
    //                  this.cbIntegrationCallBack() // 封装的推送消息方法
                    });
    
                    //JS_CreateWnd创建视频播放窗口,宽高可设定
                    this.oWebControl.JS_CreateWnd("playWnd"+this.settingId, this.$refs.playWnd.offsetWidth, this.$refs.playWnd.offsetHeight).then(() => {
                      this.init(); // 创建播放实例成功后初始化
                    });
                  },
                  function() {
                    // 启动插件服务失败
                  }
                );
            },
            cbConnectError: () => {
              // 创建WebControl实例失败
              this.oWebControl = null;
              this.playText = '插件未启动,正在尝试启动,请稍候...';
              this.WebControl.JS_WakeUp("VideoWebPlugin://");// 程序未启动时执行error函数,采用wakeup来启动程序
              this.initCount++;
              if (this.initCount < 2) {
                setTimeout(() => {
                  this.initPlugin(); // 重新创建播放实例
                }, 3000);
              } else {
                this.playText = `插件启动失败,请检查插件是否安装!`;
              }
            },
            cbConnectClose: () => {//bNormalClose
              // 异常断开:bNormalClose = false
              // JS_Disconnect正常断开:bNormalClose = true
              this.oWebControl = null;
            }
          });
    
        },
    
        //初始化
        init() {
          this.getPubKey(() => {
            var appkey = this.initparam.appKey; //综合安防管理平台提供的appkey,必填
            var secret = this.setEncrypt(this.initparam.secret); //综合安防管理平台提供的secret,必填
            var ip = this.initparam.apiIp; //综合安防管理平台IP地址,必填
            var playMode = this.isLive; //初始播放模式:0-预览,1-回放
            var port = this.initparam.apiPort; //综合安防管理平台端口,若启用HTTPS协议,默认443
            port = parseInt(port);
            var snapDir = ""; //抓图存储路径
            var videoDir = ""; //紧急录像或录像剪辑存储路径
            var layout = this.initparam.layout; //playMode指定模式的布局
            var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
            var encryptedFields = "secret"; //加密字段,默认加密领域为secret
            var showToolbar = 0; //是否显示工具栏,0-不显示,非0-显示
            var showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
            var buttonIDs =this.buttonShow?"0,1,256,257,258,259,260,512,513,514,515,516,517,768,769":""; //自定义工具条按钮
    //        0,16,256,257,258,259,260,512,513,514,515,516,517,768,769
    //        var toolBarButtonIDs="2048,2049,2050,2304,2306,2305,2307,2308,2309,4096,4608,4097,4099,4098,4609,4100";
    
    //        var dateArr=formatTime(new Date(),'yyyy-MM-dd HH:mm:ss').split('');
    //        var dateStr='';
    //        for (let i=0;i<dateArr.length;i++){
    //          if(i!=4&&i!=7&&i!=10&&i!=13&&i!=16){
    //            dateStr+=dateArr[i];
    //          }
    //        }
    //        var name=dateStr;
    
            this.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, //自定义工具条按钮
    //              toolBarButtonIDs:toolBarButtonIDs//自定义工具条按钮字符串
    //              name:name//无效
                })
              })
              .then(() => {//oData
    //            console.log('oData',oData)
                // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                this.oWebControl.JS_Resize(this.$refs.playWnd.offsetWidth, this.$refs.playWnd.offsetHeight);
    
                if(this.isLive==0){
                  this.startPreview(); //初始化后开启预览
                }else {
                  this.startPlayback();//初始化后开启回放
                }
              });
          });
        },
    
        //视频“预览”功能
        startPreview() {
    //      //切换视频后得到当前layout
    //      this.oWebControl.JS_RequestInterface({
    //        funcName:"getLayout"
    //      }).then(res=>{
    //        let nowPreviewLayout = (JSON.parse(res.responseMsg.data))["layout"]
    //        localStorage.setItem("nowPreviewLayout",nowPreviewLayout)
    //      });
          let cameraIndexCode = this.cameraIndexCode; //获取输入的监控点编号值,必填
          let streamMode = 0; //主子码流标识:0-主码流,1-子码流
          let transMode = 1; //传输协议:0-UDP,1-TCP
          let gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
    //      let wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)
    
          //去除cameraIndexCode内前后的空格
          cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
          cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
    
          this.oWebControl.JS_RequestInterface({
            funcName: "startPreview",
            argument: JSON.stringify({
              cameraIndexCode: cameraIndexCode, //监控点编号
              streamMode: streamMode, //主子码流标识
              transMode: transMode, //传输协议
              gpuMode: gpuMode, //是否开启GPU硬解
    //          wndId: wndId //可指定播放窗口
            })
          });
    //      .then((res) => {
    //        console.log('预览res',res)
    //        // 启动插件服务成功
    //        this.oWebControl.JS_SetWindowControlCallback({
    //          // 设置消息回调
    //          cbIntegrationCallBack:function (oData) {
    //            console.log('预览回调信息',oData)
    //          }
                this.cbIntegrationCallBack() // 封装的推送消息方法
    //        });
    //      });
        },
    
        //视频“回放”功能
        startPlayback(){
          var startTimeStamp=new Date(this.date.replace('-', '/').replace('-', '/')).getTime();
          var endTimeStamp=startTimeStamp+60*60*24*1000-1;
    //      //切换视频后得到当前layout
    //      this.oWebControl.JS_RequestInterface({
    //        funcName:"getLayout"
    //      }).then(res=>{
    //        let nowPreviewLayout = (JSON.parse(res.responseMsg.data))["layout"]
    //        localStorage.setItem("nowPreviewLayout",nowPreviewLayout)
    //      })
          let recordLocation = 1; //录像存储类型 0-中心存储 1-设备存储
          let streamMode = 0; //主子码流标识:0-主码流,1-子码流
          let transMode = 1; //传输协议:0-UDP,1-TCP
          let gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
    //      let wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)
    
    //      let cameraIndexCode = this.cameraIndexCode; //获取输入的监控点编号值,必填
          let cameraIndexCode = this.cameraIndexCode; //获取输入的监控点编号值,必填
    
          //去除cameraIndexCode内前后的空格
          cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
          cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
    
          this.oWebControl.JS_RequestInterface({
            funcName: "startPlayback",
            argument: JSON.stringify({
              cameraIndexCode: cameraIndexCode, //监控点编号
              recordLocation: recordLocation, // 录像存储类型
              streamMode: streamMode, //主子码流标识
              transMode: transMode, //传输协议
              gpuMode: gpuMode, //是否开启GPU硬解
    //          wndId: wndId, //可指定播放窗口
              startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),  //录像查询开始时间戳,单位:秒
              endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),      //录像结束开始时间戳,单位:秒
            })
          });
    //      .then((res) => {
    //        console.log('回放res',res)
    //        // 启动插件服务成功
    //        this.oWebControl.JS_SetWindowControlCallback({
    //          // 设置消息回调
    //          cbIntegrationCallBack:function (oData) {
    //            console.log('回放回调信息',oData)
    //          }
                this.cbIntegrationCallBack() // 封装的推送消息方法
    //        });
    //      });
        },
    
        //获取公钥
        getPubKey(callback) {
          this.oWebControl
            .JS_RequestInterface({
              //通用请求响应接口
              funcName: "getRSAPubKey", // 功能标识
              argument: JSON.stringify({
                keyLength: 1024 // 秘钥长度,可选1024或2048
              })
            })
            .then(oData => {
              if (oData.responseMsg.data) {
                // 当code为-1时无data字段
                this.pubKey = oData.responseMsg.data; // 返回的数据,如RSA公钥
                callback();
              }
            });
        },
    
        //RSA加密
        setEncrypt(value) {
          var encrypt = new JSEncrypt();
          encrypt.setPublicKey(this.pubKey);
          return encrypt.encrypt(value);
        },
    
        // 设置窗口裁剪,当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
        setWndCover() {
          var iWidth = $(window).width();
          var iHeight = $(window).height();
          var oDivRect = $("#playWnd"+this.settingId)
            .get(0)
            .getBoundingClientRect();
    
          var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
          var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
          var iCoverRight =
            oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
          var iCoverBottom =
            oDivRect.bottom - iHeight > 0
              ? Math.round(oDivRect.bottom - iHeight)
              : 0;
    
          iCoverLeft = iCoverLeft > this.$refs.playWnd.offsetWidth ? this.$refs.playWnd.offsetWidth : iCoverLeft;
          iCoverTop = iCoverTop > this.$refs.playWnd.offsetHeight ? this.$refs.playWnd.offsetHeight : iCoverTop;
          iCoverRight = iCoverRight > this.$refs.playWnd.offsetWidth ? this.$refs.playWnd.offsetWidth : iCoverRight;
          iCoverBottom = iCoverBottom > this.$refs.playWnd.offsetHeight ? this.$refs.playWnd.offsetHeight : iCoverBottom;
    
          this.oWebControl.JS_RepairPartWindow(0, 0, this.$refs.playWnd.offsetWidth+1, this.$refs.playWnd.offsetHeight); // 多1个像素点防止还原后边界缺失一个像素条
          if (iCoverLeft != 0) {
            this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.$refs.playWnd.offsetHeight);
          }
          if (iCoverTop != 0) {
            this.oWebControl.JS_CuttingPartWindow(0, 0, this.$refs.playWnd.offsetWidth+1, iCoverTop); // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条
          }
          if (iCoverRight != 0) {
            this.oWebControl.JS_CuttingPartWindow(
              this.$refs.playWnd.offsetWidth - iCoverRight,
              0,
              iCoverRight,
              this.$refs.playWnd.offsetHeight
            );
          }
          if (iCoverBottom != 0) {
            this.oWebControl.JS_CuttingPartWindow(
              0,
              this.$refs.playWnd.offsetHeight - iCoverBottom,
              this.$refs.playWnd.offsetWidth,
              iCoverBottom
            );
          }
        },
    
        //关闭视频窗口
        closeWindow() {
          if (this.oWebControl != null) {
            this.oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
            this.oWebControl.JS_Disconnect().then(
              () => {
                // 断开与插件服务连接成功
              },
              () => {
                // 断开与插件服务连接失败
              }
            );
          }
        },
    
        // 销毁并重启
        destroyedAndCreate() {
          this.$emit('reloadVideo');
        },
    
        // 销毁插件
        destroyWnd(cb) {
          if (this.oWebControl) {
            this.oWebControl.JS_HideWnd();
            this.oWebControl
              .JS_DestroyWnd({
                funcName: 'destroyeWnd'
              })
              .then(function (oData) {});
          } else {
            console.log('没有实例');
          }
          cb && cb();
        }
    
      }
    }
    </script>

     

     

     

     

    展开全文
  • 通过web页面调用海康威视视频,在自己的web界面中展示播放视频并且支持放大、缩小、回放等功能。亲身经历过海康的项目。
  • vue中使用海康插件实现视频监控-前端给视频画面中添加文字 基于本人前面写的有关海康插件的博客,要实现这步效果不难。在你的开发demo里面找到添加字符串的方法。 添加的文字的条件是要你能播放出来的前提下: 通过...

    vue中使用海康插件实现视频监控-前端给视频画面中添加文字

    基于本人前面写的有关海康插件的博客,要实现这步效果不难。在你的开发demo里面找到添加字符串的方法。

    添加的文字的条件是要你能播放出来的前提下:

    通过视频播放是否成功的后推送过来的消息来判断视频播放的状态:

    在这里插入图片描述

    // 推送消息
        cbIntegrationCallBack(oData) {
          // console.log(oData);
          console.log(JSON.parse(oData.responseMsg.msg).result);
          //成功后添加字符串
          		if (JSON.parse(oData.responseMsg.msg).result == 768) {
                 this.djString(this.singleItem);//调用这个方法
            }
         }
         
    //叠加字符串  传进来你要渲染的数据的值val
        djString(val) {
          console.log(val);
          // var Color = 65536 * ColorB + 256 * ColorG + ColorR;//文字颜色是rgb格式算出来的。
          this.oWebControl.JS_RequestInterface({
              funcName: "drawOSD",
              argument: JSON.stringify({
                text: val.projAbbreviation + " " + val.nodeName,
                x: 55,//距离原点的x距离
                y: 60,//距离原点的y距离
                // color: 0,
                wndId: 0//渲染的窗口
              })
            })
            .then(function(oData) {
              
            });
     },
    

    注意:有一个问题,就是插件1.3.0版本我们不能改变这里面文字的大小。只有视频插件里面默认的大小
    在这里插入图片描述

    展开全文
  • 海康插件二次封装.zip

    2021-02-22 17:20:10
    海康视频接入,已完成前端代码封装,js引入后再业务中调用使用 1.海康硬盘录像机视频接入封装。2. 海康ip摄像头直接接入封装。
  • 海康视频播放插件

    2015-04-30 15:43:23
    海康视频播放插件海康视频下载后不能在网页上播放需要安装插件
  • vue中使用webVideoCtrl播放海康插件

    千次阅读 热门讨论 2020-01-02 11:10:25
    最近公司有个监控视频的项目要用到webVideoCtrl插件来播放视频,研究了两天终于搞定。只需要传IP、用户名、密码、端口号即可播放,插件可在网上搜索下载。 新建文件夹来存放webVideoCtrl插件,然后在index.html中...
  • 海康球机macos插件

    2016-02-25 12:28:18
    safari插件 HIK WebVideoPlugin
  • vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法 配置和启用海康插件详情看本人博客 链接:https://blog.csdn.net/jinglianglove/article/details/102599229 想要视频播放自动重启得知道他断开得...
  • webplugin海康网站视频插件
  • 海康预览插件

    2014-09-11 15:59:59
    1、基于海康SDK 4.2.8.1开发,理论上支持的设备见官网SDK说明; 2、实现单画面和多画面预览,做成两个控件,多画面能调整、预设、记忆布局; 3、支持流媒体服务器; 4、调用方法1 StartRealPlay(IP , Port, ...
  • 海康插件程序

    2013-04-16 14:52:07
    海康插件程序
  • 在vue中使用海康威视实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步 用npm装这个几个包 "video.js": "^6.6.0", "videojs-flash": "^2.2.0", ...//视频插件包 import videojs from "video.js"; impo...
  • 主要解决无法再高版本上播放海康视频,测试可以播放
  • 在vue中使用海康威视实现视频监控,视频直播方法二(RTMP流加Flash加swf) 第一步 用npm装这个几个包 "video.js": "^6.6.0", "videojs-flash": "^2.2.0", ...//视频插件包 import videojs from "video.js"; import "...
  • Cordova插件-用于播放海康监控视频
  • Chrome浏览器视频插件(采用PPAPI技术)内部调用视频平台OCX完成功能,所以Chrome浏览器视频插件的运行依赖于视频平台OCX,接口也依赖于视频平台OCX的接口。 Chrome浏览器插件支持32位Chrome和64位Chrome,安装插件时...
  • 海康威视视频监控web开发最新插件包(包含实时预览和回放demo),插件支持谷歌浏览器
  • 海康视频WEB插件开发指南
  • 问题:使用海康视频插件,插件在谷歌浏览器中启动失败问题(这个海康插件实在是坑人) 原因: 是因为海康的插件还没支持高版本谷歌,这个原因 我是醉醉的。 解决办法: 使用低版本谷歌浏览器(94版本以下) 在谷歌...
  • 解决视频插件在浏览器窗口变动的时候 插件也不隐藏随意乱跑的问题 这里说明下我用的版本是1.5.0 设置窗口变化监听在监听里面重新设置播放器插件的大小 $(window).resize(function () { // console.log(“串口”) if...
  • 海康web3.0监控pdf文档,用于海康插件在浏览器端 的调用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,736
精华内容 694
关键字:

海康插件