技术资讯

海康威视Web3.0控件开发经验及问题总结及插件下载

TIME:2019-09-02

最近在给公司平台写视频监控的页面需求,于是接触到了海康威视的视频控件,网上查阅一番资料后,发现有很多大佬们给出了简易的海康视频控件的上手方法,但是发现仍然有很多地方没有总结到,于是在这里对我个人对海康控件开发的经验做出一点总结。话不多说现在开始。

1|0运行环境与设备支持


海康控件开发包链接:

32位浏览器:

https://pan.baidu.com/s/160ia40-hlFd1MynbxSBI2Q  密码:d3pf

64位浏览器:

https://pan.baidu.com/s/1TbNHqfZSw9PPS4Z-xYvcoQ  密码:38qq

Web控件V3.0基于ActiveX和NPAPI开发,接口封装于JavaScript脚本,以JavaScript接口形式提供用户集成,支持网页上实现预览、回放、云台控制等功能。该控件仅支持B/S开发,不适用C/S开发。

Web控件V3.0支持多种我司设备,包括DVR、NVR、DVS、网络摄像机、网络球机等,设备需要支持PSIA或ISAPI协议。

该控件所需运行环境:

操作系统:WindowsXP、Windows7、Windows8、Windows8.1(实际上目前Windows10也可以用)

浏览器:

IE8~IE11、Chrome31+、Firefox35+,32位浏览器

IE8~IE11、Chrome31~Chrome44、Firefox35~Firefox51,64位浏览器

(ps:这里其实有很大的坑,浏览器一旦版本位数没有和插件对上,页面显示就会有问题,很多人没看清这点盲目上手就踩在了这一点上)

2|0demo


官方文档给的demo其实有很多我们不需要的方法,这就需要我们二次开发时,有选择的使用他所提供的方法

3|0快速二次开发


其实这方面已经有很多人给过差不多的代码,但我姑且还是在这里放一下简易开发的代码

首先是页面文件,页面需要导入官方的webVideoCtrl.js,建议将该文件放在官方给的codebase文件夹目录下一同导入项目中,运行项目时,该文件会自动寻找同目录下的其他文件。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctypehtml>
<html>
<head>
    <title></title>
    <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" />
    <metahttp-equiv="Pragma" content="no-cache" />
    <metahttp-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <metahttp-equiv="Expires" content="0" />
    <script>
        document.write("<linktype='text/css' href='css/demo.css?version=" + new Date().getTime() + "' rel='stylesheet' />");
    </script>
</head>
<body>
<divid="divPlugin" class="plugin"></div>
</body>
<scriptsrc="jquery-1.7.1.min.js"></script>
<scriptid="videonode" src="codebase/webVideoCtrl.js"></script>
<scriptsrc="test.js"></script>
</html>

接下来是js文件,其中四项参数username,password、ip、port分别对应登录所必须的用户名、密码、设备ip及端口号

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
// 初始化插件
$(function() {
    initialValue =newObject();
    initialValue.g_iWndIndex = 0;
    initialValue.szDeviceIdentify ='';
    initialValue.deviceport ='';
    initialValue.rtspport ='';
    initialValue.channels = [];
    /*这里是登录视频插件所需的四项参数*/
    initialValue.ip ='';
    initialValue.port ='';
    initialValue.username ='';
    initialValue.password ='';
    t_init(initialValue);
    t_login(initialValue);
})
  
// 初始化
functiont_init(initialValue) {
    // 检查插件是否已经安装过
    variRet = WebVideoCtrl.I_CheckPluginInstall();
    if(-1 == iRet) {
        alert("您还未安装过插件,双击开发包目录里的WebComponentsKit.exe安装!");
        return;
    }
    // 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin(500, 300, {
        bWndFull:true,
        iPackageType: 2,
        iWndowType: 1,
        cbInitPluginComplete:function() {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
        }
    });
}
  
functiont_login(initialValue) {
    if(""== initialValue.ip ||""== initialValue.port) {
        return;
    }
    initialValue.szDeviceIdentify = initialValue.ip +"_"+ initialValue.port;
    WebVideoCtrl.I_Login(initialValue.ip, 1, initialValue.port, initialValue.username, initialValue.password, {
        success:function(xmlDoc) {
            setTimeout(function() {
                t_getChannelInfo(initialValue);
                t_getDevicePort(initialValue);
            }, 10);
            setTimeout(function() {
                t_StartRealPlay(initialValue);
            }, 500)
        },
        error:function(status, xmlDoc) {}
    });
}
  
// 获取通道
functiont_getChannelInfo(initialValue) {
    initialValue.channels = []
    if(null== initialValue.szDeviceIdentify) {
        return;
    }
    // 模拟通道
    WebVideoCtrl.I_GetAnalogChannelInfo(initialValue.szDeviceIdentify, {
        async:false,
        success:function(xmlDoc) {
            varoChannels = $(xmlDoc).find("VideoInputChannel");
            $.each(oChannels,function(i) {
                varid = $(this).find("id").eq(0).text(),
                    name = $(this).find("name").eq(0).text();
                if(""== name) {
                    name ="Camera "+ (i < 9 ?"0"+ (i + 1) : (i + 1));
                }
                initialValue.channels.push({
                    id: id,
                    name: name
                })
            });
        },
        error:function(status, xmlDoc) {}
    });
    // 数字通道
    WebVideoCtrl.I_GetDigitalChannelInfo(initialValue.szDeviceIdentify, {
        async:false,
        success:function(xmlDoc) {
            varoChannels = $(xmlDoc).find("InputProxyChannelStatus");
 
            $.each(oChannels,function(i) {
                varid = $(this).find("id").eq(0).text(),
                    name = $(this).find("name").eq(0).text(),
                    online = $(this).find("online").eq(0).text()
                ip = $(this).find("ipAddress").eq(0).text(),
                    port = $(this).find("port").eq(0).text();
                if("false"== online) {// 过滤禁用的数字通道
                    returntrue;
                }
                if(""== name) {
                    name ="IPCamera "+ (i < 9 ?"0"+ (i + 1) : (i + 1));
                }
                vararr = {
                    "id": id,
                    "title": name,
                    "ipaddress": initialValue.szDeviceIdentify
                };
                IPaddress.push(arr);
            });
            console.log("获取数字通道成功!");
        },
        error:function(status, xmlDoc) {
            console.log("获取数字通道失败!");
        }
    });
    // 零通道
    WebVideoCtrl.I_GetZeroChannelInfo(initialValue.szDeviceIdentify, {
        async:false,
        success:function(xmlDoc) {
            varoChannels = $(xmlDoc).find("ZeroVideoChannel");
 
            $.each(oChannels,function(i) {
                varid = $(this).find("id").eq(0).text(),
                    name = $(this).find("name").eq(0).text();
                if(""== name) {
                    name ="Zero Channel "+ (i < 9 ?"0"+ (i + 1) : (i + 1));
                }
                if("true"== $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
                    console.log("id:"+ id +",name:"+ name);
                }
            });
            console.log("获取零通道成功!");
        },
        error:function(status, xmlDoc) {
            console.log("获取零通道失败!");
        }
    });
}
  
// 获取端口
functiont_getDevicePort(initialValue) {
    if(null== initialValue.szDeviceIdentify) {
        return;
    }
    varoPort = WebVideoCtrl.I_GetDevicePort(initialValue.szDeviceIdentify);
    if(oPort !=null) {
        initialValue.deviceport = oPort.iDevicePort;
        initialValue.rtspport = oPort.iRtspPort;
    }
}
  
// 开始预览
functiont_StartRealPlay(initialValue) {
    varoWndInfo = WebVideoCtrl.I_GetWindowStatus(initialValue.g_iWndIndex),//获取当前窗口的状态
        iChannelID = initialValue.channels[0].value
  
    if(null== initialValue.szDeviceIdentify) {
        return;
    }
  
    varstartRealPlay =function() {
        WebVideoCtrl.I_StartRealPlay(initialValue.szDeviceIdentify, {
            iRtspPort: initialValue.rtspport,
            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();
    }
}

4|0错误总结


首先,还是再强调一点,海康威视的插件时根据浏览器位数来的,而不是根据电脑系统位数,比如你用的64位系统,装的32位浏览器,使用插件时就必须要使用32位插件。海康威视WEB3.0多版本开发控件中包含官方控件:CH_32位、CH_64位、以及CN_64位。其中还包含官方指定的测试浏览器火狐浏览器多版本,4.00/45.0/50.0.1  IE浏览器IE7  32位、64位,所以在进行二次开发时,一定要注意插件版本于浏览器是否适配的问题。

(1)页面控制台报错:/ISAPI/Security/sessionLogin/capabilities?username=admin Failed to load resource: the server responded with a status of 404 (Not Found)

  解决方法:引用js是否有问题,查看页面js是否引入路径,是否全面正确。

    使用的浏览器是否正确,仔细查阅官方注意事项中要求使用的浏览器。

    如果排查没有上述错误,而且你使用的nginx,请查看压缩文件中的nginx文件,配置你的nginx.conf内容,可以试着加上这一段,实现路径的跳转

?
1
2
3
4
5
6
7
8
9
10
11
location ~ /ISAPI|SDK/ {
 
    if($http_cookie ~"webVideoCtrlProxy=(.+)") {
 
           proxy_pass http://$cookie_webVideoCtrlProxy;
 
            break;
 
    }
 
}


(2)控制台报错:TypeError: c.HWP_GetLocalConfig is not a function

  解决方法:这个报错的原因是因为浏览器没有激活插件,将其激活就行了。

(3)demo操作信息报错:设备不支持Websocket取流!

     demo操作信息及控制台同时报错:403错误

  解决方法:请换个浏览器。。。。。。请使用官方文档给出的浏览器

(4)demo操作信息:获取零通道失败!(403, invalidOperation)

    获取数字通道失败!(403, invalidOperation)

    获取模拟通道成功

    登录成功

  解决方法:如果只是操作界面报错而控制台没有报错,点击开始预览便能看到视频了。。。

5|0最后


刚开始进行二次开发海康控件时走了不少弯路,光顾着网上找资源了,忽略了官方文档的查阅,现在回头看来是浪费了不少时间。这篇博文作为我入职以来第一篇博文,对我来说也有着深刻警醒的意义,希望今后的我也能保持初心,时刻关注着技术,警醒自己不要止步、安于现状。

上一篇

秦皇岛比较好的软件公司-秦皇岛时讯软件

下一篇

win10系统下海康插件不兼容无法预览如何解决
版权信息:Copyright © 2014 All rights reserved 秦皇岛时讯科技有限公司. 冀ICP备09010373号