大华视频插件简单二次开发经验及问题总结

时间:2024-02-16 13:28:49

之前做了一起关于海康威视视频插件二次开发的经验总结,正好公司在监控页面上加了新的需求,要求添加大华视频插件方法,经过一番奋战后,总算完整解决了大华插件中的一些问题。那么这次就来谈谈大华视频插件二次开发中的一些东西。

在正式开始之前,得先说一句,开发大华插件中遇到的最大问题不是代码上的问题而是插件版本过多,算上公司找官方提供的二次开发包加上我自己在网上搜罗的一些总共有五六种不同的开发包,甚至网上流传的可能有更多,不同的开发包使用着不同的插件及文档,在提供的方法上也有很多的不同,因此在开发对应的需求上就相应地遇到了很多困难,就比如插件中获取通道列表这个方法在我获得的好几个版本的开发包的文档中就没有提供相应的方法,直到最后一次于大华公司研发的负责人交流才拿到相对全面的最新开发包,这才解决了对大华视频插件开发的首要问题。

环境与设备支持

首先放一下我获取到的相对来说较为全面的大华视频开发包连接:https://pan.baidu.com/s/1CPA-wm0WBmb2WDYHaSNdJw    

密码:ix41

与海康威视视频插件的文档不同,大华插件提供的二次开发文档中并没有关于插件运行环境方面相关的内容,但根据本人实测目前高版本的Firefox和Chrome是不能支持该插件的,因此对于该插件的使用可以对比海康插件,大华插件除了没有浏览器位数的限制,其他的就对照海康控件的来,选用低版本的浏览器或者直接使用IE浏览器。

demo

 

 快速二次开发

首先是test.html

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <meta http-equiv="Pragma" content="no-cache" />
 7     <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
 8     <meta http-equiv="Expires" content="0" />
 9     <script>
10         document.write("<link type=\'text/css\' href=\'../css/demo.css?version=" + new Date().getTime() + "\' rel=\'stylesheet\' />");
11     </script>
12 </head>
13 <body>
14 <div id="divPlugin" class="plugin"></div>
15 </body>
16 <script src="../lib/jquery-1.7.1.min.js"></script>
17 <script src="../module/foundation.js"></script>
18 <script src="../module/WebVideoCtrl.js"></script>
19 <script src="test.js"></script>
20 </html>

在这里需要说明一点的是,大华视频提供插件的方法相对海康提供的方法来说是更加简洁的,但是与之相对的,对于错误信息的提示并没有如海康一样通过回调方法中的error参数给出,而是一股脑的将其塞到日志文件中去,该日志可以在C:\Program Files (x86)\webrec\WEB30\WebPlugin目录下的log和sdk_log文件夹下找到,但是在文档中对日志信息也没有什么解释,对于不理解它的日志信息的人来说,处理报错可能是一种困难,需要咨询官方人士。

test.js

 1 $(function() {
 2     initialValue = new Object();
 3     initialValue.g_iWndIndex = 0;
 4     initialValue.szDeviceIdentify = \'\';
 5     initialValue.deviceport = \'\';
 6     initialValue.rtspport = \'\';
 7     initialValue.channels = [];
 8     initialValue.ip = \'\';
 9     initialValue.port = \'\';
10     initialValue.username = \'\';
11     initialValue.password = \'\';
12     dh_initPlugin();
13     dh_login(initialValue);
14 })
15 //初始化
16 function dh_initPlugin(){
17     WebVideoCtrl.insertPluginObject("divPlugin", 1300, 800);
18     WebVideoCtrl.initPlugin();
19     //设置窗口分割数
20     WebVideoCtrl.setSplitNum(1);
21     //设置双击可全屏功能
22     WebVideoCtrl.enablePreviewDBClickFullSreen(true);
23 }
24 function dh_login(initialValue){
25     if ("" == initialValue.ip || "" == initialValue.port) {
26         return;
27     }
28     initialValue.szDeviceIdentify = initialValue.ip + "_" + initialValue.port;
29     szDeviceIdentifyFlag = initialValue.szDeviceIdentify;
30     var port = parseInt(initialValue.port);
31     var ret = WebVideoCtrl.login(initialValue.ip, port, initialValue.username, initialValue.password, 0);
32     if (ret != 0) {
33         alert("登录失败:"+ret);
34         return;
35     }
36     /** 该方法用于获取NVR下的通道列表
37     var channelRet = WebVideoCtrl.getAllChannelInfo();
38     var arr = [];
39     for (var i = 0; i < channelRet.length; i++) {
40         var channelInfo = channelRet[i];
41         var channelMsg = {
42             "id": channelInfo.Channel,
43             "title": channelInfo.ChannelName,
44             "ipaddress": initialValue.szDeviceIdentify,
45             "brandNum": brandFlag,
46             "initialValue": initialValue,
47         }
48         arr.push(channelMsg);
49     }*/
50     dh_startRealPlay();
51 }
52 function dh_startRealPlay(){
53     /**
54      * 参数依次分别为通道号,码流,窗口数
55      */
56     WebVideoCtrl.connectRealVideoEx(1, 1, 0);
57 }

经验总结及部分错误展示

  • 控制台报错:

原因及解决方法:发生此问题的原因是由于,foundation.js没有导入或者导入时放在了WebVideoCtrl.js的下面,页面加载js文件时会先从上层加载到下层,这样在WebVideoCtrl用到的foundation.js的方法就无法加载进来。将其放到WebVideoCtrl.js的上面导入即可。

  • 控制台报错:

    原因及解决方法:发生这问题时,本人还着实困扰了一下,这问题在IE上面不出现,而在较低版本的Firefox和Chrome上有,百度报错信息也尽是一些毫不相干的内荣,最后仔细查看发现是在登录时传参时参数类型出了问题,需要注意在WebVideoCtrl.js中参数的说明,以字母i开头的参数说明是纯数字,以s开头的参数说明是字符串,切勿传参时,类型弄错。

  • 日志报错:

    原因及解决方法:这个报错信息是插件未登录,登录就行。

  • 此外,如果将大华插件和海康插件方法放在一个页面使用的话需要注意,他们的插件方法的对象名是相同的,想要使用的话需要更改其中一个的对象名称。