海康威视web插件【浏览器部分兼容& 全兼容】

2023-11-02

更新时间：2020年9月18日

前言

博主自从写了这篇文章到现在，有好多友友来问我问题，以及我自己也在不断的尝试开发。现在我归纳一下从17年到现在我遇到的问题和友友们遇到的问题以及一些资料总结。

资料

①：3.0开发包：https://download.csdn.net/download/yeyunfancy/9980157

②： 1.0.6和1.0.9插件和关键代码文件：https://cloud.189.cn/t/JZ3yUv7BVzay

③：全兼容开发包：https://www.cnblogs.com/huangwei1061047046/p/11190514.html

④：node代理：https://cloud.189.cn/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.net/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.cn/t/JZ3yUv7BVzay

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)