其他分享
首页 > 其他分享> > SpringBoot+Vue+iSecure Center(海康综合安防管理平台)实现视频预览

SpringBoot+Vue+iSecure Center(海康综合安防管理平台)实现视频预览

作者:互联网

场景

SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版):

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121180769

上面可通过单个摄像头的ip、端口、用户名、密码等参数实现单个摄像头预览。

但是缺点是如果是插件版的摄像头视频对接,需要将浏览器切换成兼容模式或者使用IE浏览器进行预览。

但是如果将摄像头添加到海康威视的综合安防管理平台(iSecure Center上),则可以不用切换兼容模式进行

视频预览。

对接的文档以及示例代码可以去海康威视官网寻找和下载

 

 

注意选择对应的版本,版本查看方式在安防平台中点击右上角菜单的按钮,选择关于

然后点击关于就可以看到版本

 

 

 

 

 

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、下载示例代码之后找到demo下的preview的html,这里以1.1.0为例,不同版本代码目录可能不同。

 

 

2、打开该预览demo页面发现预览需要一些参数appkey、secret、API网关地址IP、监控点编号等关键信息。

 

 

3、appkey等调用接口认证的相关参数获取。

在安防平台对应ip的8001端口进入运行管理中心,或者可以直接通过安防平台的关于直接点击跳转

然后状态监控-运行管理中心-API网关-参数配置-API管理

 

 

然后新建合作方,就可以获取到appkey和secret

 

 

4、监控点获取

综合安防管理平台右上角点击菜单选择系统管理-设备管理-视频监控-监控点

 

 

点击每个摄像头的编辑按钮即可以看到监控点编号

 

 

5、视频预览demo运行

首先确保这个监控点在安防平台本身是能直接预览的,会提示你安装插件,安装完插件之后可能需要重新浏览器或者电脑。

 

 

然后在预览htmldemo中配置以上的参数并进行预览测试。

 

 

6、在示例代码下能成功预览则进行VUE代码改造。

若依前后端分离版手把手教你本地搭建环境并运行项目:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

上面在搭建起来前后端分离版的项目后,新建一个数据库用来存储监控点的编号信息等。

DROP TABLE IF EXISTS `bus_platform_surveillance_video`;
CREATE TABLE `bus_platform_surveillance_video`  (
  `id` bigint(0) NOT NULL AUTO_INCREMENT COMMENT '序号',
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '名称',
  `monitory_point_number` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '监控点编号',
  `area_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '位置',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 22 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci COMMENT = '带有监控点编号的摄像头' ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

这里主要建了一个表用来存储摄像头监控点的编号以及坐标信息(业务需求)。

然后根据数据库生成后台代码,这里不再赘述,只需要简单的增删改查的接口。

7、前端代码

Vue的预览代码大部分就是参考其官方的预览html的demo进行的改造。

附官方预览html代码

<!doctype html>
<html>
<head>
    <title>预览Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
</head>
<style>
html, body {
    padding: 0;
    margin: 0;
}
.playWnd {
    margin: 50px 0 0 100px;
    width: 600px;
    height: 400px;
    border: 1px solid red;
}
.cbInfoDiv {
    float: left;
    width: 500px;
    margin-left: 16px;
    border:1px solid #7F9DB9;
}
.cbInfo {
    height: 200px;
    padding: 5px;
    border: 1px solid #7F9DB9;
    overflow: auto;
    word-break: break-all;
}
.operate {
    margin-top: 24px;
}
.operate::after {
    content: '';
    display: block;
    clear: both;
}
.operate .btns {
    height: 32px;
}
.module {
    float: left;
    width: 340px;
    min-height: 320px;
    margin-left: 16px;
    padding: 16px 8px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
}
.module .item {
    margin-bottom: 4px;
}
.module .label {
    width: 150px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    text-align: right;
}
.module input[type="text"],
.module select {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    width: 150px;
    min-height: 20px;
}
.module .btn {
    min-width: 80px;
    min-height: 24px;
    margin-top: 16px;
    margin-left: 158px;
}
</style>
<body>
    <div id="playWnd" class="playWnd"></div>
    <div id="operate" class="operate">
        <div class="module">
            <div class="item"><span class="label">appkey:</span><input id="appkey" type="text"></div>
            <div class="item"><span class="label">secret:</span><input id="secret" type="text"></div>
            <div class="item"><span class="label">API网关IP地址:</span><input id="ip" type="text"></div>
   <div class="item">
    <span class="label">是否启用HTTPS协议</span>
    <select id="isHttps" onchange="UpdateValue()" value="不启用">
     <option value="0" selected>不启用</option>
                    <option value="1">启用</option>
    </select>
   </div>
            <div class="item"><span class="label">API网关端口:</span><input id="port" value="80" type="text"></div>
            <div class="item"><span class="label">抓图存储路径:</span><input id="snapDir" type="text" value="D:\SnapDir"></div>
            <div class="item">
                <span class="label">初始化布局:</span>
                <select id="layout" value="2x2">
                    <option value="1x1">1x1</option>
                    <option value="2x2" selected>2x2</option>
                    <option value="3x3">3x3</option>
                    <option value="4x4">4x4</option>
                </select>
            </div>
            <div class="item">
                <span class="label">加密字段:</span>
                <div style="display: inline-block; vertical-align: top;">
                    <label><input type="checkbox" value="secret" disabled checked>secret</label><br>
                    <label><input class="encryptedFields" type="checkbox" value="appkey">appkey</label><br>
                    <label><input class="encryptedFields" type="checkbox" value="ip">ip</label><br>
                    <label><input class="encryptedFields" type="checkbox" value="snapDir">抓图路径</label><br>
                    <label><input class="encryptedFields" type="checkbox" value="layout">布局</label>
                </div>
            </div>
            <div class="item"><button id="init" class="btn">初始化</button></div>
        </div>
        <div class="module">
            <div class="item"><span class="label">监控点编号:</span><input id="cameraIndexCode" type="text"></div>
            <div class="item">
                <span class="label">主子码流标识:</span>
                <select id="streamMode" value="0">
                    <option value="0">主码流</option>
                    <option value="1">子码流</option>
                </select>
            </div>
            <div class="item">
                <span class="label">传输协议:</span>
                <select id="transMode" value="1">
                    <option value="1">TCP</option>
                    <option value="0">UDP</option>
                </select>
            </div>
            <div class="item">
                <span class="label">是否启用GPU硬解:</span>
                <select id="gpuMode" value="0">
                    <option value="0">不启用</option>
                    <option value="1">启用</option>
                </select>
            </div>
            <div class="item"><button id="startPreview" class="btn">预览</button></div>
            <div class="item"><button id="stopAllPreview" class="btn">停止全部预览</button></div>
            <div class="item"><button id="uninit" class="btn">反初始化</button></div>
        </div>
        <fieldset class="cbInfoDiv">
            <legend>返回值信息</legend>
            <div id="cbInfo" class="cbInfo"></div>
            <button id="clear">清空</button>
        </fieldset>
    </div>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script>
<script src="jsWebControl-1.0.0.min.js"></script>

<script type="text/javascript">
    var oWebControl = null;// 插件对象
    var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window);// 是否为IE浏览器
    var pubKey = '';

    var iLastCoverLeft = 0;
    var iLastCoverTop = 0;
    var iLastCoverRight = 0;
    var iLastCoverBottom = 0;
 var initCount = 0;

    // 标签关闭
    $(window).unload(function () {
        if (oWebControl != null){
                oWebControl.JS_Disconnect().then(function(){}, function() {});
            }
    });

    // 窗口resize
    $(window).resize(function () {
        if (oWebControl != null) {
            oWebControl.JS_Resize(600, 400);
            setWndCover();
        }
    });

    // 滚动条scroll
    $(window).scroll(function () {
        if (oWebControl != null) {
            oWebControl.JS_Resize(600, 400);
            setWndCover();
        }
    });

    // 设置窗口遮挡
    function 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 > 600) ? 600 : iCoverLeft;
        iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
        iCoverRight = (iCoverRight > 600) ? 600 : iCoverRight;
        iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;

        if (iLastCoverLeft != iCoverLeft) {
            console.log("iCoverLeft: " + iCoverLeft);
            iLastCoverLeft = iCoverLeft;
            oWebControl.JS_SetWndCover("left", iCoverLeft);
        }
        if (iLastCoverTop != iCoverTop) {
            console.log("iCoverTop: " + iCoverTop);
            iLastCoverTop = iCoverTop;
            oWebControl.JS_SetWndCover("top", iCoverTop);
        }
        if (iLastCoverRight != iCoverRight) {
            console.log("iCoverRight: " + iCoverRight);
            iLastCoverRight = iCoverRight;
            oWebControl.JS_SetWndCover("right", iCoverRight);
        }
        if (iLastCoverBottom != iCoverBottom) {
            console.log("iCoverBottom: " + iCoverBottom);
            iLastCoverBottom = iCoverBottom;
            oWebControl.JS_SetWndCover("bottom", iCoverBottom);
        }
    }
 
 function UpdateValue()
 {
  var sel = document.getElementById("isHttps");
  var selectedId = sel.selectedIndex;
  var v = sel.options[selectedId].value;
  if (0 == v)
  {
   document.getElementById("port").value = 80;
  }
  else
  {
   document.getElementById("port").value = 443;
  }      
 }
 
    // 初始化插件
 function initPlugin () {
  $("#init").attr('disabled', false);
  $("#startPreview").attr('disabled', false);
     $("#stopAllPreview").attr('disabled', false);
     $("#uninit").attr('disabled', false);
  oWebControl = new WebControl({
   szPluginContainer: "playWnd",
   iServicePortStart: 15900,
   iServicePortEnd: 15909,
   cbConnectSuccess: function () {
    setCallbacks();
    

    oWebControl.JS_StartService("window", {
     dllPath: "./VideoPluginConnect.dll"
     //dllPath: "./DllForTest-Win32.dll"
    }).then(function () {
     oWebControl.JS_CreateWnd("playWnd", 600, 400).then(function () {
      console.log("JS_CreateWnd success");
      $("#init").attr('disabled', false);
      $("#startPreview").attr('disabled', false);
      $("#stopAllPreview").attr('disabled', false);
      $("#uninit").attr('disabled', false);
     });
    }, function () {
    
    });
   },
   cbConnectError: function () {
    console.log("cbConnectError");
    oWebControl = null;
    $("#playWnd").html("插件未启动,正在尝试启动,请稍候...");
    WebControl.JS_WakeUp("VideoWebPlugin://");
    initCount ++;
    if (initCount < 3) {
     setTimeout(function () {
      initPlugin();
     }, 3000)
    } else {
     $("#playWnd").html("插件启动失败,请检查插件是否安装!");
    }
   },
   cbConnectClose: function () {
    console.log("cbConnectClose");
    oWebControl = null;
   }
  });
 }
 
 initPlugin();


   

    // 获取公钥
    function 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()
            }
        })
    }

    // 设置窗口控制回调
    function setCallbacks() {
        oWebControl.JS_SetWindowControlCallback({
            cbIntegrationCallBack: cbIntegrationCallBack
        });
    }

    // 推送消息
    function cbIntegrationCallBack(oData) {
        showCBInfo(JSON.stringify(oData.responseMsg));
    }

    // RSA加密
    function setEncrypt (value) {
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(pubKey);
        return encrypt.encrypt(value);
    }

    // 初始化
    $("#init").click(function () {
        getPubKey(function () {
            var appkey = $("#appkey").val();
            var secret = setEncrypt($("#secret").val());
            var ip = $("#ip").val();
            var port = parseInt($("#port").val());
            var snapDir = $("#snapDir").val();
            var layout = $("#layout").val();
            var encryptedFields = ['secret'];
   var enableHttps = parseInt($("#isHttps").val());
            $(".encryptedFields").each(function (index, item) {
                var $item = $(item);
                if ($item.prop('checked')) {
                    var value = $item.val();
                    if (value !== 'secret') {
                        encryptedFields.push(value);
                    }
                   
                    // secret固定加密,其它根据用户勾选加密
                    if (value == 'ip') {
                        ip = setEncrypt(ip)
                    }
                    if (value == 'appkey') {
                        appkey = setEncrypt(appkey)
                    }
                    if (value == 'snapDir') {
                        snapDir = setEncrypt(snapDir)
                    }
                    if (value == 'layout') {
                        layout = setEncrypt(layout)
                    }
                }
            })
            encryptedFields = encryptedFields.join(",");

            if (!appkey) {
                showCBInfo("appkey不能为空!", 'error');
                return
            }
            if (!$("#secret").val()) {
                showCBInfo("secret不能为空!", 'error');
                return
            }
            if (!ip) {
                showCBInfo("ip不能为空!", 'error');
                return
            }
            if (!$("#port").val()) {
                showCBInfo("端口不能为空!", 'error');
                return
            } else if (!/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test($("#port").val())) {
                showCBInfo("端口填写有误!", 'error');
                return
            }
            console.log({
                appkey: appkey,
                secret: secret,
                ip: ip,
                playMode: 0, // 预览
                port: port,
                snapDir: snapDir,
                layout: layout,
    enableHTTPS: enableHttps,
                encryptedFields: encryptedFields
            })

            oWebControl.JS_RequestInterface({
                funcName: "init",
                argument: JSON.stringify({
                    appkey: appkey,
                    secret: secret,
                    ip: ip,
                    playMode: 0, // 预览
                    port: port,
                    snapDir: snapDir,
                    layout: layout,
     enableHTTPS: enableHttps,
                    encryptedFields: encryptedFields
                })
            }).then(function (oData) {
                showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
            });
        })
    });

    // 视频预览
 $("#startPreview").click(function () {
        var cameraIndexCode  = $("#cameraIndexCode ").val();
        var streamMode = +$("#streamMode").val();
        var transMode = +$("#transMode").val();
        var gpuMode = +$("#gpuMode").val();

        if (!cameraIndexCode ) {
            showCBInfo("监控点编号不能为空!", 'error');
            return
        }

        oWebControl.JS_RequestInterface({
            funcName: "startPreview",
            argument: JSON.stringify({
                cameraIndexCode : cameraIndexCode ,
                streamMode: streamMode,
                transMode: transMode,
                gpuMode: gpuMode
            })
        }).then(function (oData) {
            showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
        });
    });

    // 停止预览
    $("#stopAllPreview").click(function () {
        oWebControl.JS_RequestInterface({
            funcName: "stopAllPreview"
        }).then(function (oData) {
            showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
        });
    })

    // 反初始化
    function uninit (cbFunc) {
        oWebControl.JS_RequestInterface({
            funcName: "uninit"
        }).then(function (oData) {
            showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));

            cbFunc && cbFunc();
        });
    }
    $("#uninit").click(uninit)


    // 显示回调信息
    function showCBInfo(szInfo, type) {
        if (type === 'error') {
            szInfo = "<div style='color: red;'>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
        } else {
            szInfo = "<div>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
        }
        $("#cbInfo").html(szInfo + $("#cbInfo").html());
    }

    $("#clear").click(function() {
        $("#cbInfo").html('');
    })

    // 格式化时间
    function dateFormat(oDate, fmt) {
        var o = {
            "M+": oDate.getMonth() + 1, //月份
            "d+": oDate.getDate(), //日
            "h+": oDate.getHours(), //小时
            "m+": oDate.getMinutes(), //分
            "s+": oDate.getSeconds(), //秒
            "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
            "S": oDate.getMilliseconds()//毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }


</script>
</html>

 

改造成Vue的代码

8、首先是list页面用来查询所有摄像头的监控点编号信息。

 

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['runcontrolmange:surveillanceVideo:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['runcontrolmange:surveillanceVideo:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['runcontrolmange:surveillanceVideo:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-setting"
          size="mini"
          :disabled="single"
          @click="videoChange"
          >预览</el-button
        >
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="videoList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        show-overflow-tooltip
        label="摄像头名称"
        align="center"
        prop="name"
      />
      <el-table-column
        show-overflow-tooltip
        label="摄像头编号"
        align="center"
        prop="monitoryPointNumber"
      />
      <el-table-column
        show-overflow-tooltip
        label="摄像头坐标"
        align="center"
        prop="areaName"
      />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['runcontrolmange:surveillanceVideo:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['runcontrolmange:surveillanceVideo:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改识别用户对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="摄像头名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入摄像头名称" />
        </el-form-item>

        <el-form-item label="摄像头编号" prop="monitoryPointNumber">
          <el-input v-model="form.monitoryPointNumber" placeholder="请输入摄像头编号" />
        </el-form-item>

        <el-form-item label="摄像头位置" prop="coordinate">
          <el-input
            v-model="lightPoint"
            placeholder="点击新增/更改摄像头坐标"
            @focus="onMap"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 摄像头 -->
    <HkVideo ref="carVideo" :videoData="openVideoData[0].monitoryPointNumber" />
    <!-- 地图 -->
    <videoMap ref="videoMap" @childEvent="parentEvent"></videoMap>
  </div>
</template>

<script>
import {
  addVideo,
  updateVideo,
  delVideo,
  getVideoInfo,
} from "@/api/runcontrolmange/HkVideo";
import HkVideo from "./components/HkVideo.vue";
import CarVideo from "../carVideo/component/video.vue";
import videoMap from "../carVideo/component/videoMap";

export default {
  name: "carHkVideo",
  components: {
    HkVideo,
    CarVideo,
    videoMap,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      videoList: [],
      allVideoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        coordinate: "",
      },
      // 表单校验
      rules: {},
      dialogVisible: false,
      g_iWndIndex: 0,
      szInfo: "",
      rowList: {},
      mySelectWnd: 0, //当前选中的窗口
      g_bPTZAuto: false,
      iProtocol: 1,
      loginLoading: false,
      startPlayLoading: false,
      iStreamType: 1,
      bZeroChannel: false,
      iRtspPort: 0,
      ua: navigator.userAgent.toLocaleLowerCase(),
      browserType: null,
      // 预览摄像头的参数
      openVideoData: [{monitoryPointNumber:''}],
      lightPoint: [],
      lightData: [],
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  destroyed() {},
  methods: {
    videoChange() {
      this.$refs.carVideo.videoChange()
    },
    parentEvent(data) {
      this.form.siteX = data[0];
      this.form.siteY = data[1];
      this.lightPoint = `${this.form.siteX},${this.form.siteY}`;
      this.form.coordinate = this.lightPoint;
    },
    onMap() {
      this.$refs.videoMap.dialogVisible = true;
      this.$refs.videoMap.init();
      this.$refs.videoMap.coordinate = this.form.coordinate;
      this.$refs.videoMap.drawPoint([this.form.siteX, this.form.siteY]);
    },
    getList() {
      getVideoInfo(this.queryParams).then((res) => {
        this.videoList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
      getVideoInfo().then((res) => {
        this.allVideoList = res.rows;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.lightPoint = "";
      this.title = "新增摄像头";
    },
    handleUpdate(row) {
      this.reset();
      this.title = "修改";
      this.open = true;
      let id;
      if (row.id) {
        id = row.id;
        this.videoList.forEach((item) => {
          if (item.id == id) {
            this.form = JSON.parse(JSON.stringify(item));
            this.lightPoint = item.areaName;
          }
        });
      } else {
        id = this.ids;
        this.videoList.forEach((item) => {
          if (item.id == id[0]) {
            this.form = JSON.parse(JSON.stringify(item));
            this.lightPoint = item.areaName;
          }
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateVideo(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addVideo(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm("是否确认删除该条数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delVideo(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.openVideoData = [];
      this.openVideoData = selection;
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        ip: null,
        name: null,
        username: null,
        password: null,
        port: null,
        coordinate: "",
      };

      this.resetForm("form");
    },
  },
};
</script>

 

在点击新增和编辑时会调用地图组件选择坐标,这里与业务相关可忽略。

当点击预览按钮将监控点编号参数传递到预览的窗口页面。

9、预览界面

<template>
  <el-dialog
    title="视频监控"
    :visible.sync="videoOpen"
    width="800px"
    append-to-body
    @close="videoClose"
    class="video_box"
  >
      <!--视频窗口展示-->
      <div id="playWnd" class="playWnd"></div>
  </el-dialog>
</template>

<script>
export default {
  name: "HkVideo",
  components: {},
  props: {
    videoData: ''
  },
  watch: {
    videoData() {
      this.getVideoData();
    },
  },
  data() {
    return {
      videoOpen: false,
      swfHeight: "",
      swfWidth: "",
      streamMode: 0, // 主子码流标识:0-主码流,1-子码流
      transMode: 1, // 传输协议:0-UDP,1-TCP
      gpuMode: 0, // 是否启用GPU硬解,0-不启用,1-启用
      initParams: {},
      previewParams: {}, // 预览参数
      oWebControl: null,
      initCount: 0,
      pubKey: "",
    };
  },
  created() {},
  mounted() {
    this.getVideoData();
    $(window).resize(() => {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(800, 600);
        this.setWndCover();
      }
    });
    // 监听滚动条scroll事件,使插件窗口跟随浏览器滚动而移动
    $(window).scroll(() => {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(800, 600);
        this.setWndCover();
      }
    });
  },
  destroyed() {},
  methods: {
    getVideoData() {
      console.log("videoData", this.videoData);
      this.previewParams = {
        cameraIndexCode: this.videoData, // 监控点编号
        streamMode: 0, // 主子码流标识,0-主码流 1-子码流
        transMode: 1, // 传输协议,0-UDP 1-TCP
        gpuMode: 0, // 是否开启 GPU 硬解,不建议开启,0-不开启 1-开启
      };
      console.log("this.previewParams", this.previewParams);
    },
    // 创建播放实例
    initPlugin() {
      console.log("init");
      // 创建播放容器实例
      this.oWebControl = new WebControl({
        szPluginContainer: "playWnd", // 指定容器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_CreateWnd("playWnd", 800, 600).then((e) => {
                  //JS_CreateWnd创建视频播放窗口,宽高可设定
                  console.log("成功创建视频播放窗口");
                  this.init(); // 创建播放实例成功后初始化
                });
              },
              function () {
                // 启动插件服务失败
                console.log("启动插件服务失败");
              }
            );
        },
        cbConnectError: () => {
          // 创建WebControl实例失败
          this.oWebControl = null;
          this.$message({
            message: "插件未启动,正在尝试启动,请稍候...",
          });
          WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数,采用wakeup来启动程序
          this.initCount++;
          if (this.initCount < 3) {
            setTimeout(() => {
              this.initPlugin();
            }, 3000);
          } else {
            this.$message.error("插件启动失败,请检查插件是否安装!");
            this.myFunction();
          }
        },
        cbConnectClose: (bNormalClose) => {
          // 异常断开:bNormalClose = false
          // JS_Disconnect正常断开:bNormalClose = true
          console.log("cbConnectClose");
          this.oWebControl = null;
        },
      });
    },
    //初始化
    init() {
      this.getPubKey(() => {
        this.initParams = {
          appkey: "综合安防管理平台提供的appkey", //综合安防管理平台提供的appkey,必填
          secret: this.setEncrypt("综合安防管理平台提供的secret"), //综合安防管理平台提供的secret,必填
          ip: "综合安防管理平台IP地址", //综合安防管理平台IP地址,必填
          playMode: 0, //初始播放模式:0-预览,1-回放
          port: 443, //综合安防管理平台端口,若启用HTTPS协议,默认443
          snapDir: "D:\\SnapDir", //抓图存储路径
          // videoDir: "D:\\VideoDir", //紧急录像或录像剪辑存储路径
          layout: "1x1", //playMode指定模式的布局
          enableHTTPS: 1, //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
          encryptedFields: "secret", //加密字段,默认加密领域为secret
          showToolbar: 1, //是否显示工具栏,0-不显示,非0-显示
          showSmart: 1, //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
          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(this.initParams),
          })
          .then((oData) => {
            if (oData.responseMsg.code == 0) {
            console.log("初始化成功", oData);
              this.oWebControl.JS_Resize(800, 600); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
              this.preview();
            } else {
              this.$message.error(oData.responseMsg.msg);
            }
          });
      });
    },

    //预览功能
    preview() {
      console.log("preview");
      this.oWebControl
        .JS_RequestInterface({
          funcName: "startPreview",
          argument: JSON.stringify(this.previewParams),
        })
        .then((e) => {
          if(e.responseMsg.code == 0) {
            console.log("预览接口调用成功", e);
          }
        });
    },
    //停止全部预览功能
    stopAllPreview() {
      this.oWebControl.JS_RequestInterface({
        funcName: "stopAllPreview",
      });
    },
    //关闭视频窗口
    closeWindow() {
      console.log("close");
      if (this.oWebControl != null) {
        this.oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
      }
    },

    //获取公钥
    getPubKey(callback) {
      this.oWebControl
        .JS_RequestInterface({
          funcName: "getRSAPubKey",
          argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then((oData) => {
          if (oData.responseMsg.data) {
            console.log("获取公钥成功", oData);
            this.pubKey = oData.responseMsg.data;
            callback();
          } else {
            this.$message.error(oData.responseMsg.msg)
          }
        });
    },
    // 设置窗口裁剪,当因滚动条滚动导致窗口需要被遮住的情况下需要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
        );
      }
    },
    //RSA加密
    setEncrypt(value) {
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.pubKey);
      return encrypt.encrypt(value);
    },
    myFunction() {
      var r = confirm("您还未安装过插件,请下载后查看摄像!");
      if (r == true) {
        window.location.href = "/VideoWebPlugin.exe";
      } else {
      }
    },
    // 查看摄像
    videoChange() {
      this.videoOpen = true;
      this.$nextTick(() => {
        this.initPlugin();
      });
    },
    // 关闭摄像头弹窗
    videoClose() {
      this.videoOpen = false;
      this.closeWindow();
    },
  },
};
</script>
<style scoped lang="scss">
.video_box {
  width: 100%;
  height: 100%;
}

.plugin {
  width: 100%;
  height: 100%;
}

.playWnd {
  width: 800px;
  height: 600px;
  margin: 0;
}

.video_box {
  ::v-deep .el-dialog__body {
    padding: 0 !important;
  }
}
</style>

注意这里需要将上面获取的appkey、secret等参数填充。

然后这里将提示下载插件的地址改为前端本地地址,防止因内网无法访问外网等原因无法下载插件。

 

 

另外需要注意引用js插件的引入,这里直接在public下index.html中引入

 

 

    <!--海康位置摄像头三个必要的js文件引入-->
    <scriptsrc="<%= BASE_URL %>static/HK_1.1.0/jquery-1.12.4.min.js"></script>
    <scriptsrc="<%= BASE_URL %>static/HK_1.1.0/jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
    <script src="<%= BASE_URL %>static/HK_1.1.0/jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 -->

预览效果

 

 

标签:function,Vue,SpringBoot,预览,oData,JS,var,iSecure,oWebControl
来源: https://www.cnblogs.com/badaoliumangqizhi/p/16492862.html