admin管理员组文章数量:1558058
更新时间:2020年9月18日
前言
博主自从写了这篇文章到现在,有好多友友来问我问题,以及我自己也在不断的尝试开发。现在我归纳一下从17年到现在我遇到的问题和友友们遇到的问题以及一些资料总结。
资料
①:3.0开发包:https://download.csdn/download/yeyunfancy/9980157
②: 1.0.6和1.0.9插件和关键代码文件:https://cloud.189/t/JZ3yUv7BVzay
③:全兼容开发包:https://wwwblogs/huangwei1061047046/p/11190514.html
④:node代理:https://cloud.189/t/NraieamEvAFf
这里的下载地址除了csdn上的永久有效。
版本差异
1、1.0.6版本兼容双核浏览器。但是需要插件和代码一致,具体可查看资料2中的备注。
2、1.0.9仅支持IE内核浏览器
3、全兼容开发包:支持IE或谷歌或火狐。在非IE浏览器中使用websocket取流和session认证。 这样就可以实现无插件开发。但是需要注意一点的是,全兼容开发包需要硬件端的支持。也就是说如果硬盘机和摄像头不支持websocket取流和session认证的话,在非IE浏览器下无法使用。
问题和解决办法
问题:为什么非全兼容包无法运行在谷歌。
解决:因为谷歌在70版本后(如果没记错)去除了NAAPI技术的支持,而非兼容插件需要依赖于NAAPI技术,所以导致谷歌无法使用该插件。
问题:为什么抓拍功能和录像功能等无法使用,函数一直返回undefined。
解决:因为WebComponentsKit.exe插件版本过高。也许你浏览过官方的web端,下载下来的WebComponentsKit.exe肯定是最新版的,但是最新版的WebComponentsKit.exe无法兼容1.0.6的webVideoCtrl.js。经过测试,我下载过【3.0.6.1】、【3.0.6.2】两个版本。只有3.0.6.1版本兼容1.0.6的webVideoCtrl.js。如果你安装过新版的WebComponentsKit,请卸除干净安装旧版的。资料下载①里面的WebComponentsKit是3.0.6.1。因此,在开发过程中,需要把插件版本监测的代码去除。每个webVideoCtrl.js都有与之对应的WebComponentsKit.exe插件。请读者在开发时注意。
全兼容开发包的使用
1、单纯的开发使用
开发包中包含nginx程序,开发者可以运行nginx,然后通过访问127.0.0.1即可访问到页面,填入正确的信息后就可以正常使用。这里有个前提是,你访问的前端地址需要经过nginx,这样才不会触发跨域问题。
2、二次开发
如果你想在demo的基础上进行二次开发,例如使用vue、webpack或者其他的方法。在开发的时候开发者首先应该会碰到一个404的问题或者跨域的问题。这里给出解决方案。
1)、404问题。这个会出现在/ISAPI/Security/sessionLogin/接口调用的时候。这个问题是因为webVideoCtrl.js这个文件中在发起请求前对请求地址进行了重定向操作。你可以通过修改该文件的第220行左右的t和n参数来避免。这里的IP和端口一般就是你页面中填写的登录IP和端口。
这里博主说明一下,博主使用的这个webVideoCtrl.js就是上面资料3中开发包里的文件,但是我在其他友友的项目中有看到另外一份webVideoCtrl.js代码。那份代码中,对WebVideoCtrl.I_InitPlugin函数扩展了一个proxyAddress的参数。这个参数可以在不修改webVideoCtrl.js文件的条件下修改请求IP+端口。所以开发者在修改的时候可以注意一下自己使用的webVideoCtrl.js是否可以使用proxyAddress。这里不建议使用proxyAddress。在谷歌模式下,当登录成功后,视频流是通过websocket进去获取的,当你使用proxyAddress进行xmlhttprequest代理的时候会顺带强制代理websocket,导致websocket无法使用。所以建议使用者修改还是直接在webVideoCtrl里修改,亦或者自己往webVideoCtrl里新增一个字段专用于ajax的代理。
se = function (e) {
var t = location.hostname, n = location.port || "80";
return /^(http|https):\/\/([^\/]+)(.+)$/.test(e) && (e = e.replace(RegExp.$2, t + ":" + n)), f.cookie("webVideoCtrlProxy", RegExp.$2, {raw: !0}), e
// return e;
}
2)、跨域问题。上述404问题通过修改IP之后。开发者在使用调用方法后将会提示一个跨域问题。为什么会跨域?那是因为你请求的地址和你页面地址不是同源,浏览器基于同源策略禁止了你访问。这里需要说一点:在无插件开发的情况下,webVideoCtrl请求的地址为海康硬盘机的IP。除非你能让你的页面和海康硬盘及访问的IP:port同源,不然在不借助第三方的情况下,基本上跨域问题无法解决。所以这里提供两个方案。
2.1)、使用Nginx进行代理。这个博主有进行过一定程度的测试,但是一直无法使用。不清楚原因在哪。
2.2)、使用Node编写代理服务。node代理服务源码位于资料4中,这个是博主自己编写的简易代码。能允许你跨域访问,并且成功登陆和获取通道信息。下面基于node服务进行大致说明。
node服务主要文件有serverConfig.js和app.js。其中,serverConfig.js中进行了跨域处理的一些配置。
module.exports = {
port:54684, // node代理服务启动端口.可以修改为任意你需要的端口
proxy:{
'/':{
target:"http://192.168.4.167:80", // 页面登录时填写的IP和端口,也就是网络硬盘机访问的IP+端口。
changeOrigin:true,
ws:true,// 是否允许websocket
pathRewrite:{
}
}
}
}
app.js中,重点需要注意的是跨域处理。首先需要允许Origin参数,这里这个参数不能使用“*”来配置,而需要根据访问地址动态变化,具体原因后面再说。其次Headers中也需要列出会涉及的请求头,而不能使用“*”配置。因为当Origin为详细域名的时候,headers就不能使用“*”。Credentials则是允许浏览器进行跨域cookies携带。
// 不完全跨域处理代码
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", req.headers['origin']);
res.header("Access-Control-Allow-Headers", "X-Requested-With, If-Modified-Since, content-type,deviceidentify");
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-Methods", "*");
});
到这里,我们执行npm run start运行node服务,然后将前端请求的地址IP和端口改为127.0.0.1:54684。然后我们输入登录信息并点击登录,通过F12 的network面板我们可以看到,我们/ISAPI/Security/sessionLogin/capabilitie这个接口可以正常请求了,但是在请求/ISAPI/Security/sessionLogin这个接口的时候,浏览器报错,提示400。这是为什么?这是因为硬盘机对浏览器发送的options预检不做响应处理导致的。所以我们需要在node服务端对options这个预检操作进行统一处理。
// 完整跨域处理
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", req.headers['origin']);
res.header("Access-Control-Allow-Headers", "X-Requested-With, If-Modified-Since, content-type,deviceidentify");
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-Methods", "*");
if(req.method=="OPTIONS") res.sendStatus(200);/*让options请求快速返回*/
else next();
});
当我们通过上面的处理后,重新运行。现在登录成功了,可是在获取接口的时候又出现了问题。接口在疯狂报401错误。这个又是怎么了?这个原因在于:webVideoCtrl发起XMLHttpRequest的时候,cookies信息没有跟随请求导致硬盘机权限判定失败。那该如何处理?这个处理除了node跨域中开启Access-Control-Allow-Credentials:true外,还需要在webVideoCtrl第1007行左右。s.open()后更上s.withCredentials=true。允许XMLHttpRequest在进行跨域请求是携带上cookies。代码如下。
s.open(this.options.type, r, this.options.async),
s.setRequestHeader("X-Requested-With", "XMLHttpRequest"),
s.setRequestHeader("If-Modified-Since", "0"),
s.withCredentials = true,
s.send(this.options.data || null);
如果你的webVideoCtrl可以配置proxyAddress参数的话,那么上述的修改位置在1826行左右。代码如下:
s.open(this.options.type, r, this.options.async);
if (p.proxyAddress) {
s.withCredentials = !0;
var o = (e = this.options.url, /^(http|https):\/\/([^\/]+)(.+)$/.test(e) ? RegExp.$2: "");
s.setRequestHeader("deviceIdentify", o)
}
s.setRequestHeader("X-Requested-With", "XMLHttpRequest"),
s.setRequestHeader("If-Modified-Since", "0"),
s.withCredentials = true,
s.send(this.options.data || null);
到此,重新运行前端和node端后,你会发现现在能够正常的登录和获取通道信息。但由于博主的海康设备不支持websocket去流,所以无法测试后续功能,因此之后是否能够正常使用,需要各位自行测试。
-----------------------------------------以下是旧文章,以上述为准-----------------------------------------
项目中需要用到海康威视的web插件进行二次开发,但是在开发过程中遇到很多问题。这里整理几个比较典型的问题和解决方案。如果后续还有遇到会补充。
资料下载:
①:3.0开发包----->http://download.csdn/download/yeyunfancy/9980157
②:1.0.6版本webVideoCtrl.js。------>http://39.108.169.199:8080/webVideoCtrl.js
1、为什么海康官网提供的web端可以在双核浏览器的任意模式下运行,而我下载的web3.0开发包里面的就不行,在谷歌内核提示不支持NAAPI。
解:因为webVideoCtrl.js版本的问题,把代码格式化后拉倒最底下,会发现他的版本应该是1.0.9。我下载的是资料下载①里面的开发包,因为1.0.9的使用NAAPI,但是这个技术因为安全问题已经被绝大部分的浏览器都去除了。所以如果想要兼容双模式,下载资料下载②的js文件,并且替换开发包里的那个js文件。
2、为什么抓拍功能和录像功能等无法使用,函数一直返回undefined。
解:因为WebComponentsKit.exe插件版本过高。也许你浏览过官方的web端,下载下来的WebComponentsKit.exe肯定是最新版的,但是最新版的WebComponentsKit.exe无法兼容1.0.6的webVideoCtrl.js。经过测试,我下载过【3.0.6.1】、【3.0.6.2】两个版本。只有3.0.6.1版本兼容1.0.6的webVideoCtrl.js。如果你安装过新版的WebComponentsKit,请卸除干净安装旧版的。资料下载①里面的WebComponentsKit是3.0.6.1。因此,在开发过程中,需要把插件版本监测的代码去除。
更新时间:2019年10月25日11:06:41
1.0.6的webvIdeoCtrl.js下载地址:http://119.23.216.213/file/webVideoCtrl.js
给大家一个新版插件的地址---新版插件下载地址,这个插件可以兼容IE、火狐、谷歌、360的主流浏览器。楼主在测试过程中,发现之所以比旧版本更加兼容,是因为他在非IE浏览器中使用websocket取流和session认证。 这样就可以实现无插件开发。不过可惜的是它对硬盘机设备型号和版本有要求,跟海康技术联系后,海康技术表示这份插件现阶段仅支持仅少数的硬盘机设备。也就是基本上大部分设备都无法使用这个新版插件。与技术沟通如下:
如果大家想尝试可自行尝试,在测试过程中,如果遇到提示/ISAPI/Security/sessionLogin/ 404的问题,这个问题的原因在于插件在进行无插件请求的时候,把你的请求IP强制更改了,位置在webVideoCtrl.js的第220行左右。
se = function (e) {
var t = location.hostname, n = location.port || "80";
return /^(http|https):\/\/([^\/]+)(.+)$/.test(e) && (e = e.replace(RegExp.$2, t + ":" + n)), f.cookie("webVideoCtrlProxy", RegExp.$2, {raw: !0}), e
// return e;
}
就是以上这段代码。大家只要把t和n设置成需要请求的IP和端口就可以了。
---------------------------------------更新时间:2020年5月14日10:33:57---------------------------------
更新一下上面分享文件的地址,这个地址将会永久有效: https://cloud.189/t/JZ3yUv7BVzay
版权声明:本文标题:海康威视web插件【浏览器部分兼容& 全兼容】 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727375104a1111610.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论