vue对接海康摄像头，配合ifarme进行展示。

news2024/12/23 15:46:18

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;
}
</style>

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

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

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

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

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

相关文章

支付宝电脑版二维码Java

支付宝电脑版二维码Java

/*生成二维码/ PostMapping(value “getQRCode”) RequestLog(“支付宝支付”) ApiOperation(“支付宝支付”) AnonAccess public String qrCode(Validated RequestBody SysMemberRecordVo sysMemberRecordVo) throws AlipayApiException { AlipayClient alipayClient new De…
阅读更多...
聚观早报|上海迪士尼辟谣乐园落户武汉；Wi-Fi7国内标准即将落地

聚观早报|上海迪士尼辟谣乐园落户武汉；Wi-Fi7国内标准即将落地

今日要闻&#xff1a;上海迪士尼辟谣乐园将落户武汉&#xff1b;Wi-Fi7国内标准即将落地&#xff1b;微软Office365AI助手价格曝光&#xff1b;刘畊宏20秒短视频要价60万&#xff1b;滴滴旗下公司新增互联网游戏业务 上海迪士尼辟谣乐园将落户武汉 6 月 3 日&#xff0c;有消息…
阅读更多...
Android-Activity生命周期

Android-Activity生命周期

文章参考&#xff1a;添加链接描述 文章参考&#xff1a;添加链接描述 五大状态 StartingRunningStoppedPausedDestroyed 借用一张已经包浆的图 PS&#xff1a;Running和Paused是可视阶段&#xff0c;其余都是不可视 几大函数 onCreate&#xff1a;通过setContentLayout初始…
阅读更多...
如何选择最佳数据库：MongoDB、PostgreSQL或ScyllaDB？

如何选择最佳数据库：MongoDB、PostgreSQL或ScyllaDB？

Tractian是一家提供工业监控系统的机器智能公司。去年&#xff0c;我们面临着将我们的实时机器学习&#xff08;ML&#xff09;环境和分析仪表板升级以支持数据吞吐量的大幅增长的挑战&#xff0c;因为我们成功地将客户数据库和数据量扩大了10倍。 我们意识到&#xff0c;在快…
阅读更多...
MySQL版本5.7.99？

MySQL版本5.7.99？

序&#xff1a;在项目工作中需要从三方厂商数据库同步数据到项目业务库中&#xff0c;本平平无奇的功能却被一个报错打破。 在使用某框架的DataSourceConfig(Object)方法初始化数据库连接时&#xff0c;日志输出报错&#xff1a; Unknown system variable transaction_isolatio…
阅读更多...
sparkRDD编程实战

sparkRDD编程实战

文章目录 sparkRDD编程实战1、Spark RDD 实现单词计数2、Spark RDD 实现分组求TopN3、Spark RDD 实现二次排序4、Spark RDD 计算平均成绩5、Spark RDD 倒排索引统计每日新增用户6、Spark案例实操7、Spark RDD 综合应用需求1&#xff1a;Top10热门品类需求说明实现方案一实现方案…
阅读更多...
【Python SMTP/POP3/IMAP】零基础也能轻松掌握的学习路线与参考资料

【Python SMTP/POP3/IMAP】零基础也能轻松掌握的学习路线与参考资料

Python是一种高级编程语言&#xff0c;广泛应用于Web开发、人工智能、数据科学、自动化等领域。SMTP/POP3/IMAP是与邮件相关的三个协议&#xff0c;分别用于发送邮件、接收邮件和访问邮件。使用Python可以轻松实现这些功能&#xff0c;本文将介绍Python SMTP/POP3/IMAP的学习路…
阅读更多...
【Python】Python系列教程-- Python3 条件控制（十六）

【Python】Python系列教程-- Python3 条件控制（十六）

文章目录 前言if 语句if 嵌套match...case 前言 往期回顾&#xff1a; Python系列教程–Python3介绍&#xff08;一&#xff09;Python系列教程–Python3 环境搭建&#xff08;二&#xff09;Python系列教程–Python3 VScode&#xff08;三&#xff09;Python系列教程–Pytho…
阅读更多...
Spring Boot整合Swagger2 Swagger2配置

Spring Boot整合Swagger2 Swagger2配置

目录 什么是Swagger? Swagger如何使用 如何使用Swagger 查看SwaggerAPI文档 什么是Swagger? Swagger是一款流行的RESTful API文档生成工具&#xff0c;它支持多种编程语言和多种框架&#xff0c;包括但不限于Java、Python、Node.js、Go等&#xff0c;Spring Boot也提供了…
阅读更多...
【机器学习】第二章：K近邻（分类）

【机器学习】第二章：K近邻（分类）

系列文章目录 第二章&#xff1a;K近邻&#xff08;分类&#xff09; 相关代码地址&#xff1a;https://github.com/wzybmw888/MachineLearning.git 文章目录 系列文章目录一、最近邻算法二、最近邻算法的缺陷&#xff08;1&#xff09;策略一&#xff1a;K近邻&#xff08;k‐…
阅读更多...
java源码为什么需要编译成字节码?

java源码为什么需要编译成字节码?

作用1: jvm支持多语言,需要字节码作为统一的规范 作用2: 字节码转成机器的指令会更快 作用3: 如果没有对应的反编译器,字节码还具有一定的安全保密作用
阅读更多...
【Rust日报】2023-06-02 Rust 1.70.0 稳定版发布

【Rust日报】2023-06-02 Rust 1.70.0 稳定版发布

Rust 1.70.0 稳定版发布 Rust 团队很高兴地宣布 Rust 的新版本 1.70.0。Rust 是一种编程语言&#xff0c;它使每个人都能构建可靠、高效的软件。 最大的特性是&#xff0c;OnceCell稳定版可用啦。 如果你通过 rustup 安装了以前版本的 Rust&#xff0c;你可以通过以下方式获得 …
阅读更多...
Linux 之大数据定制篇-Shell 编程

Linux 之大数据定制篇-Shell 编程

Linux 之大数据定制篇-Shell 编程 为什么要学习Shell 编程 Linux 运维工程师在进行服务器集群管理时&#xff0c;需要编写Shell 程序来进行服务器管理。对于JavaEE 和Python 程序员来说&#xff0c;工作的需要&#xff0c;你的老大会要求你编写一些Shell 脚本进行程序或者是服…
阅读更多...
Mocha AE：图层相关面板

Mocha AE：图层相关面板

Mocha AE 左侧的图层面板、图层属性面板以及边缘属性面板提供了与图层、样条、跟踪等相关的选项。 Layers 图层 图层的上下顺序相当重要。 上方所有图层的样条区域将被自动排除出跟踪遮罩 Track Mattes。 也可在同一图层上绘制多个样条形状。相交的样条区域将被排除出遮罩。 Vi…
阅读更多...
【MySQL】一文带你了解MySQL中的子查询

【MySQL】一文带你了解MySQL中的子查询

文章目录 1. 需求分析与问题解决1. 1实际问题1.2 子查询的基本使用1.3 子查询的分类 2. 单行子查询2.1 单行比较操作符2.2 代码示例2.3 HAVING 中的子查询2.4 注意的问题 3. 多行子查询3.1 多行比较操作符3.2 代码示例 4. 相关子查询4.1 相关子查询执行流程4.2 代码示例 子查询…
阅读更多...
图论学习（六）

图论学习（六）

图的连通度 删去任意一条边后便不连通 删去任意一条边后仍连通&#xff0c;但删去点u后不连通。 G3和G4删去任意一条边或任意一个点后仍连通&#xff0c;但从直观上看&#xff0c;G4的连通程度比G3高。 割边 设e是图G的一条边&#xff0c;若ω(G-e)>ω(G)&#xff0c;则…
阅读更多...
uniapp微信一键登录微信授权

uniapp微信一键登录微信授权

前言 现在小程序逐渐成为主流&#xff0c;常用的微信授权登录很重要很常见的一个功能&#xff0c;今天自己总结了一下。 准备工作 1.如果你想自己想试一下这个功能首先你需要有一个开发中的项目并且你在开发成员里面。 2.配置自己的微信开发者工具的appid码 3.在hbuilderx的…
阅读更多...
echarts 如何实现图例单个数据项加上背景颜色和饼图中的背景图自适应

echarts 如何实现图例单个数据项加上背景颜色和饼图中的背景图自适应

需求： 实现效果如下： ECharts中，可以通过设置legend中的formatter属性来自定义图例项的显示格式。以下是一个示例： option = {// ...legend: {data: [A, B, C],formatter: function (name) {var color = #fff;if (name === A) {color = #ff0000; // 设置A的背景颜色为红色…
阅读更多...
如何使用ArcGIS计算容积率

如何使用ArcGIS计算容积率

字段计算 为建筑图层新建一个area字段&#xff0c;用于记录单层建筑的面积&#xff0c;如下图所示。 单层建筑面积 为建筑图层新建一个areaAll字段&#xff0c;用于记录总建筑面积&#xff0c;areaAllarea*floor&#xff0c;如下图所示。 计算总面积 为小区图层新建一个area…
阅读更多...
chatgpt赋能python：Python大于0的SEO

chatgpt赋能python：Python大于0的SEO

Python大于0的SEO Python是一种高级编程语言&#xff0c;被广泛用于数据科学、机器学习、Web应用程序和网络爬虫等领域。Python大于0的SEO是指使用Python编写程序来优化网站的排名。在本文中&#xff0c;我们将介绍Python大于0的SEO的基础知识和一些实用技巧。 什么是Python大…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023