0
0

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

海康威视

WEB3.3控件开发包 V3.3

在这里插入图片描述

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

如果是公司内部，一般都是配置好了对应的WiFi，不需要启动NGINX，直接启动

  1. .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去初始化多个插件是可以的，但是登录的时候，每次选择的插件是相同的
  • 海康威视对接有多种方式，通过网上查阅和观看源码发现，每种方式的最底层用的都是一套代码，对于不同的开发，进行了不同的封装

在这里插入图片描述

​ 在这里插入图片描述

同一页面预览多个摄像头

使用nvr设备

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

在这里插入图片描述

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

在这里插入图片描述

使用iframe 不推荐使用

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

  1. 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 ()。这个编程指南并没有写清楚（糟称冯 😊）

在这里插入图片描述

在这里插入图片描述

插件销毁

在离开页面后，图层依旧存在，即使退出登录也不好使。

bing 海康销毁插件找到了

  1. JS_DestroyPlugin

，然后源码中搜一下找到了可以使用的api。这个api编程指南中也是没有的（糟称冯 😆）

在这里插入图片描述

组件初始化失败

插件已经安装并启动，demo中可以，另个一vue中也可以，之前iframe也可以，但是换成div就不行了。莫名过了一段时间自己好了。我换成iframe，iframe有g了，很奇怪

在这里插入图片描述

代码

  1. webVideoCtrl.js

和

  1. jquery

放置在

  1. public/js

文件夹中，如上图

camera.vue

  1. <template>
  2.   <div ref="playerRef" id="divPlugin" style="width: 100%; height: 100%"></div>
  3. </template>
  5. <script setup>
  6. const props = defineProps({
  7.   camera: {
  8.     type: Object,
  9.   },
  10. });
  11. const playerRef = ref();
  12. const { camera } = toRefs(props);
  13. const cameraAll = ref([1, 2, 3, 4]); // 数字通道
  14. const cameraView = ref([1, 2, 3, 4]);
  15. const closeNum = ref([]);
  16. let g_iWndIndex = 0;
  17. /**
  18.  * 初始化相机
  19.  */
  20. const init = () => {
  21.   WebVideoCtrl.I_InitPlugin({
  22.     bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
  23.     iWndowType: 1,
  24.     cbSelWnd: function (xmlDoc) {
  25.       g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
  26.     },
  27.     cbDoubleClickWnd: function () {},
  28.     cbEvent: (iEventType, iParam1) => {
  29.       if (2 == iEventType) {
  30.         // 回放正常结束
  31.         console.log("窗口" + iParam1 + "回放结束！");
  32.       } else if (-1 == iEventType) {
  33.         console.log("设备" + iParam1 + "网络错误！");
  34.       }
  35.     },
  36.     cbInitPluginComplete: function () {
  37.       WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(
  38.         () => {
  39.           // 检查插件是否最新
  40.           WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
  41.             if (bFlag) {
  42.               alert("检测到新的插件版本，请升级HCWebSDKPlugin.exe！");
  43.             } else {
  44.               console.log("初始化成功");
  45.               login();
  46.             }
  47.           });
  48.         },
  49.         () => {
  50.           alert("插件初始化失败，请确认是否已安装插件");
  51.         }
  52.       );
  53.     },
  54.   });
  55. };
  57. /**
  58.  * 登录
  59.  */
  60. const login = () => {
  61.   WebVideoCtrl.I_Login(
  62.     camera.value.ip,
  63.     1,
  64.     camera.value.port,
  65.     camera.value.username,
  66.     camera.value.pwd,
  67.     {
  68.       timeout: 60000,
  69.       success: function (xmlDoc) {
  70.         console.log("登录成功");
  71.         setTimeout(function () {
  72.           getChannelInfo(`${camera.value.ip}_${camera.value.port}`);
  73.         }, 1000);
  74.         getDevicePort(`${camera.value.ip}_${camera.value.port}`); //获取端口
  75.       },
  76.       error: function (error) {
  77.         console.log(error, "登录失败");
  78.       },
  79.     }
  80.   );
  81. };
  82. // 数字通道
  83. const getChannelInfo = (szDeviceIdentify) => {
  84.   WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
  85.     success: function (xmlDoc) {
  86.       var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
  87.       cameraAll.value = [];
  88.       $.each(oChannels, function (i) {
  89.         var id = $(this).find("id").eq(0).text(),
  90.           name = $(this).find("name").eq(0).text(),
  91.           online = $(this).find("online").eq(0).text();
  92.         if ("false" == online) {
  93.           // 过滤禁用的数字通道
  94.           return true;
  95.         }
  96.         cameraAll.value[i] = id;
  97.         if (i < 4) {
  98.           cameraView.value[i] = id;
  99.         } else {
  100.           closeNum.value[i - 4] = id;
  101.         }
  102.       });
  103.     },
  104.     error: function (oError) {},
  105.   });
  106. };
  107. // 获取端口
  108. const getDevicePort = (szDeviceIdentify) => {
  109.   if (!szDeviceIdentify) {
  110.     return;
  111.   }
  112.   WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then(
  113.     (oPort) => {
  114.       WebVideoCtrl.I_ChangeWndNum(2).then(
  115.         () => {
  116.           // console.log("分屏成功");
  117.           startRealPlay();
  118.         },
  119.         (oError) => {}
  120.       );
  121.     },
  122.     (oError) => {
  123.       console.log(oError.errorMsg, "获取端口失败");
  124.     }
  125.   );
  126. };
  127. const logout = () => {
  128.   let ip_port = `${camera.value.ip}_${camera.value.port}`;
  130.   WebVideoCtrl.I_Logout(ip_port).then(
  131.     () => {
  132.       console.log("退出成功");
  133.     },
  134.     () => {
  135.       console.log("退出失败！");
  136.     }
  137.   );
  138. };
  139. const destroy = (item) => {
  140.   WebVideoCtrl.I_HidPlugin().then(
  141.     () => {
  142.       console.log("销毁组件成功");
  143.     },
  144.     (error) => {
  145.       console.log(error);
  146.     }
  147.   );
  148. };
  149. const play = (iWndIndex, iChannelID) => {
  150.   // console.log("窗口：", iWndIndex, "----数字通道：", iChannelID, "预览");
  151.   WebVideoCtrl.I_StartRealPlay(`${camera.value.ip}_${camera.value.port}`, {
  152.     iStreamType: 1,
  153.     iChannelID: iChannelID, //播放通道
  154.     bZeroChannel: false,
  155.     iWndIndex: iWndIndex,
  157.     success: function () {
  158.       // console.log(
  159.       //   "窗口：",
  160.       //   iWndIndex,
  161.       //   "----数字通道：",
  162.       //   iChannelID,
  163.       //   "开始预览成功！"
  164.       // );
  165.     },
  166.     error: function (oError) {
  167.       console.log(
  168.         "窗口：",
  169.         iWndIndex,
  170.         "----数字通道：",
  171.         iChannelID,
  172.         "开始预览失败！",
  173.         oError.errorMsg
  174.       );
  175.     },
  176.   });
  177. };
  179. // 预览
  180. const startRealPlay = () => {
  181.   for (let i = 0; i < 4; i++) {
  182.     let iChannelID = cameraView.value[i];
  183.     if (iChannelID) play(i, iChannelID);
  184.   }
  185. };
  187. const rePlay = () => {
  188.   WebVideoCtrl.I_StopAllPlay().then((item) => {
  189.     startRealPlay();
  190.   });
  191. };
  192. // 停止预览
  193. const clickStopRealPlay = () => {
  194.   WebVideoCtrl.I_StopAllPlay().then(() => {
  195.     console.log("停止播放成功");
  196.   });
  197. };
  198. const changeIndex = (num) => {
  199.   // num 为通道号
  200.   let isClose = closeNum.value.findIndex((item) => item == num);
  201.   if (isClose > -1) {
  202.     // 重新打开
  203.     closeNum.value.splice(isClose, 1);
  204.   } else {
  205.     // 关闭
  206.     closeNum.value.push(num);
  207.   }
  208.   cameraView.value = cameraAll.value.filter(
  209.     (item) => !closeNum.value.includes(item)
  210.   );
  211.   rePlay();
  212. };
  214. onMounted(() => {
  215.   init();
  216. });
  218. onBeforeUnmount(() => {
  219.   clickStopRealPlay();
  220.   logout();
  221.   destroy();
  222. });
  223. defineExpose({
  224.   changeIndex,
  225. });
  226. </script>

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>摄像头预览</title>
  8.   </head>
  9.   <body>
  10.     <div id="app"></div>
  11.     <script type="module" src="/src/main.js"></script>
  12.     <script id="videonode" src="/js/webVideoCtrl.js"></script>
  13.     <script src="/js/jquery-1.7.1.min.js"></script>
  14.     <!-- 好像不需要。。。 -->
  15.     <!-- <script id="videonode" src="/js/jsVideoPlugin-1.0.0.min.js"></script> -->
  16.   </body>
  17. </html>
标签： 前端 electron
本文转载自: https://blog.csdn.net/qkdgz/article/details/141388422
版权归原作者 翻斗花园正门保安小夏 所有， 如有侵权，请联系我们删除。
登录后发布评论

“海康威视WEBSDK3.3控件开发-分屏预览多个摄像头”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？