大华摄像头二次开发-web端实现实时视频监控
2018-03-28 20:32
537 查看
最近客户提需要,需要在现有的系统中集成视频监控功能,摄像头是大华的。而大华又没有关于java的sdk,官网只能下载到c++的demo和dll文件。无奈只能自己在网上找了,最后找到了一些解决办法,把实现方法记录一下。
这种方式实现的功能较少,只有实时视频、抓图、录制视频功能。而且只支持ie浏览器。
全屏js:
其他:
关闭音频
里面还有很多方法可以二次开发,具体可以参考压缩包里面的文档。
使用Jna技术调用大华dll
在大华官网下载sdk,传送门;下载完成后解压,将里面的库文件复制到其他文件夹以方便jna的调用。具体可以查看demo:java后端大华摄像头二次开发demo,因为这种方式使用java的swing窗口开发比较方便,由于这次是做web端开发,所以没有详细的去了解,这里不作详细分析,可以查看上面的demo。使用ie的activex插件
参考:通过WEB调用大华网络摄像头这种方式实现的功能较少,只有实时视频、抓图、录制视频功能。而且只支持ie浏览器。
1.下载插件并注册
点击下载2.使用object元素添加视频
<object classid="clsid:30209FBC-57EB-4F87-BF3E-740E3D8019D2" codebase="" id="id" name="playOcx" align="center" width="350" height="300px"> </object>
3.js调用开启实时视频
//获取object元素js对象 var SSOcx = document.getElementById(id); //登录视频 var flag = SSOcx.SetDeviceInfo("ip", "端口", "通道", "用户名", "密码"); if (flag) { //开启实时视频监控 SSOcx.StartPlay(); } else { return false; }
4.实时视频全屏实现
全屏button:<button class="btn btn-white btn-sm" onclick="reqFullScreen(document.getElementById('id'))"> <i class="fa fa-arrows-alt"></i>全屏 </button>
全屏js:
<script type="text/javascript"> var width = ""; var height = ""; //进入全屏 function reqFullScreen(element) { console.log(element.width) var de = element; if (de.requestFullscreen) { de.requestFullscreen(); remoceWH(de); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); remoceWH(de); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); remoceWH(de); } else if (de.msRequestFullscreen) { de.msRequestFullscreen(); doc = de; remoceWH(de); } else { console.log("进入全屏失败") } } function remoceWH(element) { //保存原始的宽高 width = element.getAttribute("width"); height = element.getAttribute("height"); //移除object元素的宽高 element.removeAttribute("width"); element.removeAttribute("height"); } //退出全屏 function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } setWH(); } function setWH() { $("object[name='playOcx']").each(function () { $(this).attr("width", width); $(this).attr("height", height); }); } //监听esc事件 $(document).keyup(function (event) { switch (event.keyCode) { case 27: exitFullscreen(); break; } }); </script>
5.总结
这种方式实现起来还算方便,但是功能较少。不支持音频等。使用webplugin.exe插件
这种方式也是使用别人开发的插件,但是功能几乎都有。在web开发这种方式应该也是最好的了。但是也有局限性,使用谷歌浏览器和火狐浏览器不行;对360浏览器支持,但是如果使用兼容模式还是需要下载另外下载activex插件。1.下载插件
点击下载;解压后安装里面的webplugin.exe,如果是ie浏览器,另外注册上面的ocx插件。2. object元素
ie模式:<object id="id" width="100%" height="87%" classid="clsid:7F9063B6-E081-49DB-9FEC-D72422F2727F" codebase=""> </object>
其他:
<object name="playOcx" id="id" width="100%" height="87%" type="application/media-plugin-version-3.1.0.2" VideoWindTextColor="9c9c9c" VideoWindBarColor="414141"> </object>
3. 判断是否安装插件
<script type="text/javascript"> var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/(msie\s|trident.*rv:)([\d.]+)/)) ? Sys.ie = s[2] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; var PLUGINS_NAME = 'WebActiveEXE.Plugin.1'; var hasPlugin = checkPlugins(); /** * 检测浏览器是否存在视频插件 * @return {Boolean} */ function checkPlugins() { var result; if (Sys.ie) { try { result = new ActiveXObject(PLUGINS_NAME); delete result; } catch (e) { return false; } return true; } else { navigator.plugins.refresh(false); result = navigator.mimeTypes["application/media-plugin-version-3.1.0.2"]; return !!(result && result.enabledPlugin); } } </script>
4. js连接摄像头开启实时监控
这个视频控件已经实现了抓图、音频和录制功能var g_ocx = document.getElementById(sxtList[i].id); var bRet = g_ocx.LoginDeviceEx('' + sxtList[i].ip, sxtList[i].dkh - 1 + 1, '' + sxtList[i].yhm, '' + sxtList[i].mm, 0); if (bRet == 0) { //设置窗口数量 g_ocx.SetWinBindedChannel(1, 0, 63, 64); //设置截图保存地址 g_ocx.SetConfigPath(1,"C:\\视频监控\\images"); //设置录制视频保存地址 g_ocx.SetConfigPath(2,"C:\\视频监控\\vidos"); //设置画质 0 高 1 低 // g_ocx.SetPicQuality(0); //设置视频实时性 0-10 实时登记依次降低 g_ocx.SetAdjustFluency(0); //监视模式 g_ocx.SetModuleMode(1); //连接视频 g_ocx.ConnectRealVideo(0, 1); } else { alert("网络连接错误!"); return false; }
5.全屏实现
在这个控件中已经实现了全屏方法,经过测试不同的浏览器全屏的实现也有点不同:function reqFullScreen(element) { var ocx = element; if (Sys.ie) { //ie浏览器 ocx.SwitchToFullScreen(); } else { //其他浏览器 ocx.OnFullScreenClk(); } }
6. 其他方法
开启音频var ele_id = element.getAttribute("id"); var g_ocx = element; var soundStatus = g_ocx.PlayOpenSound();
关闭音频
var ele_id = element.getAttribute("id"); var g_ocx = element; var soundStatus = g_ocx.PlayStopSound();
里面还有很多方法可以二次开发,具体可以参考压缩包里面的文档。
最后
文件打包下载:传送门相关文章推荐
- 大华摄像头二次开发总结
- JAVA实现大华摄像头WEB方式实时显示视频,H5界面展示方式思路。
- 在网页中调用摄像头实现拍照上传 - 高拍仪二次开发
- webpack实现开发、测试、生产等环境的打包切换
- SpringBoot----web开发,实现简单的页面交互(结果返回freemarker页面)
- sdk与开放API协议支持二次开发的摄像头
- webpack+vue 实现多页面开发
- Openstack Nova 二次开发之Nova-extend服务实现
- Java Web应用中如何实现任务有效调度-Java基础-Java-编程开发
- YbSoftwareFactory 代码生成插件【二】:二次开发之 IPlugInGroupRepository 接口的实现
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 列举web开发中,为满足高性能的架构技术实现
- Skyline软件二次开发初级——11如何在WEB页面中的三维地图上加载和保存工程文件
- flask-web开发中登录和注册功能的实现
- J2EE Web服务开发系列之十二: 实现安全的AXIS Web服务,第1部分
- Android混合开发之WebViewJavascriptBridge实现JS与java安全交互
- 热门Web开发方式 REST实现原理浅析
- Web前端开发实战2:二级下拉式菜单之JS实现
- Node.js实现WEB 服务开发
- 织梦DEDE多选项筛选_联动筛选功能的实现_二次开发