海康威视WEBSDK3.3控件开辟-分屏预览多个摄像头
海康威视WEB3.3控件开辟包 V3.3
https://i-blog.csdnimg.cn/direct/29c66892fe4545eebba5d98221365487.png#pic_center
下载得到海康威视的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;
};
[*] web端对接海康视频3.2开辟包以及遇到的坑
Electron+vite+vue3+海康威视SDK开辟过程踩坑
海康插件
[*]海康威视通过 HCWebSDKPlugin.exe 绘制出摄像头的播放画面。注意他找这个层级非常非常的高，并且是离开文档流的，只要它被绘制出来，就是你把页面所有dom都删除，他依然纯在。
[*]它是单页面的。如果使用div去初始化多个插件是可以的，但是登录的时候，每次选择的插件是相同的
[*]海康威视对接有多种方式，通过网上查阅和观看源码发现，每种方式的最底层用的都是一套代码，对于不同的开辟，进行了不同的封装
https://i-blog.csdnimg.cn/direct/056dd74cf5214b67978f6d0e4230a5a2.png#pic_center
https://i-blog.csdnimg.cn/direct/c5035e73b9574640af520b69589e39c4.png#pic_center
同一页面预览多个摄像头
使用nvr装备
使用nvr装备，一个账号配置多个摄像头。使用海康威视的demo可以实现分屏预览。如果只有一个摄像机是没有办法实现分屏预览的。500元就搞定。页面渲染直接使用div就行。代码放最下面了
https://i-blog.csdnimg.cn/direct/a2bb56330f044ce5850dc4682ab65300.png#pic_center
使用nvr后，每个摄像头都是一个数字通道，参照编程指南传参
https://i-blog.csdnimg.cn/direct/f74b4f4af30243c09ecf4c78c25655ea.png#pic_center
使用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加载完成，然后通知父组件才能进行通信。父组件将摄像头信息传入进行初始化、登录等操作
https://i-blog.csdnimg.cn/direct/373ade9d2a404a63be50eef4b01b3059.png#pic_center
使用nvr预览踩坑
停止播放
查看源码后，很明显停止播放还做了其他操作。它会把当前窗口关闭，不能再继承使用。改用”全部停止播放“—— I_StopAllPlay ()。这个编程指南并没有写清楚（糟称冯
页:
[1]