海康威视监控摄像头使用web无插件开发包调试记录

这篇文章应该是上周完成的，结果其他工作实在着急，以至于这篇文章才写完，当然这不是新的技术也不是什么教程，单单是记录自己走过的坑，为什么这么说呢哈~无论大华监控还是海康威视监控都是自己的webSDK，直接下载使用即可，然后我每隔一段时间再解除这个监控调用的问题总是有点小插曲，集成好的sdk不能直接调用摄像头IP地址，必须是NVR才行，所以此次记录下过程以免后续又双叒叕给忘了。

首先去官方下载插件开发包，以海康威视为例。如图，我需要的是webSDk无插件版，字面意思不需要额外的插件，即拿即用。

下载到本地，一般来说有三个文件【docs】、【nginx1.21+】、【webs】，我们需要的就是nginx的配置文件和webs文件代码。如果是本地测试那就不用往下看了，直接nginx，运行127.0.0.1即可访问，在页面输入硬盘录像机的IP地址和账号密码即可调用，如果需要在服务端测试请继续查看：

复制代码：

   add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
  add_header 'Cross-Origin-Opener-Policy' 'same-origin';
  add_header 'Cross-Origin-Resource-Policy' 'cross-origin';

放在宝塔面板网站配置文件里，一般来说放在root代码下面就行，如图：

这些HTTP响应头是用于增强Web应用安全性的跨域策略配置，主要涉及浏览器对跨域资源加载和窗口交互的控制。通俗易懂的解释就是：

防止别人偷偷搬你家东西；

防止弹窗窗口搞破坏；

你主动决定哪些东西可以借出去。

换句话说，其实不需要知道，能实现我们最终的目标即可，我是备注用的。接着重点来了，增加配置文件，复制代码：

    # 新增监控系统专用配置
        location ~ /ISAPI|SDK/ {
            # 保持设备的 Host 请求头
            proxy_set_header Host $host;
            # 保持设备的 Referer 请求头
            proxy_set_header Referer $http_referer;
            proxy_set_header Sec-Fetch-Site "";
            proxy_set_header Sec-Fetch-Mode "";
            proxy_set_header Sec-Fetch-Dest "";
            if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
                # Nginx 示例：删除 Sec-Fetch-* 字段
                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";
            # 保持设备的 Host 请求头
            proxy_set_header Host $host;
            # 保持设备的 Referer 请求头
            proxy_set_header Referer $http_referer;
            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;
            }
        }

这里我就不解释了哈，因为我也看不懂，总之就是保持请求需要socket协议等，直接复制然后在网站配置里，找个空白处粘贴，如图：

然后就可以打开网址去访问页面了，比如我，登录之后设置了监控的IP地址：192.168.110.64，可以登录成功，当然了，账号密码都对怎么可能登录失败，如图：

但是就不能显示监控内容，如图，一片空白：

这就是我为什么要记录此文，因为此处的IP地址必须得是硬盘录像机的地址才行，至于怎么获取录像机查看设备厂商吧，整理不赘述了，比如我的地址是：192.168.110.144，我们只需要IP地址和账号密码（硬盘录像机一般第一次安装会提示设置账号密码，不要问我哈），至于端口参数都不需要，输入完成IP地址和用户名密码后，点击【登录】，等待1-3秒，然后其他信息自动识别成功，已登录设备和通道会自动识别，我们最后点击【开始预览】，如图：

好了，大功告成了，其实我们并不需要操作什么，本地调试什么都不需要，集成包代码什么都不缺，唯独在服务器端使用我们需要配置下对应的nginx规则即可，配置正确视频调用就成功了，不正确会告知提示问题原因，另外说下，即使代码放在二级或者多级目录下也不需要修改配置规则，直接调用就行，不要问我为什么知道，我是不会告诉你我增加了目录后报错的丢人糗事，溜了溜了，有问题留言反馈吧~