Vue is connected to hikwei Video surveillance platform

preface

Recently developed a new platform, there is a requirement to access the video surveillance channel, the company access hikvision platform provided plug-ins. So I went to the official website to download the demo and development documents, ready to do their own tricks, after one or two days, simple implementation of real-time monitoring of the playback and video watermarking development, here to share.

Hikvision plug-in download

Liverpoolfc.tv: open.hikvision.com/download/5c…

My own Git repository can be downloaded at github.com/blueSky1008…

Directory structure:

When using the plug-in, if the computer does not have the plug-in support software installed, you need to prompt the user to download and install the plug-in

Creating a Play Instance

// Number of automatic reconnections after creation failure
let initCount = 0
// Width and height of the container
let width = $("#playWnd").width();
let height = $("#playWnd").height();

initPlugin() {
      oWebControl = new WebControl({
        szPluginContainer: "playWnd".// Specify the player container ID
        iServicePortStart: 15900.// Specify the start and end port numbers. You are advised to use this value
        iServicePortEnd: 15909.szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11".// ClSID for IE10 using ActiveX, fixed parameter
        cbConnectSuccess: () = > {
          // The WebControl instance was created successfully
          oWebControl
            .JS_StartService("window", {
              After the WebControl instance is successfully created, the service needs to be started
              dllPath: "./VideoPluginConnect.dll".// The value "./ videoPluginconnect.dll "is written to death
            })
            .then(
              () = > {
                // The plug-in service started successfully
                oWebControl.JS_SetWindowControlCallback({
                  // Set the message callback
                  cbIntegrationCallBack: this.cbIntegrationCallBack,
                });

                oWebControl.JS_CreateWnd("playWnd", width, height).then(() = > {
                  //JS_CreateWnd Creates a video player window with a configurable width and height
                  this.init(); // Initialize the parameters after successfully creating the play instance
                });
              },
              () = > {
                // Failed to start the plug-in service}); },cbConnectError: () = > {
          // Failed to create WebControl instance
          oWebControl = null;
          $("#playWnd").html("Plug-in not started, trying to start, please wait...");
          WebControl.JS_WakeUp("VideoWebPlugin://"); Wakeup is used to start the program
          initCount++;
          if (initCount < 3) {
            setTimeout(() = > {
              this.initPlugin();
            }, 3000);
          } else{$("#playWnd").html("Plug-in startup failed, please check whether the plug-in is installed!"); }},cbConnectClose: (bNormalClose) = > {
          // Abnormal disconnect: bNormalClose = false
          // JS_Disconnect Normally disconnects: bNormalClose = true
          console.log("cbConnectClose");
          oWebControl = null; }}); },// Window callback events and click events
    cbIntegrationCallBack(oData) {
    	// Here you can get the ID and other values for each window, including the window's click event callback
      console.log(oData.responseMsg)
    },
Copy the code

Initialization parameter

// Initialize parameters
init() {
      this.getPubKey(() = > {
        / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / please modify the following variable values / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
        var appkey = "28730366";                           // AppKey provided by the integrated Security Management platform, mandatory
        var secret = setEncrypt("HSZkCJpSJ7gSUYrO6wVi");   // Secret provided by the integrated security management platform, required
        var ip = "10.19.132.75";                           // Integrated security management platform IP address, mandatory
        var playMode = 0;                                  // Initial playback mode: 0- preview, 1- playback
        var port = 443;                                    // Port number of the integrated security management platform. If HTTPS is enabled, the default port number is 443
        var snapDir = "D:\\SnapDir";                       // Capture the storage path
        var videoDir = "D:\\VideoDir";                     // Emergency video or video clip storage path
        var layout = "1x1";                                //playMode specifies the layout of the mode
        var enableHTTPS = 1;                               // Whether to enable THE HTTPS protocol to interact with the integrated security management platform, always enter 1
        var encryptedFields = 'secret';					   // Encryption field. The default encryption field is secret
		var showToolbar = 1;                               // Whether to display the toolbar, 0- no, non-0 - display
		var showSmart = 1;                                 // Whether to display intelligent information (such as the wireframe on the screen after configuring the motion detection), 0- no display, non-0 - display
		var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  // Customize toolbar buttons
        / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / please to modify the above variable values / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

        oWebControl
          .JS_RequestInterface({
            funcName: "init".argument: JSON.stringify({
              appkey: appkey, // AppKey provided by the API gateway
              secret: secret, // Secret provided by the API gateway
              ip: ip, //API gateway IP address
              playMode: playMode, // Play mode (decide whether to display preview or playback interface)
              port: port, / / port
              snapDir: snapDir, // Capture the storage path
              videoDir: videoDir, // Emergency video or video clip storage path
              layout: layout, / / layout
              enableHTTPS: enableHTTPS, // Whether to enable HTTPS
              encryptedFields: encryptedFields, // Encrypt the field
              showToolbar: showToolbar, // Whether to display the toolbar
              showSmart: showSmart, // Whether to display intelligent information
              buttonIDs: buttonIDs, // Customize toolbar buttons
            }),
          })
          .then((oData) = > {
            oWebControl.JS_Resize(width, height); // Resize once after initialization to avoid the problem that the plug-in window does not overlap with the DIV window after the first display in Firefox
            this.setWndCover()
          });
      });
    },
    
    // Get the public key
    getPubKey(callback) {
      oWebControl
        .JS_RequestInterface({
          funcName: "getRSAPubKey".argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then((oData) = > {
          if(oData.responseMsg.data) { pubKey = oData.responseMsg.data; callback(); }}); },/ / RSA encryption
    setEncrypt(value) {
      let encrypt = new JSEncrypt();
      encrypt.setPublicKey(pubKey);
      return encrypt.encrypt(value);
    },
Copy the code

Video Preview

// Video preview
    startRealPlay() {
      oWebControl.JS_RequestInterface({
              funcName: "startPreview".argument: JSON.stringify({
                cameraIndexCode: 'safhasasigvbasfgbhsdf'.// Monitor point number
                streamMode: 0.// The main sub-stream identifier
                transMode: 1.// Transport protocol
                gpuMode: 0.// Whether to enable GPU hardware solution
                wndId: 2.// Play window ID, specific can view the document
              }),
            }).then(oData= >{
              if(oData.responseMsg.code == 0) { // Playback succeeded
                setTimeout(() = > {
                  this.addText(data, 1) // Add text watermark
                }, 4000); }})},Copy the code

Add watermarked text

addText(data, index) {
      oWebControl.JS_RequestInterface({
        funcName: "drawOSD".argument: JSON.stringify({
          text : 'My time watermark'.x: 30./ / pixel
          y: 30.color: 65536 * 255 + 256 * 255 + 255.// 65536 * R + 256 * G + B
          fontSize: 30.bold: 1.// 0- no bold 1- bold
          wndId: 2.// Play window
        }),
      }).then(oData= >{
        if(oData.responseMsg.code ! =0) {
          console.log('Failed to add text')}})},Copy the code

Handle because of the page scroll bar, occlusion problem

JS_CuttingPartWindow set window clipping when window needs to be covered due to scrollbar scrolling
    setWndCover() {
      var iWidth = $(window).width();
      var iHeight = $(window).height();
      var oDivRect = $("#playWnd").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 > width ? width : iCoverLeft;
      iCoverTop = iCoverTop > height ? height : iCoverTop;
      iCoverRight = iCoverRight > width ? width : iCoverRight;
      iCoverBottom = iCoverBottom > height ? height : iCoverBottom;

      oWebControl.JS_RepairPartWindow(0.0, width + 1, height); // Add 1 pixel to prevent a pixel bar from missing after restoration
      if(iCoverLeft ! =0) {
        oWebControl.JS_CuttingPartWindow(0.0, iCoverLeft, height);
      }
      if(iCoverTop ! =0) {
        oWebControl.JS_CuttingPartWindow(0.0, width + 1, iCoverTop); // Cut one more pixel bar to prevent the occurrence of one pixel bar after cutting part of the window
      }
      if(iCoverRight ! =0) {
        oWebControl.JS_CuttingPartWindow(
          width - iCoverRight,
          0,
          iCoverRight,
          height
        );
      }
      if(iCoverBottom ! =0) {
        oWebControl.JS_CuttingPartWindow(
          0, height - iCoverBottom, width, iCoverBottom ); }},Copy the code

A complete example

// Configure the config.js parameter

videoConfig={
    appkey:'28730366'./ / the public key
    appSecret:'HSZkCJpSJ7gSUYrO6wVi'.// Partner SECET
    enableHTTPS:1.// Whether to enable THE HTTPS protocol to interact with the integrated security management platform, always enter 1
    ip:'10.19.132.75'./ / IP address
    port:443./ / port
    language:"zh_CN".// Language: Chinese
    playMode: 0.// Initial playback mode: 0- preview, 1- playback
    snapDir:'D:\\SnapDir'.// Capture the storage path
    videoDir:'D:\\VideoDir'.// Video storage path
    / / 1,0,16,256,257,258,259,260,512,513,514,515,516,517,768,769 ID set / / toolbar button
    buttonIDs: '0,16,256,257,259,260,512,514,515,516,517,768,769'.// Toolbar button ID
    showToolbar: 0.// Whether to display the toolbar, 0- no, non-0 - display
    showSmart:0.// Whether to display intelligent information (such as the wireframe on the screen after configuring the motion detection), 0- no display, non-0 - display
    x: 20.y: 90.color:  65536 * 255 + 256 * 255 + 255.// 65536 * R + 256 * G + B;
    fontSize: 30.bold: 1.// 0- no bold 1- bold
}

// Play component video.vue

<template>
  <div class="video_hk_box" id="video_box">
    <template v-if="isInit">
      <div class="video" id="playWnd"></div>
    </template>
    <template v-else>
      <div class="down u-f u-f-ac u-f-jc">
        <a href="VideoWebPlugin.exe">Download the plug-in - refresh after you install it</a>
      </div>
    </template>
  </div>
</template>

<script>
import $ from "jquery";
let width = null;
let height = null;
let oWebControl = null;
let initCount = 0; // Number of reconnections that failed when creating a play instance
let pubKey = ""; / / the public key
let addTextTime = null
let startCount = 0 // The number of times to retrieve the played code when it failed
export default {
  data() {
    return {
      isInit: true.// Whether the WebControl instance was successfully created
      videoData: [].isParams: false.// Check whether the parameter is successfully initialized
      clickWndId: 1.// Click the window ID when multiple Windows are clicked
      codeLength: 4.// The length of the code to play
    };
  },
  props: {
    layout: {
      default: "2x2",}},mounted() {
    width = $("#video_box").width();
    height = $("#video_box").height();
    this.initScroll = this.createDebounce(() = >{
      if(oWebControl ! =null) {
        oWebControl.JS_Resize(width, height);
        this.setWndCover(); }})window.addEventListener("resize".() = > {
      width = $("#video_box").width();
      height = $("#video_box").height();
      if(oWebControl ! =null) {
        oWebControl.JS_Resize(width, height);
        this.setWndCover();
      }
      // this.initScroll()
    });
    window.addEventListener("scroll".() = >{
      this.initScroll()
    })
    this.initPlugin();
  },
  beforeDestroy() {
    console.log(oWebControl, 'oWebControl')
    clearTimeout(addTextTime)
    addTextTime = null
    if(oWebControl ! =null) {
      oWebControl.JS_Disconnect().then(
        function () {},
        function () {}); }},methods: {
    getVideoData(data, length) { // Get the code to play
      if(oWebControl ! =null && this.isParams) {
        this.startRealPlay(data, length);
      } else {
        startCount ++
        if(startCount < 4) {
          setTimeout(() = > {
            this.getVideoData(data, length);
          }, 1500); }}},// Create a play instance
    initPlugin() {
      oWebControl = new WebControl({
        szPluginContainer: "playWnd".// Specify the container ID
        iServicePortStart: 15900.// Specify the start and end ports. You are advised to use this value
        iServicePortEnd: 15909.szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11".// ClSID for IE10 using ActiveX
        cbConnectSuccess: () = > {
          // The WebControl instance was created successfully
          this.isInit = true;
          oWebControl
            .JS_StartService("window", {
              After the WebControl instance is successfully created, the service needs to be started
              dllPath: "./VideoPluginConnect.dll".// The value "./ videoPluginconnect.dll "is written to death
            })
            .then(
              () = > {
                // The plug-in service started successfully
                oWebControl.JS_SetWindowControlCallback({
                  // Set the message callback
                  cbIntegrationCallBack: this.cbIntegrationCallBack,
                });

                oWebControl.JS_CreateWnd("playWnd", width, height).then(() = > {
                  //JS_CreateWnd Creates a video player window with a configurable width and height
                  this.init(); // Initialize after successfully creating the play instance
                });
              },
              () = > {
                // Failed to start the plug-in service}); },cbConnectError: () = > {
          // Failed to create WebControl instance
          oWebControl = null;
          $("#playWnd").html("Plug-in not started, trying to start, please wait...");
          WebControl.JS_WakeUp("VideoWebPlugin://"); Wakeup is used to start the program
          initCount++;
          if (initCount < 3) {
            setTimeout(() = > {
              this.initPlugin();
            }, 3000);
          } else{$("#playWnd").html("Plug-in startup failed, please check whether the plug-in is installed!");
            this.isInit = false; }},cbConnectClose: (bNormalClose) = > {
          // Abnormal disconnect: bNormalClose = false
          // JS_Disconnect Normally disconnects: bNormalClose = true
          console.log("cbConnectClose");
          oWebControl = null; }}); },// Initialize parameters
    init() {
      this.getPubKey(() = > {
        / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / please modify the following variable values / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
        var appkey = this.videoConfig.appkey; // AppKey provided by the integrated Security Management platform, mandatory
        var secret = this.setEncrypt(this.videoConfig.appSecret); // Secret provided by the integrated security management platform, required
        var ip = this.videoConfig.ip; // Integrated security management platform IP address, mandatory
        var playMode = this.videoConfig.playMode; // Initial playback mode: 0- preview, 1- playback
        var port = this.videoConfig.port; // Port number of the integrated security management platform. If HTTPS is enabled, the default port number is 443
        var snapDir = this.videoConfig.snapDir; // Capture the storage path
        var videoDir = this.videoConfig.videoDir; // Emergency video or video clip storage path
        var layout = this.layout; //playMode specifies the layout of the mode
        var enableHTTPS = this.videoConfig.enableHTTPS; // Whether to enable THE HTTPS protocol to interact with the integrated security management platform, always enter 1
        var encryptedFields = "secret"; // Encryption field. The default encryption field is secret
        var showToolbar = this.videoConfig.showToolbar; // Whether to display the toolbar, 0- no, non-0 - display
        var showSmart = this.videoConfig.showSmart; // Whether to display intelligent information (such as the wireframe on the screen after configuring the motion detection), 0- no display, non-0 - display
        var buttonIDs = this.videoConfig.buttonIDs; // Customize toolbar buttons
        / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / please to modify the above variable values / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

        oWebControl
          .JS_RequestInterface({
            funcName: "init".argument: JSON.stringify({
              appkey: appkey, // AppKey provided by the API gateway
              secret: secret, // Secret provided by the API gateway
              ip: ip, //API gateway IP address
              playMode: playMode, // Play mode (decide whether to display preview or playback interface)
              port: port, / / port
              snapDir: snapDir, // Capture the storage path
              videoDir: videoDir, // Emergency video or video clip storage path
              layout: layout, / / layout
              enableHTTPS: enableHTTPS, // Whether to enable HTTPS
              encryptedFields: encryptedFields, // Encrypt the field
              showToolbar: showToolbar, // Whether to display the toolbar
              showSmart: showSmart, // Whether to display intelligent information
              buttonIDs: buttonIDs, // Customize toolbar buttons
            }),
          })
          .then((oData) = > {
            this.isParams = true;
            oWebControl.JS_Resize(width, height); // Resize once after initialization to avoid the problem that the plug-in window does not overlap with the DIV window after the first display in Firefox
            this.setWndCover()
          });
      });
    },
    // Video preview
    startRealPlay(data, length) {
      this.codeLength = length
      if (this.layout == "1x1") {
        oWebControl.JS_RequestInterface({
          funcName: "startPreview".argument: JSON.stringify({
            cameraIndexCode: data, // Monitor point number
            streamMode: 0.// The main sub-stream identifier
            transMode: 1.// Transport protocol
            gpuMode: 0.// Whether to enable GPU hardware solution
            wndId: 1.// You can specify the playback window})}}),else if (this.layout == "2x2") {
        if(length == 1) {
          oWebControl.JS_RequestInterface({
              funcName: "startPreview".argument: JSON.stringify({
                cameraIndexCode: data.playCode, // Monitor point number
                streamMode: 0.// The main sub-stream identifier
                transMode: 1.// Transport protocol
                gpuMode: 0.// Whether to enable GPU hardware solution
                wndId: this.clickWndId, // You can specify the playback window
              }),
            }).then(oData= >{
              if(oData.responseMsg.code == 0) {
                setTimeout(() = > {
                  this.addText(data, 1)},4000); }})}else if(length == 4) {
          data.forEach((item, index) = > {
            oWebControl.JS_RequestInterface({
              funcName: "startPreview".argument: JSON.stringify({
                cameraIndexCode: item.playCode, // Monitor point number
                streamMode: 0.// The main sub-stream identifier
                transMode: 1.// Transport protocol
                gpuMode: 0.// Whether to enable GPU hardware solution
                wndId: index + 1.// You can specify the playback window
              }),
            }).then(oData= >{
              if(oData.responseMsg.code == 0) {
                setTimeout(() = > {
                  this.addText(item, index + 1)},4000); }})}); }// }},addText(data, index) {
      oWebControl.JS_RequestInterface({
        funcName: "drawOSD".argument: JSON.stringify({
          text : data.stationShotname,
          x: this.videoConfig.x,
          y: this.videoConfig.y,
          color: this.videoConfig.color,
          fontSize: this.videoConfig.fontSize,
          bold: this.videoConfig.bold,
          wndId: index, // Play window
        }),
      }).then(oData= >{
        if(oData.responseMsg.code ! =0) {
          console.log('Failed to add text')}})},// Window callback events and click events
    cbIntegrationCallBack(oData) {
      if(this.layout == '2x2') {
        this.clickWndId = oData.responseMsg.msg.wndId
      }
    },
    // Get the public key
    getPubKey(callback) {
      oWebControl
        .JS_RequestInterface({
          funcName: "getRSAPubKey".argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then((oData) = > {
          if(oData.responseMsg.data) { pubKey = oData.responseMsg.data; callback(); }}); },/ / RSA encryption
    setEncrypt(value) {
      let encrypt = new JSEncrypt();
      encrypt.setPublicKey(pubKey);
      return encrypt.encrypt(value);
    },
    JS_CuttingPartWindow set window clipping when window needs to be covered due to scrollbar scrolling
    setWndCover() {
      var iWidth = $(window).width();
      var iHeight = $(window).height();
      var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
      console.log(oDivRect)
      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 > width ? width : iCoverLeft;
      iCoverTop = iCoverTop > height ? height : iCoverTop;
      iCoverRight = iCoverRight > width ? width : iCoverRight;
      iCoverBottom = iCoverBottom > height ? height : iCoverBottom;

      oWebControl.JS_RepairPartWindow(0.0, width + 1, height); // Add 1 pixel to prevent a pixel bar from missing after restoration
      if(iCoverLeft ! =0) {
        oWebControl.JS_CuttingPartWindow(0.0, iCoverLeft, height);
      }
      if(iCoverTop ! =0) {
        oWebControl.JS_CuttingPartWindow(0.0, width + 1, iCoverTop); // Cut one more pixel bar to prevent the occurrence of one pixel bar after cutting part of the window
      }
      if(iCoverRight ! =0) {
        oWebControl.JS_CuttingPartWindow(
          width - iCoverRight,
          0,
          iCoverRight,
          height
        );
      }
      if(iCoverBottom ! =0) {
        oWebControl.JS_CuttingPartWindow(
          0, height - iCoverBottom, width, iCoverBottom ); }},// 
    createDebounce(fn, delay = 500) {
      let timmer = null;
      return () = >{
        clearTimeout(timmer)
        timmer = setTimeout(() = >{ fn && fn() }, delay); ,}}}};</script>

<style lang="scss" scoped>
.video_hk_box {
  width: 100%;
  height: 100%;
  .video {
    width: 100%;
    height: 100%;
  }
  .down{
    width: 100%;
    height: 100%;
    a{
      font-size: 40px;
      color: #ffffff;
      text-decoration: none; }}}</style>

Copy the code