海康威视
下载得到海康威视的demo。按照说明文档启动项目。
如果是公司内部,一般都是配置好了对应的WiFi,不需要启动NGINX,直接启动.html
文件即可
海康威视视频教程 注意:很多需要海康平台支持,需要付费
参考:
-
在vue3 中使用海康威视WEB3.3控件开发包 V3.3 抓图
-
如果你使用
vue+vite
对接遇到问题,可以参考Giteedemo
-
有可能是路径问题。参考vite静态资源处理
const getPath = () => { let path = new URL(`../../../plugin.html`, import.meta.url).href; console.log(path, "path"); return path; };
-
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实现组件的刷新
-
图层的层级太大了,该页面不能打开
modal
。electron
中使用打开新标签页实现 -
实现麻烦
-
海康的源码是
common.js
,vite
是es 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