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

3,559 阅读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文件配置,注意直接用记事本会有编码问题,建议用notepadvscode

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;  
}