可视化大屏中用vue实现海康威视AR鹰眼画面（物联网项目—涉及硬件设备的连接）

最新推荐文章于 2024-04-29 17:42:52 发布
最新推荐文章于 2024-04-29 17:42:52 发布
阅读量3.0k 收藏 6
点赞数
文章标签： 物联网 vue.js html5 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69627271/article/details/128801643
版权

具体效果可参照海康公众号的演示视频https://mp.weixin.qq.com/s/K7C8BJGgwq3E1woXK7F6SQ

项目效果图：

能够在项目中播放鹰眼视频，其实前端的代码很少。

因为海康威视的AR鹰眼视频已经做成了一个集成控件，也就是一套完整的系统，相当于AR画面里面的东西都不需要重新写，只需要在自己的项目中调用AR控件的开关即可。

前提是需要获取已有的海康鹰眼设备的ip，端口号，账号和密码（需要海康公司提供），并且需要拉网络专线到视频监控室，当海康威视的运维安装好系统后接好网后，前端获取到海康的arIndexCode就可以看到鹰眼视频了。

重点是选取项目需要的部分，加入到自己的项目中就可以了；

html文件demo(har.min.js文件需要海康提供)

<!DOCTYPE html>
<htmllang="en">
  <head>
    <metacharset="UTF-8"/>
    <metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
    <metaname="viewport"content="width=device-width, initial-scale=1.0"/>
    <title>ARWebControl</title>
    <linkhref="./index.css"rel="stylesheet">
  </head>
  <body>
    <divclass="wrapper">
      <divclass="dash-board">
        <divclass="board-item">
          <p>控件消息订阅（启动前订阅）</p>
          <divclass="board-content">
            <form>
              <label>消息回调</label
              ><textareaid="callbackMessage"rows="7"readonly></textarea>
            </form>
            <divclass="form-buttons">
              <buttononclick="registerEvent('ar_connect_timeout')">
                监听控件连接超时
              </button>
              <buttononclick="registerEvent('ar_custom_message')">
                监听自定义消息
              </button>
              <buttononclick="registerEvent('ar_scene_change')">
                监听高点场景变更
              </button>
              <buttononclick="registerEvent('ar_keydown')">
                监听AR控件按键
              </button>
              <buttononclick="registerEvent('ar_closed')">
                监听AR控件关闭
              </button>
            </div>
          </div>
        </div>
        <divclass="board-item">
          <p>控件初始化/启动</p>
          <divclass="board-content">
            <form>
              <label>平台IP</label><inputid="ip"value="10.19.185.97"/><label>平台端口</label
              ><inputid="port"value="443"/><label>登录方式</label
              ><selectid="loginType"value="0">
                <optionvalue="0">明文登录</option>
                <optionvalue="1">密文登录</option>
              </select>
              <label>用户名</label><inputid="userName"value="admin"/>
              <label>登录凭据</label><inputid="credential"value="Hik12345"/>
              <label>网域Id</label><inputid="domainId"value="0"/>
              <label>AR高点编号</label><inputid="arIndexCode"/>
              <label>控件WS端口</label><inputid="wsPort"value="8888"/>
              <label>静默运行</label><inputid="background"type="checkbox"/>
            </form>
            <divclass="form-buttons">
              <buttononclick="setupAR()">启动</button>
              <buttononclick="frontRun()">取消静默运行</button>
              <buttononclick="backRun()">静默运行</button>
            </div>
          </div>
        </div>
        <divclass="board-item">
          <p>控件显示隐藏与关闭</p>
          <divclass="board-content">
            <buttonclass="show-buttons"onclick="showAR()">显示控件</button>
            <buttonclass="show-buttons"onclick="hideAR()">隐藏控件</button>
            <buttonclass="show-buttons"onclick="closeAR()">关闭控件</button>
          </div>
        </div>
        <divclass="board-item">
          <p>切换AR场景</p>
          <divclass="board-content">
            <form><label>AR高点编号</label><inputid="indexCodeChange"/></form>
            <divclass="form-buttons">
              <buttononclick="changeARScene()">切换</button>
            </div>
          </div>
        </div>
        <divclass="board-item">
          <p>隐藏控件</p>
          <divclass="board-content">
            <form>
              <label>内部控件</label
              ><selectid="hideControl"value="1">
                <optionvalue="1">组织树</option>
                <optionvalue="2">地图</option>
                <optionvalue="3">底部按钮</option>
                <optionvalue="4">关闭/最小化按钮</option>
                <optionvalue="5">搜索框</option>
                <optionvalue="6">报警</option>
                <optionvalue="7">工具箱</option>
              </select>
            </form>
            <divclass="form-buttons">
              <buttononclick="hideARControl()">隐藏</button>
            </div>
          </div>
        </div>
        <divclass="board-item">
          <p>发送自定义消息</p>
          <divclass="board-content">
            <form>
              <label>自定义消息</label
              ><textareaid="customMessage"rows="4"></textarea>
            </form>
            <divclass="form-buttons">
              <buttononclick="sendCustomMessage()">发送</button>
            </div>
          </div>
        </div>
        <divclass="board-item">
          <p>设置视频预览窗口</p>
          <divclass="board-content">
            <form>
              <label>窗口显示状态</label>
              <selectid="windowShowStatus"value="0">
                <optionvalue="0">显示</option>
                <optionvalue="1">隐藏</option>
                <optionvalue="2">关闭</option>
              </select>
              <label>监控点编号</label>
              <inputid="windowCameraIndexCode"/>
              <label>窗口标题</label>
              <inputid="windowTitle"/>
              <label>窗口X坐标</label>
              <inputid="windowX"value="0"/>
              <label>窗口Y坐标</label>
              <inputid="windowY"value="0"/>
            </form>
            <divclass="form-buttons">
              <buttononclick="setWindowStatus()">设置</button>
            </div>
          </div>
        </div>
        <divclass="board-item">
          <p>批量设置视频预览窗口位置</p>
          <divclass="board-content">
            <form>
              <label>已打开窗口</label
              ><select
                id="selectedVideo"
                value="请选择监控点"
                onchange="onSelectedItem(this.options[this.options.selectedIndex].value)"
              >
                <optionvalue="-1">请选择监控点</option>
              </select>
              <label>监控点编号</label><inputid="openedVideoIndex"/>
              <label>监控点名称</label><inputid="openedVideoName"/>
              <label>窗口X</label><inputid="openedVideoX"value="0"/>
              <label>窗口Y</label><inputid="openedVideoY"value="0"/>
            </form>
            <divclass="form-buttons">
              <buttononclick="batchMove()">批量移动</button>
            </div>
          </div>
        </div>
      </div>
      <divid="ar-div"></div>
    </div>
    <scripttype="text/javascript">
      this.showedVideoInfo= [];
      /**
       * 注册AR控件事件
       */
      functionregisterEvent(eventName) {
        window.control=har.ARWebControl.getInstance();
        consttextareaDom=document.getElementById("callbackMessage");
        control.on(eventName, (msg) => {
          switch (eventName) {
            case"ar_connect_timeout":
              textareaDom.value+=getMessage(
                "AR控件连接超时，请检查：1.是否安装AR客户端；2.登录信息是否正确；3.WS端口是否被占用；4.查看客户端日志确定原因。"
              );
              break;
            case"ar_custom_message":
              textareaDom.value+=getMessage(
                `接收来自AR传递的自定义消息：\n${msg}`
              );
              break;
            case"ar_scene_change":
              textareaDom.value+=getMessage(
                `AR高点场景变更：\n高点内部编号：${msg.sceneIndex}\n高点编号:${msg.sceneCode}\n高点名称：${msg.sceneName}`
              );
              break;
            case"ar_keydown":
              textareaDom.value+=getMessage(`AR内按键触发：${msg}`);
              break;
            case"ar_closed":
              textareaDom.value+=getMessage("AR控件关闭");
          }
        });
      }
      functiongetMessage(msg) {
        return`====================================\n${msg}\n====================================\n`;
      }
      /**
       *  启动AR
       */
      functionsetupAR() {
        window.control=har.ARWebControl.getInstance();
        consttextareaDom=document.getElementById("callbackMessage");
        control
          .setup({
            domId: "ar-div",
            loginType: +getInput("loginType"),
            ip: getInput("ip"),
            port: getInput("port"),
            userName: getInput("userName"),
            credentials: getInput("credential"),
            domainId: getInput("domainId"),
            arIndexCode: getInput("arIndexCode"),
            websocketPort: getInput("wsPort"),
            visible: !getInput("background"),
            processName:"chrome"
          })
          .then(() => {
            textareaDom.value+=getMessage("AR控件启动成功");
          })
          .catch((err) => {
            console.error(err.msg);
            textareaDom.value+=getMessage("AR控件启动失败");
          });
      }
      /**
       * 取消AR静默展示状态
       */
      functionfrontRun() {
        window.control?.setARShowMode(false);
      }
      /**
       * AR静默显示
       */
      functionbackRun() {
        window.control?.setARShowMode(true);
      }
      functiongetInput(id) {
        returndocument.getElementById(id).type==="checkbox"
          ?document.getElementById(id).checked
          : document.getElementById(id).value;
      }
      /**
       * 显示AR
       */
      functionshowAR() {
        letarDom=document.getElementById("ar-div");
        arDom.style="display:block;";
      }
      /**
       * 隐藏AR
       */
      functionhideAR() {
        letarDom=document.getElementById("ar-div");
        arDom.style="display:none;";
      }
      /**
       * 关闭AR
       */
      functioncloseAR() {
        window.control
          ?.close()
          .then(() => {
            consttextareaDom=document.getElementById("callbackMessage");
            textareaDom.value+=getMessage("JS关闭AR控件成功");
          })
          .catch((err) => {
            console.error(err.msg);
          });
      }
      /**
       * 切换AR高点场景
       */
      functionchangeARScene() {
        window.control?.changeARScene(getInput("indexCodeChange")).then(
          (ret) => {
            console.log("成功发送切换高点场景命令");
          },
          (err) => {
            console.error(err.msg);
          }
        );
      }
      /**
       * 隐藏AR内部的控件
       */
      functionhideARControl() {
        window.control
          ?.setControlsVisibility([getInput("hideControl")])
          .catch((err) => {
            console.error(err.msg);
          });
      }
      /**
       * 发送自定义消息
       */
      functionsendCustomMessage() {
        window.control
          ?.sendBusinessInfo(getInput("customMessage"))
          .catch((err) => {
            console.error(err.msg);
          });
      }
      /**
       * 设置视频预览窗口状态
       */
      functionsetWindowStatus() {
        conststatus=getInput("windowShowStatus");
        constname=getInput("windowTitle");
        constindexCode=getInput("windowCameraIndexCode");
        constleft=getInput("windowX");
        consttop=getInput("windowY");
        window.control
          ?.setVideoWindow(status, { indexCode, name, left: +left, top: +top })
          .catch((err) => {
            console.error(err.msg);
          });
        letinfo=this.showedVideoInfo.find((x) =>x.code==indexCode);
        if (info) {
          info.title=name;
          info.x=left;
          info.y=top;
          if (status===har.ARWindowStatus.CLOSE) {
            letindex=this.showedVideoInfo.indexOf(info);
            if (index>-1) {
              this.showedVideoInfo.splice(index, 1);
            }
          }
        } else {
          if (status===har.ARWindowStatus.VISIBLE) {
            this.showedVideoInfo.push({
              title: name,
              code: indexCode,
              x: left,
              y: top,
            });
          }
        }
        updateVideoList();
      }
      /**
       * 批量设置视频窗口位置
       */
      functionbatchMove() {
        letselect=document.getElementById("selectedVideo");
        this.onSelectedItem(select.options[select.options.selectedIndex]);
        letwindowList=this.showedVideoInfo.map((item) => {
          return {
            left: +item.x,
            top: +item.y,
            indexCode: item.code,
            name: item.title,
          };
        });
        window.control?.setVideoWindowList(windowList).catch((err) => {
          console.error(err.msg);
        });
      }
      /**
       * 选择一个已打开的窗口
       */
      functiononSelectedItem(v) {
        if (parseInt(v) ===-1) {
          this.lastSelectInfo=null;
          document.getElementById("openedVideoIndex").value="";
          document.getElementById("openedVideoName").value="";
          document.getElementById("openedVideoX").value=0;
          document.getElementById("openedVideoY").value=0;
          return;
        }
        if (this.lastSelectInfo) {
          this.lastSelectInfo.x=parseInt(
            document.getElementById("openedVideoX").value
          );
          this.lastSelectInfo.y=parseInt(
            document.getElementById("openedVideoY").value
          );
        }
        letinfo=this.showedVideoInfo.find((x) =>x.code==v);
        if (info) {
          document.getElementById("openedVideoIndex").value=info.code;
          document.getElementById("openedVideoName").value=info.title;
          document.getElementById("openedVideoX").value=info.x;
          document.getElementById("openedVideoY").value=info.y;
        }
        this.lastSelectInfo=info;
      }
      /**
       * 记录已打开的视频窗口信息
       */
      functionupdateVideoList() {
        letselect=document.getElementById("selectedVideo");
        select.options.length=1;
        if (this.showedVideoInfo.length==0) {
          this.onSelectedItem("-1");
        }
        this.showedVideoInfo.forEach((item) => {
          select.options.add(newOption(item.title, item.code));
        });
      }
    </script>
    <scriptsrc="./har.min.js"></script>
  </body>
</html>
​

vue代码：

  1. 放置跳转鹰眼画面的盒子

<div id="ar-div"></div>

2.将海康ARweb控件的har.min.js文件放到项目中，在页面中引入；

import har from "../home/components/AR/har.min";

3.只需要加入开启控件的API即可直接进入到海康的鹰眼系统；

setupAR() {
  if (this.siteId == "23") {
  const control = har.ARWebControl.getInstance();
  control
    .setup({
      domId: "ar-div",//鹰眼画面的盒子
      loginType: 0,
      ip: "10.19.185.97",//AR鹰眼平台IP(海康提供的)
      port: "443",//AR鹰眼平台端口(海康提供的)
      userName: "admin",//平台用户名(海康提供的)
      credentials: "Hik12345",//平台密码(海康提供的)
      domainId: "0",//网域id
      arIndexCode: "gh001",//AR高点编号就是用于播放鹰眼视频的id(拉好鹰眼专线后才能确定)
      websocketPort: "8888",//控件WS端口
      visible: true,//控制鹰眼窗口是否可见
      processName: "chrome",//默认浏览器
    })
    .then(() => {
      this.isShow = true;
      // alert("控件启动成功")
    })
    .catch((err) => {
      console.error(err.msg);
      // alert("AR控件启动失败");
    });
}else {
        this.$message.warning("该工地暂无全景设备");
      }

4.点击坐标（site）后进入鹰眼

 const ARBtn = document.querySelector("#ar");
 ARBtn.onclick = this.setupAR;
Starry978
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue+Echarts监控大屏实例三：交通视频监控模板实例，监控大屏、模板
04-04
Vue+Echarts监控大屏实例三：交通视频监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并展示对于报表，对菜单布局进行整理，添加了全屏切换及退出等相关功能。 使用HBuilderX开发，提供开发过程视频、相关文档、源码素材等。
智慧水利水务数字孪生应用，典型业务场景分享
digihail2016的博客
11-03 1174
《“十四五”智慧水利建设规划》中提出，以数字化、网络化、智能化为主线，以数字化场景、智慧化模拟、精准化决策为路径，以算据、算法、算力建设为支撑，以构建数字孪生流域为核心，全面推进算据、算法、算力建设，加快构建具有预报、预警、预演、预案（以下简称“四预”）功能的智慧水利体系，为新阶段水利高质量发展提供有力支撑和强力驱动。建设数字孪生流域是水利部一项重大的决策部署，全国各地积极推进数字孪生流域、智慧水利建设，数字冰雹深耕数字孪生技术十余年，智慧水利数字孪生解决方案已成功落地应用于流域监管、水利枢纽、水务、水厂监
vue2.0接入海康威视控件包V3.3.0——海康威视摄像头接入前端页面(webSDK包)模式——全自动模式
m0_63541756的博客
03-22 386
关于海康sdk接入前端如何实现自动登录预览
鹰眼应急实时三维建模解决方案
Daspatial_的博客
02-18 1067
实时构建应急现场第一张图
Echarts+Vue3.0 大数据可视化项目，大数据可视化大屏系统源码
02-27
Echarts+Vue3.0 大数据可视化项目源码及教程 柱状图基本设置, 柱状图效果实现, 柱状图效果实现2--XAxis，yAxis, 饼状图基本设置, 饼状图效果实现, 折线图基本设置, 折线图效果实现, 折线图堆叠效果, 散点图基本效果设置, 散点图效果实现, K线图, k线图效果优化, 雷达图, 雷达图效果优化, 漏斗图基本设置, 漏斗图效果实现, 仪表盘, 关系图, 全国地图
1.鹰眼的实现
GIS坚持不懈
03-13 4558
所谓的鹰眼，就是一个缩略地图，上面有一个矩形框，矩形框区域就是当前显示的地图区域，拖动矩形框可以改变当前地图显示的位置，改变矩形框的大小，可以改变当前地图的显示区域大小，从起到导航的作用。鹰眼是地图浏览中常用的功能之一。 关于鹰眼的实现方式，最常用的是用一个MapControl控件显示地图全图，并在上面画一个红色矩形框表示当前地图的显示范围，并实现鹰眼MapControl与主窗体的MapCo
vue中实现海康实时监控代码详情（最全）
T031017的博客
06-08 2253
第一步：需要先下载 海康 的运行包，并在HTML中引入：第二步：在相应的页面中开始编写，具体代码如下： JS部分 css样式部分如下 这里需要下载海康的插件才可以查看
vue3实现海康威视根据海康插件进行监控实时预览和回放功能
我是小刘丶
04-23 8545
因为我的文章已经写过基于vue实现海康web插件进行视频播放开箱即用文章，这个文章是利用进行编写的，大致内容跟vue2一样，拿过去能直接用。至于我为什么要用js而不用ts，因为海康提供的三个脚本为js语言的，ts尝试过一次，我道行太浅，没搞明白。如果需要vue2的开发，接下来进入正题。
Web端 嵌入海康视频监控组件
ColdCoder的博客
05-23 2601
Web端 嵌入海康视频监控组件 最近今天在做一个监控系统，需要嵌入海康的SDK。之前做这块的人已经走了，无奈只能从头开始。然而，去下载了海康的SDK使用文档，真的是想死的心都有了，看一遍完全没啥感觉。问了一下度娘，看到很多骗阅读量的无用分享，于是决定记录分享一下自己的成功调用。 第一步：与其他分享一样，先把海康的三个js文件引入到根html文件，楼主做的是VUE项目，所以放在了public文件夹下的index.html中。 <script src="jquery-1.12.4.min.js">&
vue+js+海康web开发包接入海康威视摄像头
热门推荐
weixin_46653941的博客
03-10 1万+
vue+js+海康web开发包接入海康威视摄像头
androidの高仿支付宝扫描动画效果
02-03
androidの高仿支付宝扫描动画效果，简单的动画效果，方便你的学习
Vue3/ECharts5数据可视化大屏展示项目案例源码.zip
05-22
Vue3/ECharts5数据可视化（大屏展示）项目案例源码，一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）项目。此项目使用'.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，全局...
基于Vue2的响应式大屏数据可视化项目源码.zip
08-10
基于Vue2的响应式大屏数据可视化项目源码.zip 基于Vue2的响应式大屏数据可视化项目源码.zip 基于Vue2的响应式大屏数据可视化项目源码.zip 1、该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心...
基于VUE.js的前端拖拽数据可视化大屏DataV源码实现
03-25
项目概述：本项目采用Java为主要开发语言，整合了JavaScript、CSS、HTML等技术，实现了基于VUE.js的前端拖拽式数据可视化大屏DataV源码。整个项目包含564个文件，其中JavaScript文件433个，图片资源102个，样式文件...
基于Vue3.0的“数据可视化大屏”设计与编辑器源码.zip
06-17
基于Vue3.0的“数据可视化大屏”设计与编辑器源码 使用方法： 1. 下载该项目到本地， 2. 安装依赖 // yarn run install npm run install 3. 运行预览 // yarn run build npm run build 本项目为个人项目, 主要使用 ...
商超物联网方案-人员和资产管理配置指南~配置人员和资产管理示例
专研计算机网络，数据通信，网络安全，系统集成
04-29 1455
组网图形配置人员和资产管理示例组网图。
IOT病毒分析
最新发布
GalaxySpaceX的博客
04-29 771
IOT病毒分析
免费的单片机物联网MQTT平台选择
迷彩狼的博客
04-26 1024
免费的单片机物联网MQTT平台选择
vue2 实现的可视化大屏项目(附源码)
09-06
Vue2是一种流行的JavaScript框架，用于构建用户界面。借助其响应式数据绑定和组件化思想，我们可以轻松地实现可视化大屏项目。以下是一个简单的示例，展示如何使用Vue2来构建一个基本的可视化大屏项目。 首先，我们需要创建一个Vue实例，并将其挂载在一个DOM元素上： ``` <div id="app"></div> ``` 接下来，在JavaScript文件中，我们导入Vue2和其他必要的组件： ``` import Vue from 'vue'; // 导入需要使用的组件 import Chart from './components/Chart.vue'; import Map from './components/Map.vue'; // ... ``` 然后，我们可以定义并注册自己的组件。例如，我们可以创建一个名为Chart的组件，用于展示图表数据： ``` <template> <div class="chart"> <!-- 在这里定义图表的展示方式 --> </div> </template> <script> export default { // 在这里定义组件的逻辑和数据 } </script> <style scoped> /* 在这里定义组件的样式 */ </style> ``` 将自己的组件注册到Vue实例中： ``` Vue.component('chart', Chart); Vue.component('map', Map); // ... ``` 最后，在Vue实例的选项中，指定要渲染的模板和数据： ``` new Vue({ el: '#app', data: { // 在这里定义需要用到的数据 }, template: ` <div class="dashboard"> <chart></chart> <map></map> <!-- ... --> </div> ` }); ``` 通过这个例子，我们可以看到Vue2可以很容易地实现可视化大屏项目。我们可以通过在Vue实例中注册和使用自己的组件，来构建出丰富多样的可视化展示效果。当然，在实际开发中，我们可以根据具体需求来进一步扩展和优化代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值