下载官方sdk
官网免费下载,下载前需要先登录,没账号注册一个即可,地址:海康开放平台 (hikvision.com)
集成到Vue项目中
打开下载的sdk文件夹,打开webs/codebase
,删掉这三项:
然后将整个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>
然后就可以根据需求,复制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:
修改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
是硬盘录像机的地址:
在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
是:
看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!
点击预览,🙄有问题,socket连接不上:
能力有限搞了半天,没找到问题所在,有知道怎么回事的大佬麻烦赐教一下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;
}