海康监控web无插件版本开发记录

裹被吹空调
5,627 阅读2分钟

下载官方sdk

官网免费下载，下载前需要先登录，没账号注册一个即可，地址：海康开放平台 (hikvision.com)

image.png

集成到Vue项目中

打开下载的sdk文件夹，打开webs/codebase，删掉这三项：

image.png

然后将整个codebase文件夹和sdk下的jquery-1.7.1.min.js复制到项目根目录的public文件夹下。

打开index.html，添加：

<script src="./jquery-1.7.1.min.js"></script>
<script src="./codebase/encryption/AES.js"></script>
<script src="./codebase/encryption/cryptico.min.js"></script>
<script src="./codebase/encryption/crypto-3.1.2.min.js"></script>
<script id="videonode" src="./codebase/webVideoCtrl.js"></script>

image.png

然后就可以根据需求，复制webs/cn/demo.js和webs/cn/demo.html中对应的代码到vue文件了。

注意在开发模式下调试是有问题的，需要打包成dist用Nginx代理调试。

文章末尾记录了下在开发模式下进行调试的尝试过程，感兴趣可以探讨下。

关于登录失败的可能原因

  • 可能和cookie的长度过长有关。 在单独的vue项目里打包运行的时候登录预览很稳定，一直没有问题，但是集成到项目中之后出现了登录失败的问题，后来排查发现cookie中有个用户信息字段长度很长，把它删掉或者改短之后就没有问题了。

nginx配置

server_name字段配置不能用localhost或127.0.0.1，需要用本机IP地址。终端输入ipconfig，回车，可获取本机IP：

image.png

修改nginx/conf/nginx.conf文件配置，注意直接用记事本会有编码问题，建议用notepad或vscode

server{  
    listen 8081;  
    server_name 192.168.1.52;  # 此处需要配置本机IP，不能用localhost或127.0.0.1

    location / {  
        root 'D:/Project/hk-demo/dist'; # 直接修改到项目dist下，方便打包完直接测试
        # root './../webs';  # 海康demo原配置
        index index.html index.htm;  
        try_files $uri $uri/ /index.html;  
    }  

    location ~ /ISAPI|SDK/ {  
        if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {  
            proxy_pass http://$cookie_webVideoCtrlProxy;  
            break;  
        }  
    }  
    
    location ^~ /webSocketVideoCtrlProxy {  
        #web socket，必需
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection "upgrade";  
        proxy_set_header Host $host;  

        if ($http_cookie ~ "webVideoCtrlProxyWs=(.+)") {  
            proxy_pass http://$cookie_webVideoCtrlProxyWs/$cookie_webVideoCtrlProxyWsChannel?$args;  
            break;  
        }  
        if ($http_cookie ~ "webVideoCtrlProxyWss=(.+)") {  
            proxy_pass http://$cookie_webVideoCtrlProxyWss/$cookie_webVideoCtrlProxyWsChannel?$args;  
            break;  
        }  
    }  
}

直接在vue开发模式下调试（探索，没成功）

看了下nginx配置文件里一共有两处配置，一个是匹配到请求地址存在ISAPI或SDK，然后转发到http://$cookie_webVideoCtrlProxy，在浏览器network里查看变量$cookie_webVideoCtrlProxy是硬盘录像机的地址：

image.png

在vue.config.js配置为：

devServer: {  
    proxy: {  
        "/ISAPI": {  
            target: "http://192.168.1.200:80",
            changeOrigin: true,
        },  
        "/SDK": {  
            target: "http://192.168.1.200:80",
            changeOrigin: true,
        },
    },  
},

另一个就是webSocketVideoCtrlProxy了，这个在network里查看变量$cookie_webVideoCtrlProxyWs和$cookie_webVideoCtrlProxyWsChannel是:

image.png

看nginx配置里转发后的地址没有带webSocketVideoCtrlProxy，所以用pathRewrite删掉webSocketVideoCtrlProxy字符。另外这个是websocket，需要添加ws:true：

devServer: {  
    proxy: {  
        "/ISAPI": {  
            target: "http://192.168.1.200:80",
            changeOrigin: true,
        },  
        "/SDK": {  
            target: "http://192.168.1.200:80",
            changeOrigin: true,
        },
        "/webSocketVideoCtrlProxy": {  
            target: "http://192.168.1.200:7681/3601",
            changeOrigin: true,
            ws:true,
            pathRewrite: {
                '^/webSocketVideoCtrlProxy': ''
            }
        },  
    },  
},

好了，保存运行npm run dev试一下，点击登录，状态码200，登录接口提示登录成功，没问题good！

image.png

点击预览，🙄有问题，socket连接不上：

image.png

能力有限搞了半天，没找到问题所在，有知道怎么回事的大佬麻烦赐教一下orz。

最后还是直接打包然后用nginx代理进行调试。为了方便调试，root直接改到项目下的dist，减少一点复制粘贴的时间：

location / {  
    root 'D:/Project/hk-demo/dist';
    # root './../webs';  # 海康demo原配置
    index index.html index.htm;  
    try_files $uri $uri/ /index.html;  
}
avatar
文章
阅读
粉丝