海康威视web结合Vue+Java

最新推荐文章于 2024-09-24 15:52:42 发布
最新推荐文章于 2024-09-24 15:52:42 发布
阅读量2.8k 收藏 10
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36382225/article/details/107564597
版权

技术点

前端iView + webVideoCtrl.js（有改动）
后台Java

基本功能

  1. 实时预览
    预览界面
    动态配置NVR参数，获取NVR下的所有摄像头（支持多nvr同时预览），提供窗口配置功能，记录当前窗口所对应的的摄像头，下次进入页面可以手动载入
  2. 录像回看
    回放数据
    回放
    回放功能支持进度拖拽
  3. 设备管理
    列表
    本地配置
    NVR通道列表

提供NVR设备管理功能

其他

由于涉及到业务方面，其余功能页面就不展示了，有兴趣做海康威视web开发的可以一起讨论

前端代码

  1. 实时监控，修改了webVideoCtrl.js（文件内容太长传不上），NVR数据获取通过后台（也可以直接前端写死模拟数据）
<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader content="实时预览：实时预览摄像头获取的图像信息" hidden-breadcrumb />
      <Card :bordered="false" dis-hover :style="treeGardHeight" class="tree_grid_card ivu-mt">
        <div>
          <Row :gutter="24">
            <i-col span="4">
              <div style="font-weight:bold">选择矩阵:</div>
              <Select
                v-model="frames"
                placeholder="请选择窗口大小"
                @on-change="framesChange"
                style="width:120px;"
              >
                <Option :value="1" :key="1">1x1</Option>
                <Option :value="2" :key="2">2x2</Option>
                <Option :value="3" :key="3">3x3</Option>
                <Option :value="4" :key="4">4x4</Option>
                <Option :value="5" :key="5">5x5</Option>
                <Option :value="6" :key="6">6x6</Option>
                <Option :value="7" :key="7">7x7</Option>
                <Option :value="8" :key="8">8x8</Option>
              </Select>
              <div style="font-weight:bold">设备信息:</div>
              <Tree :data="nvrTree" @on-select-change="treeSelectChange"></Tree>
            </i-col>
            <i-col :xl="20" :lg="20" :md="20" :sm="20" :xs="20">
              <Form :label-width="labelWidth" :label-position="labelPosition">
                <Row :gutter="24" type="flex" justify="start">
                  <!--                        <i-col span="8">-->
                  <!--                            <span>设备信息：</span>-->
                  <!--                            <Tree :data="nvrTree" @on-select-change="treeSelectChange"></Tree>-->
                  <!--
                  </i-col>-->
                  <i-col span="100%" type="flex" justify="start">
                    <Button
                      type="primary"
                      @click="startRealPlay(0)"
                      style="margin-bottom: 10px"
                    >开始预览</Button>
                    <Button
                      type="primary"
                      @click="stopRealPlay('',0)"
                      style="margin-left: 10px;margin-bottom: 10px"
                    >停止预览</Button>
                    <Button
                      type="primary"
                      @click="startRecord"
                      style="margin-left: 10px;margin-bottom: 10px"
                    >开始录像</Button>
                    <Button
                      type="primary"
                      @click="stopRecord"
                      style="margin-left: 10px;margin-bottom: 10px"
                    >停止录像</Button>
                    <Button
                      type="primary"
                      @click="CapturePic"
                      style="margin-left: 10px;margin-bottom: 10px"
                    >抓&nbsp图</Button>

                    <Poptip confirm transfer title="是否覆盖配置？" @on-ok="saveConf(row,index)">
                      <Button type="warning" style="margin-left: 10px;margin-bottom: 10px">保存配置</Button>
                    </Poptip>
                    <Poptip confirm transfer title="是否载入配置？" @on-ok="loadConf(row,index)">
                      <Button type="warning" style="margin-left: 10px;margin-bottom: 10px">载入配置</Button>
                    </Poptip>
                    <!--<Button type="primary" @click="downLoadPlugin">下载</Button>-->
                    <!--
                                        <tr>
                                            图形&nbsp ID：<input id="snapId" type="text" class="txt" style="width: 110px"/><br>
                                            图形名称：<input id="snapName" type="text" class="txt" style="width: 110px"/>
                                        </tr>
                                        <li>
                                            <Button type="primary" @click="clickEnableDraw">启用绘制</Button>
                                        </li>
                                        <li>
                                            <Button type="primary" @click="clickDisableDraw">禁用绘制</Button>
                                        </li>
                                        <li>
                                            <Button type="primary" @click="clickAddSnapPolygon">添加图形</Button>
                                        </li>
                                        <li>
                                            <Button type="primary" @click="clickDelSnapPolygon">删除图形</Button>
                                        </li>
                                        <li>
                                            <Button type="primary" @click="clickEditSnapPolygon">编辑图形</Button>
                                        </li>
                                        <li>
                                            <Button type="primary" @click="clickStopSnapPolygon">停止编辑</Button>
                                        </li>
                                        <li>
                                            <Button type="primary" @click="clickSetSnapPolygon">设置图形</Button>
                                        </li>
                                        <li>
                                            <Button type="primary" @click="clickGetSnapPolygon">获取图形</Button>
                    </li>-->
                  </i-col>
                </Row>
              </Form>
            </i-col>

            <i-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
              <div>
                <div id="divPlugin" class="plugin"></div>
              </div>
            </i-col>
          </Row>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import { WebVideoCtrl } from "../../../../libs/hkv/webVideoCtrl";
import $ from "jquery";
import { getList, getDetail, remove, add, update } from "@/api/haa/haanvrinfo";
import { mapState } from "vuex";

export default {
  components: {},
  data() {
    return {
      g_iWndIndex: 0,
      frames: 2,
      value: 1,
      iWidth: 1500,
      iHeight: 700,
      iProtocol: 1,
      iStreamType: 1,
      bZeroChannel: false,
      nAnalogChannel: 0,
      nZeroChannel: 0,
      nvrTree: [], // NVR挂载摄像头树形结构数据
      treeObj: {}, // 当前选中的树节点
      loginNvrs: [], // 登录的NVR信息
      runViewWinds: [], // 正在实时浏览的窗口索引，从0开始
      g_bEnableDraw: false, //是否能绘制图形
      allWindData: [],
    };
  },
  created: function () {},
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 10;
    },
    labelPosition() {
      return this.isMobile ? "top" : "left";
    },
    treeGardHeight() {
      let sty = {};
      sty["height"] = $(window).height() - 170 + "px";
      return sty;
    },
  },
  mounted: function () {
    setTimeout(() => {
      this.videoInitPlugin();
    }, 100);
  },
  destroyed: function () {
    var that = this;
    for (let i = 0; i < that.loginNvrs.length; i++) {
      var iRet = WebVideoCtrl.I_Logout(
        that.loginNvrs[i].ip + "_" + that.loginNvrs[i].port
      );
      if (0 == iRet) {
        console.info("退出登录成功");
      } else {
        console.error("退出登录失败");
      }
    }
    // 退出页面停止不成功，只能停止当前选中窗口，改为每次预览前停止该窗口
    // for (let i = 0; i < that.runViewWinds.length; i++) {
    //     that.stopRealPlay(that.runViewWinds[i]);
    // }
  },
  methods: {
    framesChange: function () {
      var that = this;
      WebVideoCtrl.I_ChangeWndNum(that.frames);
    },
    treeSelectChange: function (e) {
      if (e instanceof Array && e.length === 0) {
        this.treeObj = {};
        return;
      }
      if (!e[0].children) {
        this.treeObj = e[0];
      } else {
        this.treeObj = {};
      }
    },
    downLoadPlugin() {
      window.location.href = "/api/mm-behavior/downloadWeb";
    },
    videoInitPlugin: function () {
      var iRet = WebVideoCtrl.I_CheckPluginInstall();
      if (iRet === -1) {
        alert("您还未安装过插件，请下载WebComponentsKit.exe安装！");
        this.downLoadPlugin();
        return;
      }
      this.initPlugin();
    },
    initPlugin: function () {
      var that = this;
      WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
        bWndFull: true, //是否支持单窗口双击全屏
        iWndowType: 2,
        myCbSelWnd: function (xmlDoc) {
          that.g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
        },
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
          // 检查插件是否最新
          if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
            alert(
              "检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！"
            );
            return;
          }
          setTimeout(() => {
            getList(0, 10000).then((res) => {
              var d = res.records;
              for (let i = 0; i < d.length; i++) {
                that.nvrLogin(d[i]);
              }
            });
          }, 70);
          // 读取配置
          if (localStorage.getItem("loadConf") == "yes") {
            setTimeout(() => {
              localStorage.removeItem("loadConf");
              that.frames = parseInt(localStorage.getItem("frames"));
              that.framesChange();
              that.allWindData = JSON.parse(
                localStorage.getItem("allWindData")
              );
              console.info(
                "载入配置 ===> " + localStorage.getItem("allWindData")
              );
              console.info("长度 ===> " + that.allWindData.length);
              for (let i in that.allWindData) {
                if (that.allWindData[i].iWndIndex) {
                  that.startRealPlay(1, that.allWindData[i]);
                }
              }
            }, 1000);
          }
        },
      });
    },
    nvrLogin(obj) {
      var that = this;
      var res = WebVideoCtrl.I_Login(
        obj.ip,
        1,
        obj.port,
        obj.username,
        obj.password,
        {
          // async: false,
          success: function (xmlDoc) {
            console.log("登录成功");
            // var xmlDoc = WebVideoCtrl.I_GetLocalCfg();
            // console.info(xmlDoc);
            that.loginNvrs.push(obj);
            setTimeout(() => {
              that.getChannelInfo(obj.ip, obj.port);
            }, 30);
          },
          error: function () {
            console.log("登录失败");
          },
        }
      );
    },
    getChannelInfo(nvrIp, nvrPort) {
      var that = this;
      // var szIP = that.szIP;
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(nvrIp, {
        // async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("VideoInputChannel");
          var nvrObj = { title: nvrIp, expand: false, children: [] };
          $.each(oChannels, function (i, val) {
            var id = $(this).find("id").eq(0).text(),
              name = $(this).find("name").eq(0).text(),
              online = $(this).find("online").eq(0).text(),
              port = $(this).find("managePortNo").eq(0).text(),
              ipAddress = $(this).find("ipAddress").eq(0).text();
            // console.info("id:" + id + " name:" + name + " online:" + online);
            if ("false" == online) {
              // 过滤禁用的数字通道
              return true;
            }
            nvrObj.children.push({
              title: name,
              id: id,
              channel: id,
              ip: ipAddress,
              nvrIp: nvrIp,
              port: port,
              nvrPort: nvrPort,
            });
          });
          that.nvrTree.push(nvrObj);
          console.log("获取模拟通道成功！");
        },
        error: function (error) {
          console.log(
            "获取模拟通道失败！" + error + WebVideoCtrl.I_GetLastError()
          );
        },
      });
      // 数字通道
      WebVideoCtrl.I_GetDigitalChannelInfo(nvrIp, {
        // async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
          var nvrObj = { title: nvrIp, expand: false, children: [] };
          $.each(oChannels, function (i, val) {
            var id = $(this).find("id").eq(0).text(),
              name = $(this).find("name").eq(0).text(),
              online = $(this).find("online").eq(0).text(),
              port = $(this).find("managePortNo").eq(0).text(),
              ipAddress = $(this).find("ipAddress").eq(0).text();
            // console.info("id:" + id + " name:" + name + " online:" + online);
            if ("false" == online) {
              // 过滤禁用的数字通道
              return true;
            }
            nvrObj.children.push({
              title: name,
              id: id,
              channel: id,
              ip: ipAddress,
              nvrIp: nvrIp,
              port: port,
              nvrPort: nvrPort,
            });
          });
          that.nvrTree.push(nvrObj);
          console.log("获取数字通道成功！");
        },
        error: function () {
          WebVideoCtrl.I_GetLastError();
          console.log("获取数字通道失败！" + WebVideoCtrl.I_GetLastError());
        },
      });
      // 零通道
      // WebVideoCtrl.I_GetZeroChannelInfo(szIP, {
      //     async: false,
      //     success: function(xmlDoc) {
      //         var oChannels = $(xmlDoc).find("ZeroVideoChannel");
      //         that.nZeroChannel = oChannels;
      //         console.log("获取零通道成功！");
      //     },
      //     error: function() {
      //         console.log("获取零通道失败！" + WebVideoCtrl.I_GetLastError());
      //     }
      // });
    },
    startRealPlay: function (type, data) {
      var that = this;
      let szDeviceIdentify;
      let iWndIndex;
      let iChannelID;
      if (type == 0) {
        if (!that.treeObj.id) {
          this.$Message.error("请选择监控通道");
          return;
        }
        szDeviceIdentify = that.treeObj.nvrIp + "_" + that.treeObj.nvrPort;
        iWndIndex = that.g_iWndIndex;
        iChannelID = that.treeObj.channel;
      } else {
        szDeviceIdentify = data.szDeviceIdentify;
        iWndIndex = data.iWndIndex;
        iChannelID = data.iChannelID;
      }
      that.stopRealPlay(iWndIndex, type);
      // 手动预览前先停止该窗口
      console.log("startRealPlay@@: ", szDeviceIdentify, iWndIndex, iChannelID);
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iWndIndex: iWndIndex,
        iStreamType: 1,
        iChannelID: iChannelID,
        bZeroChannel: false,
        success: function () {
          let currentWindData = {
            iWndIndex: iWndIndex,
            szDeviceIdentify: szDeviceIdentify,
            iChannelID: iChannelID,
          };
          if (that.allWindData.length == 0) {
            that.allWindData.push(currentWindData);
          }
          for (let k = 0; k < that.allWindData.length; k++) {
            let confWindData = that.allWindData[k];
            // 如果配置相同，不放入缓存
            if (
              confWindData.iWndIndex == iWndIndex &&
              confWindData.szDeviceIdentify == szDeviceIdentify &&
              confWindData.iChannelID == iChannelID
            ) {
              break;
            }
            if (k == that.allWindData.length - 1) {
              that.allWindData.push(currentWindData);
            }
          }
          // that.runViewWinds.push(iWndIndex);
          that.$Message.success("开始预览成功");
        },
        error: function (status, xmlDoc2) {
          console.log(xmlDoc2); //不能删除
          if (status === 403) {
            console.log("szInfo 设备不支持Websocket取流！");
          } else {
            that.$Message.error("开始预览失败 ");
          }
        },
      });
    },

    stopRealPlay: function (windIndex, type) {
      var that = this;
      var index;
      if (windIndex == "") {
        index = that.g_iWndIndex;
      } else {
        index = windIndex;
      }
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(index);
      if (oWndInfo != null) {
        WebVideoCtrl.I_Stop({
          success: function () {
            // 从所有窗口展示数据中清除
            if (type == 0) {
              for (let i = 0; i < that.allWindData.length; i++) {
                if (that.allWindData[i].iWndIndex == index) {
                  that.allWindData.splice(i, i + 1);
                  break;
                }
              }
            }
            // var arr = that.arrayRemove(that.runViewWinds, index);
            console.info("停止预览成功");
          },
          error: function () {
            console.error("停止预览失败");
          },
        });
      }
    },
    saveConf: function () {
      var that = this;
      localStorage.setItem("frames", that.frames);
      localStorage.setItem("allWindData", JSON.stringify(that.allWindData));
      console.info("保存配置 ===> " + JSON.stringify(that.allWindData));
      console.info("长度 ===> " + that.allWindData.length);
      that.$Message.success("保存配置成功");
    },
    loadConf: function () {
      var that = this;
      if (!localStorage.getItem("allWindData")) {
        that.$Message.error("没有可以载入的配置");
        return;
      }
      // 传入标识，载入配置
      localStorage.setItem("loadConf", "yes");
      location.reload();
      this.$router.go(0);
    },
    CapturePic: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        var xmlDoc = WebVideoCtrl.I_GetLocalCfg();
        var szCaptureFileFormat = " 0";
        if (xmlDoc != null) {
          szCaptureFileFormat = $(xmlDoc)
            .find("CaptureFileFormat")
            .eq(0)
            .text();
        }
        var szChannelID = that.treeObj.channel,
          szPicName =
            oWndInfo.szDeviceIdentify +
            "_" +
            szChannelID +
            "_" +
            new Date().getTime();
        szPicName += "0" === szCaptureFileFormat ? ".jpg" : ".bmp";
        var iRet = WebVideoCtrl.I_CapturePic(szPicName, {
          bDateDir: true, //是否生成日期文件
        });
        if (0 == iRet) {
          that.$Message.success("抓图成功");
        } else {
          that.$Message.error("抓图失败");
        }
      }
    },

    startRecord: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        var szChannelID = that.treeObj.channel,
          szFileName =
            oWndInfo.szDeviceIdentify +
            "_" +
            szChannelID +
            "_" +
            new Date().getTime();

        WebVideoCtrl.I_StartRecord(szFileName, {
          bDateDir: true, //是否生成日期文件
          success: function () {
            that.$Message.success("开始录像成功");
          },
          error: function () {
            that.$Message.error("开始录像失败");
          },
        });
      }
    },

    stopRecord: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_StopRecord({
          success: function () {
            that.$Message.success("停止录像成功");
          },
          error: function () {
            that.$Message.error("停止录像失败");
          },
        });
      }
    },
    arrayRemove: function (arr, val) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
          arr.splice(i, 1);
          return arr;
        }
      }
    },
    showOPInfo: function (szInfo, status, xmlDoc) {
      var that = this;
      var szTip =
        "<div>" +
        that.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") +
        " " +
        szInfo;
      if (typeof status != "undefined" && status != 200) {
        var szStatusString = $(xmlDoc).find("statusString").eq(0).text();
        var szSubStatusCode = $(xmlDoc).find("subStatusCode").eq(0).text();
        if ("" === szSubStatusCode) {
          szTip += "(" + status + ", " + szStatusString + ")";
        } else {
          szTip += "(" + status + ", " + szSubStatusCode + ")";
        }
      }
      szTip += "</div>";

      $("#opinfo").html(szTip + $("#opinfo").html());
    },

    encodeString: function (str) {
      if (str) {
        return str
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;");
      } else {
        return "";
      }
    },

    loadXML: function (szXml) {
      if (null == szXml || "" == szXml) {
        return null;
      }

      var oXmlDoc = null;

      if (window.DOMParser) {
        var oParser = new DOMParser();
        oXmlDoc = oParser.parseFromString(szXml, "text/xml");
      } else {
        oXmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        oXmlDoc.async = false;
        oXmlDoc.loadXML(szXml);
      }

      return oXmlDoc;
    },
    getSnapPolygon: function (szId) {
      var that = this;
      var szInfo = WebVideoCtrl.I_GetSnapPolygonInfo(that.g_iWndIndex);
      var oXML = that.loadXML(szInfo);
      if (typeof szId === "undefined") {
        return oXML;
      } else {
        var iIndex = -1;

        var aNodeList = $(oXML).find("SnapPolygon");
        if (aNodeList.length > 0) {
          $.each(aNodeList, function (i) {
            if ($(this).find("id").text() === szId) {
              iIndex = i;
              return false;
            }
          });
        }

        return iIndex;
      }
    },

    clickEnableDraw: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);

      if (oWndInfo != null) {
        var iRet = WebVideoCtrl.I_SetPlayModeType(6); // 多边形模式

        if (0 === iRet) {
          that.g_bEnableDraw = true;
          that.$Message.success("启用绘制成功！");
        } else {
          that.$Message.error("启用绘制失败！");
        }
      }
    },
    loadXML: function (szXml) {
      if (null == szXml || "" == szXml) {
        return null;
      }

      var oXmlDoc = null;

      if (window.DOMParser) {
        var oParser = new DOMParser();
        oXmlDoc = oParser.parseFromString(szXml, "text/xml");
      } else {
        oXmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        oXmlDoc.async = false;
        oXmlDoc.loadXML(szXml);
      }

      return oXmlDoc;
    },

    clickDisableDraw: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        var iRet = WebVideoCtrl.I_SetPlayModeType(0); // 预览模式
        if (0 === iRet) {
          that.g_bEnableDraw = false;
          that.showOPInfo(that.g_bEnableDraw);
          that.$Message.success("禁用绘制成功！");
        } else {
          that.$Message.error("禁用绘制失败！");
        }
      }
    },
    clickAddSnapPolygon: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);

      if (oWndInfo != null) {
        if (!that.g_bEnableDraw) {
          return;
        }

        var szId = $("#snapId").val();
        var szName = that.encodeString($("#snapName").val());

        var szInfo = "<?xml version='1.0' encoding='utf-8'?>";
        szInfo += "<SnapPolygonList>";
        szInfo += "<SnapPolygon>";
        szInfo += "<id>" + szId + "</id>"; // [1, 32]
        szInfo += "<polygonType>1</polygonType>";
        szInfo += "<PointNumMax>17</PointNumMax>"; // [MinClosed, 17]
        szInfo += "<MinClosed>4</MinClosed>"; // [4, 17]
        szInfo += "<tips>#" + szId + "#" + szName + "</tips>";
        szInfo += "<isClosed>false</isClosed>";
        szInfo += "<color><r>0</r><g>255</g><b>0</b></color>";
        szInfo += "<pointList/>";
        szInfo += "</SnapPolygon>";
        szInfo += "</SnapPolygonList>";

        var iRet = WebVideoCtrl.I_SetSnapPolygonInfo(that.g_iWndIndex, szInfo);
        if (0 === iRet) {
          that.showOPInfo("窗口" + that.g_iWndIndex + "添加图形成功！");
        } else if (-1 === iRet) {
          that.showOPInfo("窗口" + that.g_iWndIndex + "添加图形失败！");
        } else if (-2 === iRet) {
          alert("参数错误！");
        } else if (-3 === iRet) {
          alert("图形个数达到上限！");
        } else if (-4 === iRet) {
          alert("图形ID已存在！");
        }
        WebVideoCtrl.I_SetSnapDrawMode(that.g_iWndIndex, 2);
      }
    },
    toXMLStr: function (oXmlDoc) {
      var szXmlDoc = "";

      try {
        var oSerializer = new XMLSerializer();
        szXmlDoc = oSerializer.serializeToString(oXmlDoc);
      } catch (e) {
        try {
          szXmlDoc = oXmlDoc.xml;
        } catch (e) {
          return "";
        }
      }
      if (szXmlDoc.indexOf("<?xml") == -1) {
        szXmlDoc = "<?xml version='1.0' encoding='utf-8'?>" + szXmlDoc;
      }

      return szXmlDoc;
    },

    clickDelSnapPolygon: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        if (!that.g_bEnableDraw) {
          return;
        }

        var szId = $("#snapId").val();

        var iIndex = that.getSnapPolygon(szId);
        if (iIndex != -1) {
          var oXML = that.getSnapPolygon();
          $(oXML).find("SnapPolygon").eq(iIndex).remove();

          var szInfo = that.toXMLStr(oXML);

          WebVideoCtrl.I_ClearSnapInfo(that.g_iWndIndex);
          WebVideoCtrl.I_SetSnapPolygonInfo(that.g_iWndIndex, szInfo);
          WebVideoCtrl.I_SetSnapDrawMode(that.g_iWndIndex, 3);
        } else {
          alert("图形ID不存在！");
        }
      }
    },

    clickEditSnapPolygon: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        if (!that.g_bEnableDraw) {
          return;
        }

        var iRet = WebVideoCtrl.I_SetSnapDrawMode(that.g_iWndIndex, 3);
        if (0 === iRet) {
          that.$Message.success("窗口" + that.g_iWndIndex + "编辑图形成功！");
        } else {
          that.$Message.error("窗口" + that.g_iWndIndex + "编辑图形失败！");
        }
      }
    },

    clickStopSnapPolygon: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        if (!that.g_bEnableDraw) {
          return;
        }

        var iRet = WebVideoCtrl.I_SetSnapDrawMode(that.g_iWndIndex, -1);
        if (0 === iRet) {
          that.$Message.success("窗口" + that.g_iWndIndex + "停止编辑成功！");
        } else {
          that.$Message.error("窗口" + that.g_iWndIndex + "停止编辑失败！");
        }
      }
    },

    clickGetSnapPolygon: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        if (!that.g_bEnableDraw) {
          return;
        }

        var xmlDoc = WebVideoCtrl.I_GetLocalCfg();
        var szDrawFormat = " 0";
        if (xmlDoc != null) {
          szDrawFormat = $(xmlDoc).find("CaptureFileFormat").eq(0).text();
        }
        var szChannelID = that.treeObj.channel,
          szPicName =
            oWndInfo.szDeviceIdentify +
            "_" +
            szChannelID +
            "_" +
            new Date().getTime();
        szPicName += "0" === szDrawFormat ? ".jpg" : ".bmp";
        var iRet = WebVideoCtrl.I_CapturePic(szPicName, {
          bDateDir: true, //是否生成日期文件
        });
        if (0 == iRet) {
          that.$Message.success("绘图保存 success");
        } else {
          that.$Message.error("绘图保存 error");
        }

        var szInfo = WebVideoCtrl.I_GetSnapPolygonInfo(that.g_iWndIndex);
        alert(szInfo);
      }
    },

    clickSetSnapPolygon: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        if (!that.g_bEnableDraw) {
          return;
        }

        WebVideoCtrl.I_ClearSnapInfo(that.g_iWndIndex);

        var szInfo = "<?xml version='1.0' encoding='utf-8'?>";
        szInfo += "<SnapPolygonList>";
        szInfo += "<SnapPolygon>";
        szInfo += "<id>1</id>";
        szInfo += "<polygonType>1</polygonType>";
        szInfo += "<tips>#1#设置1</tips>";
        szInfo += "<isClosed>true</isClosed>";
        szInfo += "<color><r>0</r><g>255</g><b>0</b></color>";
        szInfo += "<pointList>";
        szInfo += "<point><x>0.737903</x><y>0.229730</y></point>";
        szInfo += "<point><x>0.947581</x><y>0.804054</y></point>";
        szInfo += "<point><x>0.362903</x><y>0.777027</y></point>";
        szInfo += "</pointList>";
        szInfo += "</SnapPolygon>";
        szInfo += "<SnapPolygon>";
        szInfo += "<id>2</id>";
        szInfo += "<polygonType>1</polygonType>";
        szInfo += "<tips>#2#设置2</tips>";
        szInfo += "<isClosed>true</isClosed>";
        szInfo += "<color><r>0</r><g>255</g><b>0</b></color>";
        szInfo += "<pointList>";
        szInfo += "<point><x>0.451613</x><y>0.216216</y></point>";
        szInfo += "<point><x>0.447581</x><y>0.729730</y></point>";
        szInfo += "<point><x>0.116935</x><y>0.554054</y></point>";
        szInfo += "</pointList>";
        szInfo += "</SnapPolygon>";
        szInfo += "</SnapPolygonList>";

        var iRet = WebVideoCtrl.I_SetSnapPolygonInfo(that.g_iWndIndex, szInfo);
        if (0 === iRet) {
          that.$Message.success("窗口" + that.g_iWndIndex + "设置图形成功！");
        } else if (-1 === iRet) {
          that.$Message.error("窗口" + that.g_iWndIndex + "设置图形失败！");
        } else if (-2 === iRet) {
          alert("参数错误！");
        } else if (-3 === iRet) {
          alert("图形个数达到上限！");
        } else if (-4 === iRet) {
          alert("图形ID已存在！");
        }
      }
    },

    clickDelAllSnapPolygon: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        if (!that.g_bEnableDraw) {
          return;
        }

        var iRet = WebVideoCtrl.I_ClearSnapInfo(that.g_iWndIndex);
        if (0 === iRet) {
          that.$Message.success("窗口" + that.g_iWndIndex + "清空图形成功！");
        } else {
          that.showOPInfo("窗口" + that.g_iWndIndex + "清空图形失败！");
        }
      }
    },
    // 格式化时间
    dateFormat: function (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>
<style scoped>
.aniu {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /*width: 180px;*/
}

.aniu li {
  list-style: none;
}

.ivu-btn {
  width: 88px;
}
</style>
Ledison7
关注
海康威视web控件开发+vue结合做网页开发
web15185420056的博客
03-02 1633
需求:vue的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 准备:web开发包(包含插件以及demo,在海康官网即可下载32位64位的都有.那些需要积分下载的博主良心不疼么.) 点击这里下载:链接: https://pan.baidu.com/s/12FrbycWyWWyiRJH5Yd1tPA 提取码: gam5 开始开发: 1.安装demo目录下的WebComponentsKit.exe插件(根据自己的浏览器以及系统选择32位还是64位的插件) 2.打开demo.ht
vue项目中海康插件的使用
iSmilee的博客
06-17 5239
官方文档 ：https://open.hikvision.com/docs/3784e07072ee4f09a573d61f20782267 插件版本：视频WEB插件 V1.5.1（见附件）（另附H5视频播放器开发包 V1.0.0，可用于移动端开发） 针对于web端的调用方法： 直接调用海康插件，需传参数 cameraIndexCode（监控点编号）。 调用海康接口，需传参数 url（监控点预览取流），需注意传输协议（rtsp，hls等）及延时情况。 以下为第一种方法（通过监控点编号cameraIn
vue对接海康播放器插件组件
09-07
vue对接海康播放器插件组件
【海康威视web无插件使用Vue二次开发】NVR预览失败问题
weixin_44002937的博客
09-04 1501
公司有需求要把海康威视的web预览集成到项目中去，于是结合demo和网上的资料搞了一版出来，结果过了几天测试告诉我预览NVR的监控会失败……随后就开始找原因。
Vue3 中集成海康 H5 监控视频播放功能
最新发布
唯见青山不见君
09-24 1748
本文旨在详细介绍如何在 Vue 3 应用中集成海康 H5 监控视频播放功能，实现视频的实时播放、分屏显示以及全屏切换等功能。
关于JAVA如何对接海康威视（iSecure Center综合安防管理平台）门禁和摄像头视频取流
ZhShH0413的博客
04-25 8146
根据自己的需求灵活选用对接方式。我们客户购买了海康的综合安防管理平台，经与海康交流过后，我这里选择直接通过调用海康的综合安防管理平台的Open Api进行对接 这篇文章只包含java如何对接海康威视，不涉及前端具体技术 需求：对接海康威视的视频与门禁。（1）大屏可视化，实现视频的取流，摄像头监控实时预览。（2）获取摄像头监控点与门禁设备的状态，是否运行正常（3）获取门禁设备的事件，用户进出情况记录。 大致对接流程：注册登录后，在场景方案中选择基础对接，先了解接口安全认证规则，确保必要参数客户/海康已经提供，
vue项目对接海康威视监控视频
m0_56561432的博客
03-03 552
vue项目对接海康威视监控视频
海康监控视频对接
chengchong_cc的博客
03-17 1258
海康对接
VUE3对接海康威视监控接口，实现实时查看监控。
cc_66666的博客
06-14 3225
vue3对接海康监控，实现实时查看监控功能。
Vue 对接海康威视，实现摄像头画面展示
虎康的博客
07-19 1006
（2）在项目中public文件下创建一个文件夹放视频插件js。项目中集成海康威视，实现摄像头画面展示。（1）下载完成后打开。
vue+js+海康web开发包接入海康威视摄像头
03-10
vue+js+海康web开发包接入海康威视摄像头主要接口封装： 1、初始化插件 2、调整大小 3、登录 4、登出 5、获取设备基本信息 6、获取模拟通道 7、解析模拟通道XML内容 8、获取数字通道 9、解析数字通道XML内容 10、获取零通道 11、解析零通道XML内容 12、录像搜索 13、开始预览 14、开始回放 15、停止播放 16、暂停 17、打开声音 18、关闭声音 19、设置音量 20、修改画面分割类型 21、全屏播放
web3.0 development kit 海康威视32bit + 64bit最新开发包
03-16
总的来说，海康威视Web3.0 Development Kit是开发者进入海康威视设备智能化开发的重要入口，它结合了Web3.0的先进理念和技术，为开发者提供了一套完整的工具链，使得与海康威视设备的集成变得更加简单和高效。
vue海康视频WEB插件
01-20
Vue海康视频WEB插件是专为Vue.js框架设计的一款集成海康视频监控功能的插件，它使得在Web应用中接入和管理海康摄像头的视频流变得更加便捷。这款插件通常适用于那些需要实时监控、录像回放或者进行安防管理的项目。...
前后端 java 对接海康威视监控-hls实现h5播放
大家好，我是云村的王子
06-08 6114
海康的获取监控预览流的接口当中支持 rtsp、rtmp、hls等协议。这篇文章主要是说hls协议的。
VUE+海康摄像头WebSDK_V3.3.0对接
Sky_xinkong的博客
04-16 4126
在本篇文章中，我们将详细探讨如何使用WebSDK_V3.3.0技术接入海康摄像头。同时，我们也将分享在实际应用中遇到的问题及解决方案，希望能够对广大开发者和技术爱好者有所帮助。
vue项目接入海康威视H5player.js
我只是个很菜的前端
02-15 4659
vue项目接入海康威视H5player.js
vue对接海康安防平台接口，以及处理接口认证规则流程
m0_67790636的博客
01-10 2071
vue对接海康安防平台接口，以及处理接口认证规则流程
海康威视web 对接插件及资料
03-28
这个压缩包文件，名为"海康威视web3.0开发包（支持云台）"，显然是为了帮助用户实现通过网页浏览器对海康威视设备的远程管理和控制，尤其是支持云台摄像头的旋转操作。 首先，我们要理解“web对接”在安防领域的...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值