首页 > 其他分享 >海康威视WEBSDK3.3控件开发-分屏预览多个摄像头

海康威视WEBSDK3.3控件开发-分屏预览多个摄像头

时间:2024-08-22 17:27:34浏览次数:13  
标签:控件 console log 威视 value 海康 WEBSDK3.3 camera const

海康威视

WEB3.3控件开发包 V3.3

在这里插入图片描述

下载得到海康威视的demo。按照说明文档启动项目。

如果是公司内部,一般都是配置好了对应的WiFi,不需要启动NGINX,直接启动.html文件即可

海康威视视频教程 注意:很多需要海康平台支持,需要付费

参考:

Electron+vite+vue3+海康威视SDK开发过程踩坑

海康插件

  • 海康威视通过 HCWebSDKPlugin.exe 绘制出摄像头的播放画面。注意他找这个层级非常非常的高,并且是脱离文档流的,只要它被绘制出来,就是你把页面所有dom都删除,他依然纯在。
  • 它是单页面的。如果使用div去初始化多个插件是可以的,但是登录的时候,每次选择的插件是相同的
  • 海康威视对接有多种方式,通过网上查阅和观看源码发现,每种方式的最底层用的都是一套代码,对于不同的开发,进行了不同的封装

在这里插入图片描述

在这里插入图片描述

同一页面预览多个摄像头

使用nvr设备

使用nvr设备,一个账号配置多个摄像头。使用海康威视的demo可以实现分屏预览。如果只有一个摄像机是没有办法实现分屏预览的。500元就搞定。页面渲染直接使用div就行。代码放最下面了

在这里插入图片描述

使用nvr后,每个摄像头都是一个数字通道,参照编程指南传参

在这里插入图片描述

使用iframe 不推荐使用

上面说了海康威视插件是单页面的,不能使用div,那就要使用iframe

但是效果很不好。问题如下:

  • 图层会出现闪烁以至于消失。比如切屏、点击任务栏、点击Electron的窗口栏

  • 图层渲染位置不正确。海康插件是根据网页的左上角做渲染的,但是<div class="plugin" id="divplugin"></div>的位置是会影响最终结果的。比如使用绝对定位,设置top、left会使图层向右下移动。虽然说iframe是打开了一个新网页,但是它这个插架还是会根据最外层的网页为基准点,内部逻辑没办法探究。当渲染多个iframe的时候或者进行一些布局的时候,就会出现图层渲染位置不正确的问题

  • iframe中每个摄像头的登录顺序不固定。正确顺序为:1,2, 3, 4。实际为:2, 4, 1, 3

  • 对于登录操作,也不按照顺序渲染(好像是)

  • 如果要重新更换摄像头,需要全部退出再登录。上面说了,图层一旦出现,就不会改变,所以必须这样的。采用的是给每个组件添加一个key,每次选择摄像头的时候刷新key实现组件的刷新

  • 图层的层级太大了,该页面不能打开modalelectron中使用打开新标签页实现

  • 实现麻烦

    • 海康的源码是common.jsvitees moudle,所以html和js必须如下放置

    • 路径处理
      const getPath = () => {
        let path = new URL(`../../../../public/html/plugin.html`, import.meta.url)
          .href;
        return path;
      };
      
    • 页面渲染顺序:父组件onMounted=>iframe,所以需要判断iframe加载完成,然后通知父组件才能进行通信。父组件将摄像头信息传入进行初始化、登录等操作

在这里插入图片描述

使用nvr预览踩坑

停止播放

查看源码后,很明显停止播放还做了其他操作。它会把当前窗口关闭,不能再继续使用。改用”全部停止播放“—— I_StopAllPlay ()。这个编程指南并没有写清楚(糟称冯

标签:控件,console,log,威视,value,海康,WEBSDK3.3,camera,const
From: https://blog.csdn.net/qkdgz/article/details/141388422

相关文章

  • Qt键盘事件检测不到方向键|阻止控件截取键盘事件
    做项目二次开发的时候遇到一个问题,在自己新建的界面中放了很多控件,需要通过键盘方向键来控制焦点在不同控件间的转移,之前用键盘事件检测上下键没有问题,后来加上左右键发现没有反应,查了资料了解到是控件吞掉了左右方向键的信号,因为Qt中本身就有一些处理事件的函数,控件会获取键盘左......
  • lazarus 3.4+fpc trunk编译tachart控件出错
    lazarus3.4+fpctrunk编译tachart控件出错原因:最新的fpc禁止访问private引起的修改方法:1、打开lazarus\components\tachart\tadatatools.pas将functionTDataPointDistanceTool.FindRef(APoint:TPoint;AMode:TDataPointMode;ADest:TDataPointTool.TPointRef;AOtherEndS......
  • 【python】PyQt5中的QFrame控件,控制图形的边框样式、阴影效果、形状等属性
    ✨✨欢迎大家来到景天科技苑✨✨......
  • 界面控件DevExpress WinForms中文教程:Data Grid(数据网格)简介(二)
    DevExpressWinFormsDataGrid是一个高性能的UI组件,由DirectX渲染引擎提供支持。数据网格(GridControl)提供了一个灵活的基于视图的体系结构,包括许多数据塑造和UI自定义特性,数据网格可以显示和编辑来自任何大小和复杂数据源的数据。P.S:DevExpressWinForms拥有180+组件和UI库,能......
  • 表格控件:计算引擎、报表、集算表
    近日,葡萄城正式发布了SpreadJS最新版本V17.1,为前端表格控件市场带来了一系列令人瞩目的新特性和功能增强。本次更新旨在进一步提升用户在计算引擎、报表生成和分析等方面的体验,为各行业的开发者提供更强大的工具支持。主要更新亮点工作薄增强居右对齐将样式的textDirection......
  • 界面控件DevExpress Blazor v24.2路线图预览——支持.NET 9、新增桑基图等
    DevExpress BlazorUI组件使用了C#为BlazorServer和BlazorWebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生BlazorUI组件(包括PivotGrid、调度程序、图表、数据编辑器和报表等)。本文中包含了DevExpressBlazorv24.2官方发布的当前/预计的开发计划,请注意......
  • 通过代码添加的控件的事件如何编写?
    0背景这两天在重新复习事件,比如Winform控件的事件,利用vs很方便地实现。比如:想要在窗体加载时,修改窗口的标题;我们只需要双击Form1的标题栏即可;vs便会给我们生成如下代码,且光标自动定位到方法体中:privatevoidForm1_Load(objectsender,EventArgse){}然后我......
  • Delphi 的 TMS 控件安装方法
    * 参考:tmsxdataaurliussparkle的手工安装(XE7)--------------------------------------------------------------------------------------------说明:下述安装方法的意思是:1)将所有包项目的编译结果放在 /Bin目录中,并将/Bin路径,放入系统变量Path的查找路径中。因编译......
  • winform工具箱安装其他控件
     下载对应的控件dll文件一,新建Winform项目或者打开您已有的Winform项目,选择窗体,显示窗体设计器界面,点击“视图”-“工具箱”,显示工具箱,如下图: 在工具箱,点击鼠标右键,添加选项卡 输入对应控件名 在工具箱中选中选中DEMO选项卡。 安装方法一:根据提示“此组中没有可......
  • 界面控件DevExpress ASP.NET Web Forms v24.1最新版本系统环境配置要求
    本文档包含有关安装和使用 DevExpressASP.NETWebForms控件的系统要求的信息。点击获取DevExpressv24.1正式版.NETFrameworkDevExpressASP.NETWebForms控件支持以下.NET框架版本。如果您需要DevExpress产品的早期版本,请咨询“在线客服”获取。IDEDevExpressASP.......