| java 使用海康威视摄像头前端进行预览 海康威视摄像头web开发 | 您所在的位置：网站首页 › 海康体检项目价格表 › java 使用海康威视摄像头前端进行预览 海康威视摄像头web开发 |
java 使用海康威视摄像头前端进行预览 海康威视摄像头web开发
|
最近一个vue的项目里面需要呈现某现场的实时视频，组里购买了一组海康威视的网络摄像头，是那种带CS端管理程序的，通过ip，port，用户名，密码登录摄像头，但是不知道如何应用到web项目中。查找资料后，我在网上找到一个web控件开发包，于是在此基础上进行开发，实现vue项目需要的功能。 20210524更新海康威视出了 3.2 版本的 web 插件，可以支持高版本 Chrome了，需要调试海康的友友们的福音！地址看下面！我没用过，但是思路应该是差不多的！ https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24
打开这个web控件开发包的文档，可以看到，这个控件是利用ActiveX控件和NPAPI实现的。IE上用ActiveX控件，Chrome基于NPAPI实现，并且需要安装codebase目录下的WebComponentsKit.exe插件。这里我们可以了解到，该控件不适用于高版本Chrome浏览器，这是一个很不爽的地方。不过目前还没有找到其他合适的方案，也只能试试这个方案了。
打开demo目录下的index.html，我们可以看到它支持的功能还是很多的。 而我并不需要这么多功能，只需要能把网络摄像头的画面呈现在项目页面上就好了。
遇到的问题： 一开始也没有熟读这个控件的demo源码，就想着把从初始化到登录，再到预览这部分功能截取出来移植到Vue项目里就好。然而在裁剪代码的过程出现了各种报错，尝试定位错误的过程浪费了不少时间。 解决方法： 之后想到的方法是，把demo中的多余的功能一个一个去掉，在此过程中要观察demo是否可以正常登录和预览画面。最后的demo中我只保留了从初始化到登录以及预览这部分的代码。这个过程下来，我对这部分的js逻辑也是比较清楚了，最终也是顺利地移植到Vue项目中。 代码分享移植的这部分代码我封装成了一个webVideo,js文件，供页面调用。
而在页面中，首先需要引入该js文件 import { WebVideo } from '@/assets/js/webVideo.js'然后需要在mounted方法中进行初始化对象 this.webVideo = new WebVideo()最后在打开dialog显示视频的位置调用init方法和clickLogin方法(我在clickLogin方法的成功回调函数中调用获取频道信息和设备端口的方法，并在这之后调用了预览方法)。 // 显示视频dialog this.videoBoxVisible = true // nextTick回调中调用init和clickLogin this.$nextTick(() => { this.webVideo.init() this.webVideo.clickLogin() })最终可以看到摄像头画面啦，算是有了成果！
有朋友留言说想看一下这个js文件的写法，这里分享一下。有时候不能及时看到评论，见谅 // 初始化插件 export function WebVideo() { this.g_iWndIndex = 0 this.szDeviceIdentify = '' this.deviceport = '' this.deviceport = '' this.channels = [] this.ip = '172.29.3.101' this.port = '80' this.username = 'admin' this.password = '123456' this.init = function() { var self = this // 检查插件是否已经安装过 var iRet = WebVideoCtrl.I_CheckPluginInstall(); if (-1 == iRet) { alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！"); return; } // 初始化插件参数及插入插件 WebVideoCtrl.I_InitPlugin('100%', '100%', { bWndFull: true, iPackageType: 2, iWndowType: 1, cbInitPluginComplete: function () { WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin"); } }); } // 登录 this.clickLogin = function () { var self = this if ("" == self.ip || "" == self.port) { return; } self.szDeviceIdentify = self.ip + "_" + self.port; WebVideoCtrl.I_Login(self.ip, 1, self.port, self.username, self.password, { success: function (xmlDoc) { setTimeout(function () { self.getChannelInfo(); self.getDevicePort(); }, 10); setTimeout(function() { self.clickStartRealPlay() }, 500) }, error: function (status, xmlDoc) { } }); } // 退出 this.clickLogout = function() { var self = this if (null == self.szDeviceIdentify) { return; } var iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify); if (0 == iRet) { self.getChannelInfo(); self.getDevicePort(); } } // 获取通道 this.getChannelInfo = function() { var self = this self.channels = [] if (null == self.szDeviceIdentify) { return; } // 模拟通道 WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, { async: false, success: function (xmlDoc) { var oChannels = $(xmlDoc).find("VideoInputChannel"); $.each(oChannels, function (i) { var id = $(this).find("id").eq(0).text(), name = $(this).find("name").eq(0).text(); if ("" == name) { name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1)); } self.channels.push({ id: id, name: name }) }); }, error: function (status, xmlDoc) { } }); } // 获取端口 this.getDevicePort = function() { var self = this if (null == self.szDeviceIdentify) { return; } var oPort = WebVideoCtrl.I_GetDevicePort(self.szDeviceIdentify); if (oPort != null) { self.deviceport = oPort.iDevicePort; self.deviceport = oPort.iRtspPort; } } // 开始预览 this.clickStartRealPlay = function() { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex), iChannelID = self.channels[0].value if (null == self.szDeviceIdentify) { return; } var startRealPlay = function () { WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, { iRtspPort: self.deviceport, iStreamType: '1', iChannelID: iChannelID, bZeroChannel: false, success: function () { }, error: function (status, xmlDoc) { if (403 === status) { } else { } } }); }; if (oWndInfo != null) {// 已经在播放了，先停止 WebVideoCtrl.I_Stop({ success: function () { startRealPlay(); } }); } else { startRealPlay(); } } // 停止预览 this.clickStopRealPlay = function() { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex) if (oWndInfo != null) { WebVideoCtrl.I_Stop({ success: function () { }, error: function () { } }); } } }2018年12月1日补充 很多人都有报错的情况，请检查下是否在index.html中引用了这个js，这个js来源于Web控件开发包。 对了,还有一个jsPlugin-1.0.0.min.js也需要放在static目录下，但是不需要在index.html引用，因为webVideoCtrl.js会主动去调用同目录下的jsPlugin-1.0.0.min.js。 我能补充的坑大概就这些了吧，因为这个项目也过去很久了，我用到的功能也真的少，对于不能答复大家太多深入的问题，我感到抱歉。 |
【本文地址】