vue对接海康摄像头，配合ifarme进行展示。给ifarme点击事件（消除ifarme事件，因为ifarme没有点击事件）

news2024/12/28 3:21:15

1、在public文件夹下建一个文件ifarme.index，和index.html同级。

<!doctype html>
<html>

<head>
  <title></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 type="text/css">
  html,
  body {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .plugin {
    width: 450px;
    height: 240px;
  }
</style>

<body>
  <div id="divPlugin" class="plugin"></div>
</body>
<script type="text/javascript" src="static/hik_video/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="static/hik_video/jsPlugin-1.2.0.min.js"></script>
<script type="text/javascript" src="static/hik_video/AES.js"></script>
<script type="text/javascript" src="static/hik_video/cryptico.min.js"></script>
<script type="text/javascript" src="static/hik_video/crypto-3.1.2.min.js"></script>
<script id="videonode" type="text/javascript" src="static/hik_video/webVideoCtrl.js"></script>
<!-- 
<script src="./static/hkVideoPlayer/jquery-1.7.1.min.js"></script>
<script src="./static/hkVideoPlayer/jsVideoPlugin-1.0.0.min.js"></script>
<script id="videonode" src="./static/hkVideoPlayer/webVideoCtrl.js"></script> -->
<script>
  // 向父vue页面发送信息
  console.log(window, 'window');
  window.parent.postMessage({
    cmd: 'run',
    params: {
      success: true
    }
  }, '*');
  // 接受父页面发来的信息
  window.addEventListener("message", function (event) {
    console.log(event, 'event');
    var data = event.data;
    switch (data.cmd) {
      case 'getFormJson':
        // 处理业务逻辑
        companyVideoData = data.params;
        cameraName = data.name;
        videoInitPlugin()
        break;
    }
  });
  var companyVideoData = {};
  var cameraName = '';
  // 接受父页面发来的信息
  function videoInitPlugin() {
    var iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (iRet === -1) {
      alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
      return;
    }
    initPlugin();
  }
  //插件初始化
  // iWndowType，目前只支持1、4、9、16四种画面分割模式），每一个子窗口对应一个窗口序号；
  // I_Login登录接口代码直接传入设备IP、端口、用户密码，这样可以不需要用户手动输入；I_StartRealPlay预览接口直接传入窗口号、通道号。
  function initPlugin() {
    var that = this;
    WebVideoCtrl.I_InitPlugin(500, 300, {
      szContainerID: 'divPlugin',
      iPackageType: 2,
      szColorProperty: "plugin-background:ffffff; sub-background:ffffff; sub-border:ffffff; sub-border-select:ffffff",
      szColorProperty: 'sub-border: 00ffff',
      bNoPlugin: true,
      bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
      iWndowType: 1, // 窗口数量n*n
      // bDebugMode: true,
      cbSelWnd: function (xmlDoc) {
      },
    });
    // WebVideoCtrl.I_StartRealPlay(companyVideoData.IP, {
    //   iWndIndex: 1,   // iWndIndex窗口序号从0开始（比如4画面分割，从左往右、从上往下，窗口序号分别为0、1、2、3），没有该字段表示当前选中窗口（需要手动选择窗口）。
    //   iStreamType: 1, // 码流类型 1-主码流，2-子码流，默认使用主码流预览
    //   iChannelID: 2,  // 播放通道号，默认通道 1
    //   bZeroChannel: false,  // 是否播放零通道，默认为 false
    //   // iPort: RTSP 端口号，可以选择传入，如果不传，开发包会自动判断设备的RTSP端口
    //   success: function () {
    //     console.log("开始预览成功！success", companyVideoData.IP);
    //   },
    // });
    // 绑定的dom名称
    WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin');
    clickLogin(companyVideoData);
  }
  function clickLogin(data) {
    var szDeviceIdentify = data.IP + "_" + data.Port;
    console.log('data', data);
    var that = this;
    WebVideoCtrl.I_Login(data.IP, 1, data.Port, data.Username, data.Password, {
      timeout: 3000,
      success: function (xmlDoc) {
        console.log(szDeviceIdentify + " 登录成功！");
        // $("#ip").prepend("<option value='" + szDeviceIdentify + "'>" + szDeviceIdentify + "</option>");
        setTimeout(function () {
          $("#ip").val(szDeviceIdentify);
          setTimeout(function () {
            that.getChannelInfo();
          }, 1000);
          that.getDevicePort();
        }, 10);
      },
      error: function (oError) {
        if (2001 === status) {
          console.log(szDeviceIdentify + " 已登录过！");
        } else {
          console.log(szDeviceIdentify + " 登录失败！", oError.errorCode, oError.errorMsg);
        }
      }
    });
    // WebVideoCtrl.I_Login(
    //   data.IP,
    //   1,
    //   data.Port,
    //   data.Username,
    //   data.Password,
    //   {
    //     success: function (xmlDoc) {
    //       console.log("开始预览", that.cName); //不能删除
    //       that.getChannelInfo();
    //     },
    //     error: function (status, xmlDoc) {
    //       console.log("login error", status, xmlDoc);
    //     },
    //   }
    // );
  }
  function getDevicePort() {
    var szDeviceIdentify = companyVideoData.IP + "_" + companyVideoData.Port;

    if (null == szDeviceIdentify) {
        return;
    }

    WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
        $("#deviceport").val(oPort.iDevicePort);
        $("#rtspport").val(oPort.iRtspPort);

        showOPInfo(szDeviceIdentify + " 获取端口成功！");
    }, (oError) => {
        var szInfo = "获取端口失败！";
        console.log(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
    });
}
  //获取通道
  function getChannelInfo() {
    var that = this;
    // this.szIP = companyVideoData.IP
    // 模拟通道
    WebVideoCtrl.I_GetAnalogChannelInfo(that.companyVideoData.IP, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find("VideoInputChannel");
        $.each(oChannels, function (i) {
          var id = $(that).find("id").eq(0).text(),
            name = $(that).find("name").eq(0).text();
          if ("" == name) {
            name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
          }
          // oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
        });
        // nAnalogChannel = oChannels.length;
        that.initPlay();
        // 如果是红外就需要重新获取通道
        // if (that.cameraName == 'hongwai') that.initPlayred();
        console.log("获取模拟通道成功！", that.cName)
      },
      error: function () {
        console.log("获取模拟通道失败！" + WebVideoCtrl.I_GetLastError())
      },
    });
    // 数字通道
    WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.IP, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
        that.initPlay();
        // that.$emit("func", oChannels); //获取数字通道传给父组件
        console.log("获取数字通道成功！")
      },
      error: function () {
        WebVideoCtrl.I_GetLastError();
        console.log("获取数字通道失败！" + WebVideoCtrl.I_GetLastError())
      },
    });
    // 零通道
    WebVideoCtrl.I_GetZeroChannelInfo(that.companyVideoData.IP, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find("ZeroVideoChannel");
        console.log("获取零通道成功！")
      },
      error: function () {
        console.log("获取零通道失败！" + WebVideoCtrl.I_GetLastError())
      },
    });
  }
  //初始化视频，为了让用户进来就可以看到视频播放
  function initPlay() {
    let szIP = companyVideoData.IP; //ip地址  
    var iStreamType = 1;
    // 目前只需要显示一个通道
    var iChannelID = parseInt(1, 10);
    WebVideoCtrl.I_StartRealPlay(szIP, {
      iStreamType: iStreamType,
      iChannelID: 1,
      iWndIndex: 0,
    });
    // WebVideoCtrl.I_ChangeWndNum(1); //分屏
  };
  // 红外还需要重新在调用一次，窗口号可以改
  /**
   * iWndIndex 窗口序号从0开始（比如4画面分割，从左往右、从上往下，窗口序号分别为0、1、2、3），没有该字段表示当前选中窗口（需要手动选择窗口）。
   * iStreamType 码流类型 1-主码流，2-子码流，默认使用主码流预览
   * iChannelID 播放通道号，默认通道 1
   * bZeroChannel 是否播放零通道，默认为 false
   * iPort: RTSP 端口号，可以选择传入，如果不传，开发包会自动判断设备的RTSP端口
  */
  function initPlayred() {
    let szIP = companyVideoData.IP; //ip地址
    var iStreamType = 1;
    // 目前只需要显示一个通道
    var iChannelID = parseInt(1, 10);
    WebVideoCtrl.I_StartRealPlay(szIP, {
      iStreamType: iStreamType,
      iChannelID: 2,
      iWndIndex: 1,
    });
    WebVideoCtrl.I_ChangeWndNum(2); //分屏
  }
  // 点击查看具体哪个监控
  function startRealPlay(oChannels) {
    let that = this;
    let szIP = companyVideoData.IP; //ip地址
    let iChannelID = oChannels; //播放通道号
    var iStreamType = 1;
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);
    if (oWndInfo != null) {
      // 已经在播放了，先停止
      WebVideoCtrl.I_Stop();
    }
    WebVideoCtrl.I_StartRealPlay(szIP, {
      iStreamType: iStreamType,
      iChannelID: iChannelID,
    });
  }
</script>
</html>

在这里插入图片描述

2、写组件，我是建在了components文件夹下边。

<template>
  <div class="video-player">
    <iframe ref="iframe" class="divPlugin" :src="iframeSrc" frameborder="0" scrolling="no"></iframe>
  </div>
</template>
<script>
export default {
  props: {
    //从父组件传来的数据，IP、用户名、密码、端口号
    companyVideoData: {
      type: Object,
    },
    //分屏数量
    videoType: Number,
    // 相机名称
    cName: String
  },
  data() {
    return {
      // 分割线
      iframeWin: {},
      iframeSrc: 'iframe.html'
    };
  },
  created() { },
  mounted() {
    // this.videoInitPlugin();
    window.addEventListener('message', this.handleMessage)
    this.iframeWin = this.$refs.iframe.contentWindow;
  },
  methods: {
    async handleMessage(event) {
      const data = event.data
      switch (data.cmd) {
        case 'run':
          if (data.params.success) {
            // 调用报名方法
            await this.sendMessage()
          } else {
            console.log('视频启动失败')
          }
          break
      }
    },
    sendMessage() {
      // 外部vue向iframe内部传数据
      this.iframeWin.postMessage({
        cmd: 'getFormJson',
        name: this.cName,
        params: {
          ...this.companyVideoData
        }
      }, '*');
    }
  }
};
</script>
<style  scoped>
.video-player {
  width: 450px;
  height: 300px;
}

.divPlugin {
  width: 450px;
  height: 240px;
  color: red;
  /* display: flex; */
  background: gray;
  /* border: 1px solid black; */
  justify-content: center;
  align-items: center;
  font-size: 18px;
  // 消除点击事件
  pointer-events: none;
}
</style>

在这里插入图片描述
3、组件引入。
在这里插入图片描述
在这里插入图片描述
用的参数。

data() {
return {
       vcamera: {
           IP: "",  // 摄像头的ip
           Port: ,  // 摄像头的端口号  数字类型
           Username: "",   // 登录用户名
           Password: "",    // 登录密码
       },
       icamera: {
           IP: "", // 摄像头的ip
           Port: , // 摄像头的端口号  数字类型
           Username: "", // 登录用户名
           Password: "" // 登录密码
       },
}
}

这样的话不知道是不是我的问题，这样的话会导致摄像头不能移动，所以我们这边的话是后端给提供接口，然后前端调用然后控制云台。
原文链接
消除ifarme默认事件

ifarme {
pointer-events: none;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/623054.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【熬夜送书 | 第三期】清华社赞助 | 《Java系列丛书》

【熬夜送书 | 第三期】清华社赞助 | 《Java系列丛书》

前言 Java作为一门主流语言&#xff0c;它与其他语言相比&#xff0c;有什么优势呢? Java 是一种广泛使用的高级编程语言&#xff0c;具有多项特性&#xff1a; 1.简单易学&#xff1a;Java 语言的语法与 C 相似&#xff0c;但删掉了复杂的指针、运算符重载等内容&#xff0…
阅读更多...
C++继承相关内容(三)

C++继承相关内容(三)

目录 一.单例模式和相关习题 1.不能在外部环境创建该类对象 方法&#xff1a; 代码&#xff1a; 2.创建一个不能被继承的类 方法&#xff1a; 3.创建一个不能被继承&#xff0c;但是可以在外部环境中创建该类对象 方法&#xff1a; ​编辑 4.一个能被继承的类&#xf…
阅读更多...
【WinForm】WinForm常见窗体技术汇总

【WinForm】WinForm常见窗体技术汇总

文章目录 前言一、窗体调用外部程序与渐变窗体1、效果2、界面设计3、代码 二、按回车键跳转窗体中的光标焦点1、效果2、界面设计3、代码 三、剪切板操作1、效果2、界面设计3、代码 四、实现拖放操作1、效果2、界面设计3、代码 五、移动的窗体1、效果2、界面设计3、代码 六、抓不…
阅读更多...
聚观早报 | OpenAI 没有上市计划；马斯克称未来房价下跌将加速

聚观早报 | OpenAI 没有上市计划；马斯克称未来房价下跌将加速

今日要闻&#xff1a;OpenAI 没有上市计划&#xff1b;马斯克称未来房价下跌将加速&#xff1b;Coinbase被SEC起诉&#xff0c;股价闪崩&#xff1b;库克&#xff1a;苹果正密切关注ChatGPT等&#xff1b;推特正致力于开发视频直播产品 OpenAI没有上市计划 当地时间周二&…
阅读更多...
068：cesium lookAtTransform围绕一个固定点上下左右旋转查看

068：cesium lookAtTransform围绕一个固定点上下左右旋转查看

第068个 点击查看专栏目录 本示例的目的是介绍如何在vue+cesium中查看一个固定的点的情况，从上下左右不同的维度进行查看。这里面使用lookAtTransform这个操作函数。lookAtTransform(transform, offset)，这里的offset偏移量可以是笛卡尔坐标或航向/俯仰/范围。 直接复制下面…
阅读更多...
Java集合常见面试题集锦

Java集合常见面试题集锦

1、介绍Collection框架的结构 集合是Java中的一个非常重要的一个知识点&#xff0c;主要分为List、Set、Map、Queue三大数据结构。它们在Java中的结构关系如下&#xff1a; Collection接口是List、Set、Queue的父级接口。 Set接口有两个常用的实现类&#xff1a;HashSet和Tre…
阅读更多...
libmodbus编程笔记

libmodbus编程笔记

一 基础知识 地址映射值 Modbus寄存器 Modbus寄存器地址分配 Modbus ASCII消息帧格式 Modbus RTU帧格式 Modbus RTU相邻帧间隔 Modbus寻址范围 PDU与ADU的关系 Modbus TCP/IP ADU与PDU的关系 Modbus TCP/IP与Modbus串行消息构成对比 Modbus TCP/IP协议最大帧数据长度为260字…
阅读更多...
人工智能-实验四

人工智能-实验四

第四次实验 一.实验目的 ​ 了解深度学习的基本原理。能够使用深度学习开源工具。学习使用深度学习算法求解实际问题。 二.实验原理 1.深度学习概述 ​ 深度学习源于人工神经网络&#xff0c;本质是构建多层隐藏层的人工神经网络&#xff0c;通过卷积&#xff0c;池化&…
阅读更多...
【2 微信小程序学习 - 小程序的架构.配置.app与page】

【2 微信小程序学习 - 小程序的架构.配置.app与page】

1 小程序的架构模型 为了避免卡顿,优化性能,小程序使用双线程模型. 可以理解为创建了两个webview,一个负责渲染界面,一个负责js脚本处理,通过微信客户端的native进行中转交互. 2 小程序的配置文件 在多人开发中,一般不修改project.config.json避免冲突 ,而是单人修改project…
阅读更多...
Intradeco通过适用于Excel的Liquid UI自动执行SAP MM并节省80%的处理时间

Intradeco通过适用于Excel的Liquid UI自动执行SAP MM并节省80%的处理时间

背景 Intradeco为服装制造提供整体方法&#xff0c;涵盖所有阶段&#xff1a;从构思阶段到最终产品分销。它已发展成为一家全球垂直制造公司&#xff0c;客户遍布美国、墨西哥和加拿大。 挑战 提高运营效率 原因&#xff1a;人员必须浏览多个 SAP 事务才能为新材料创建采购订单…
阅读更多...
2023年牛客网最新Java面试八股文附答案整理（不管工作几年都可以看看）

2023年牛客网最新Java面试八股文附答案整理（不管工作几年都可以看看）

很多人都说今年对于 IT 行业根本没有所谓的“金三银四”“金九银十”。在各大招聘网站或者软件上不管是大厂还是中小公司大多都是挂个招聘需求&#xff0c;实际并不招人&#xff1b;在行业内的程序员基本都已经感受到了任老前段时间口中所谓的“寒气”。 虽然事实确实是如此&a…
阅读更多...
学顶教育：初级会计师领取证书有关事项

学顶教育：初级会计师领取证书有关事项

初级会计师职称证书是国家组织考试后颁发的专业技术资格证书&#xff0c;与纸质证书和电子证书具有同等法律效力。 考取初级会计师职称证书的有关事项如下&#xff1a; 1、领取方式 初级会计职称证书的领取方式有两种&#xff1a;现场领取和邮寄领取。 考生可任选其一。 部分…
阅读更多...
浪涌保护器和避雷器的区别

浪涌保护器和避雷器的区别

线路在使用过程中&#xff0c;由于短路或雷击&#xff0c;会突然产生巨大的能量。一旦这种能量通过线路进入家庭或其他电力线&#xff0c;就会造成设备烧毁&#xff0c;造成生命和财产损失。直流电涌保护器可以通过保护组件立即将巨大的能量吸入地面端子&#xff0c;从而保护您…
阅读更多...
[架构之路-207]- 常见的需求分析技术：实用的需求分析与建模详解过程（实操性强）

[架构之路-207]- 常见的需求分析技术：实用的需求分析与建模详解过程（实操性强）

目录 1.1 需求分析建模的要点与误区 1.1.1 需求分析到底做什么 1.1.1.1 分解的方法 1.1.1.2 提炼、合并、重组 1.1.1.3 消除矛盾 1.1.2 建模的目标和要点 1.1.2.1 建模的目的 1.1.2.2 建模的要点与原则 1.1.3 选择建模工具的要点 1.1.3.1 正确认识建模方法论 1.1.3.…
阅读更多...
肠道菌群检测在临床感染判别中的应用

肠道菌群检测在临床感染判别中的应用

谷禾健康 感染是人类面临的健康威胁之一。各种病原体&#xff0c;如细菌、病毒、真菌、寄生虫等&#xff0c;存在于我们日常接触的环境、物品、食物等中。一些常见的感染病例包括感冒、流感、腹泻、组织器官或血液感染等&#xff0c;在全球范围内广泛传播。这些疾病的传播方式多…
阅读更多...
MAYA活塞动画

MAYA活塞动画

给组打关键 让下面带动上面一起运动 创建定位器 放在中间 创建两个定位器 一个定位器放在连动秆下面&#xff0c;让定位跟物体一块动 创建目标约束 完成
阅读更多...
python基础----07-----异常、模块、包

python基础----07-----异常、模块、包

一 了解异常 当检测到一个错误时&#xff0c;Python解释 器就无法继续执行了&#xff0c;反而出现了一些错误的提示&#xff0c;这就是所谓的“异常”&#xff0c;也就是我们常说的BUG。 二 异常的捕获 当我们的程序遇到了BUG&#xff0c;那么接下来有两种情况&#xff1a; …
阅读更多...
AcWing算法提高课-1.3.14开心的金明

AcWing算法提高课-1.3.14开心的金明

宣传一下算法提高课整理 <— CSDN个人主页&#xff1a;更好的阅读体验 <— 本题链接&#xff08;AcWing&#xff09; 点这里 题目描述 金明今天很开心&#xff0c;家里购置的新房就要领钥匙了&#xff0c;新房里有一间他自己专用的很宽敞的房间。 更让他高兴的是&…
阅读更多...
Vue.js中的Render函数和模板语法

Vue.js中的Render函数和模板语法

Vue.js中的Render函数和模板语法 在Vue.js中&#xff0c;有两种主要的方式来构建组件&#xff1a;使用模板和使用render函数。模板语法是Vue.js中最常见的方式&#xff0c;它是一种基于HTML的语法&#xff0c;能够直接在HTML文件中定义组件的结构和行为。而render函数则是一种…
阅读更多...
公司新来一00后，真让人崩溃...

公司新来一00后，真让人崩溃...

2022年已经结束结束了&#xff0c;最近内卷严重&#xff0c;各种跳槽裁员&#xff0c;相信很多小伙伴也在准备今年的金九银十的面试计划。 在此展示一套学习笔记 / 面试手册&#xff0c;年后跳槽的朋友可以好好刷一刷&#xff0c;还是挺有必要的&#xff0c;它几乎涵盖了所有的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023