React、vue项目中对接海康威视网络摄像头插件版全攻略

前端南秋
1,913 阅读4分钟

PS：封面图用豆包生成的。

项目中有了新需求，不使用插入式设备摄像头，而是采用统一采购的海康威视网络摄像头。 那，如何将海康威视网络摄像头对接接入Electron + React项目中呢？ 看如下流程。

  • 1 首先，获取到这个需求的时候不要着急，因为既然是对接那就官网肯定是有对接的SDK跟文档。 我们先去扒一下对应的web开发包跟文档。

open.hikvision.com/download/5c…

image.png

  • 2 准备工具：

海康官网下载工具:设备网络搜索工具。下载地址：partners.hikvision.com/tools/toold…

大概长下面这个样子。

image.png

  • 3 进行IP、端口、等调试。输入密码进行设置。图片看上图

  • 4 电脑处于在同一局域网下，游览器输入你刚才配置好的摄像头的IP地址：XXX.XXX.XXX.XXX 就进入了设备后台。

    1. 从这里开始就是正式对接Electron+ react项目了。我们可以先打开下载的SDK集成包文件目录。

image.png

image.png

查看一下开发文档。 文档的简介处已经明确告诉我们，这个SDK仅支持BS网页，不支持CS。

image.png

所以，至于我们项目是Electron 还是react 其实关系不大，因为它只能用在web网页。 所以基于这个实际情况，我们集成的时候，将SDK包放置在React中，与electron分开。

    1. 我们打开sdk的nginx 配置包。修改nginx配置地址。

image.png

image.png

修改server为上述地址即可。 然后再返回上一层，双击nginx.exe 或者 start.bat,运行nginx。

  • 7.我们确认下服务是否走通了，这时候打开下载sdk的webs下的index.html文件。输入你的摄像头IP、端口、账号、密码。并进行登录，登录成功后点击预览。

image.png

此处成功显示出来了配置的视频，那我们就默认它是正常的。 接下来进入项目集成。

    1. 首先我们复制下载sdk包中的 webs/codebase 中的两个js文件。同时记得双击安装HCWebSDKPlugin.exe 这个插件到电脑，因为它是播放器的主要插件。没有它就播放不了。

image.png

    1. 将复制的两个js文件以及webs/jquery-1.7.1.js 文件 三个放置在你react项目或者vue项目的public文件中，并根据SDK的index.html引入方式将两个文件引入到项目的html文件中。

image.png

image.png

到这里，项目的引入就结束了。下来就开始调用。

    1. 在vue或者react项目的src/新建一个sdk文件夹。我们封装下公共的摄像头调用方法。这里为了简单我只封装了。

I_InitPlugin、I_Resize、I_Login、I_GetDevicePort、I_GetAnalogChannelInfo、I_StartRealPlay

具体的封装调用顺序：

A： 初始化、挂载插件。 B： 登录 C： 获取端口、获取通道 D： 开始预览

我贴一个大概的初始化封装插件把，毕竟，照着文档封装也没啥写的。

 export function HKI_InitPlugin (Dom, callback) {
        window.WebVideoCtrl.I_InitPlugin({
            bWndFull: false, // 窗口不支持全屏
            iWndowType: 1,
            cbInitPluginComplete: function () {
                window.WebVideoCtrl.I_InsertOBJECTPlugin(Dom).then(() => {
                    // 去登录
                    HKI_Login(callback);
                    // 检查插件是否最新
                    window.WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                        if (bFlag) {
                            alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
                        }
                    });
                }, () => {
                    alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
                });
            }
        })
    }

是不是有的人看到上面有点懵，为啥药使用window.WebVideoCtrl呢？

是因为，你可以看我们引入文件的源码，它是将WebVideoCtrl 挂在了window上，当我们引入到项目里的时候，直接就挂在上了，所以我们在封装的js中就没必要引入了。

image.png

这里还要给大家几个提醒。

  1. 插件的优先级很高，高于你整体项目，记得窗口变化的时候及时调整下窗口播放位置。
  2. 插件在不适用的时候，记得注销，不然你会发现有个黑框在你项目上面。
  3. 预览完成后切换，记得要先停止预览、再退出登录，最后再注销插件。
  4. 页面出现什么403超时报错不用管，正常是可以使用的。
  5. 如果elctron使用了窗口背景透明，那么你插入插件的时候会发现，电脑底部被覆盖了，这个是因为窗口设置透明，并且插件级别又高出现的原因，具体咋解决。不行就尝试下取消electron透明创建窗口的选项吧。

好了，废话结束了，简单的一篇集成海康威视网络摄像头的记录。如果还不清楚可以评论沟通哈~~

avatar
文章
阅读
粉丝