简介海康威视 WEB 无插件开发包 V3.2 面向需要在网页端集成视频监控能力的开发者尤其适合对接高版本谷歌、火狐浏览器的项目场景。该版本摒弃传统插件依赖要求设备支持 Websocket 取流并需借助 nginx 代理服务器完成部署可解决旧版控件在新型浏览器中无法加载、兼容性差的问题。压缩包共 75 个文件约 9.42MB以 24 个 js 脚本、4 个 xml 配置、4 个 html 页面为主另含 exe 可执行程序、license 授权文件、pdf 开发文档及 nginx 相关 conf、bat 启动脚本等覆盖前端调用、服务代理与运行环境配置。资源内附控件开发包编程指南与 Demo 测试文档便于理解接口调用方式与部署流程。目前已有 6733 人学习下载适合具备一定前端与网络基础、需要快速搭建无插件视频预览环境的开发者参考。1. 海康威视 WEB无插件开发包 V3.2 环境落地从版本选型到跑通预览接手一个安防预览项目时前端同事甩过来一句“用海康的 WEB 无插件开发包 V3.2 就行”听起来像装个 npm 包一样轻松。真到部署环节才发现这套东西对浏览器版本、运行库、端口和证书的挑剔程度比想象中高不少。装不好最典型的表现是页面能打开但视频窗口一片黑控制台报WebSocket connection failed或者Sdk failed to load排查半天找不到入口。这篇笔记面向需要在本地或内网环境把海康威视 WEB 无插件开发包 V3.2 跑起来的开发者从环境清单、依赖安装、参数配置一路写到验证和排错。整套流程我在 Windows 和 Linux 服务端都走过一遍下面按实际落地顺序展开。2. 环境准备V3.2 对浏览器和运行库的硬性要求2.1 先确认版本与组件构成海康威视 WEB无插件开发包 V3.2 的核心思路是把原来依赖本地 ActiveX 控件的预览能力改成基于 WebSocket WebAssembly 的纯浏览器方案。拿到手的包通常包含几个部分webSdk前端 JS 库、nginx或iis的代理配置示例、一个负责和摄像机通信的本地服务程序以及一份demo页面。V3.2 相比早期 2.x 版本最大的变化是弱化了对 IE 的依赖转向 Chrome 内核同时对 WebSocket 代理的配置要求更明确。选版本时要注意如果你的摄像机固件比较老只支持 RTSP 而不支持 ISAPI 的 WebSocket 通道那 V3.2 的无插件方案可能跑不通得先确认设备侧能力。常见做法是登录摄像机 Web 后台看“网络-高级配置”里有没有 WebSocket 或 ISAPI 相关选项。没有的话要么升级固件要么退回带插件的旧方案。2.2 浏览器与系统运行库清单这套开发包对浏览器不是“能打开网页就行”。实测下来Chrome 80 以上、Edge 80 以上比较稳Firefox 在部分版本上 WebAssembly 加载会慢半拍。IE 直接放弃V3.2 不再保证兼容。系统层面Windows 服务端需要装 Visual C 运行库2015-2022 合集否则本地服务程序启动时会提示缺少vcruntime140.dll。Linux 服务端则要确认glibc版本不低于 2.17并且开放 WebSocket 用的端口。下面这张表是我整理的最低环境对照照着核对能省掉一半返工。项目Windows 端Linux 端操作系统Win10 1903 / Server 2016CentOS 7.6 / Ubuntu 18.04浏览器Chrome 80 / Edge 80Chrome 80运行库VC 2015-2022glibc 2.17端口服务端口 WebSocket 端口同左需防火墙放行证书建议 HTTPS建议 HTTPS提示如果页面通过 HTTPS 访问而 WebSocket 服务是 HTTP浏览器会直接拦截混合内容视频窗口必黑。这一点在 V3.2 里尤其明显。2.3 安装前的目录规划我一般会把开发包解压到一个不含中文和空格的路径比如D:\hik_web_sdk_v3.2或/opt/hik_web_sdk_v3.2。中文路径在部分本地服务程序里会引发读取失败属于典型的玄学问题但确实遇到过。目录里通常有demo、sdk、service三个子目录后面配置代理时路径要对得上。3. 安装与配置把 WebSocket 代理和前端 SDK 接起来3.1 部署本地服务程序先处理服务端。以 Windows 为例进入service目录找到可执行文件一般叫HikWebService.exe或类似名字。直接双击之前先确认端口没被占用。我习惯先用命令行看一下# Windows 下检查端口占用假设服务默认监听 8080 netstat -ano | findstr :8080 # Linux 下等价操作 ss -lntp | grep 8080如果端口被占要么改服务配置文件里的端口要么停掉占用进程。服务程序的配置文件通常是同目录下的config.ini或service.json里面有几个关键项监听端口、摄像机 IP 段、日志级别。日志级别建议先设成debug排错时能看到 WebSocket 握手细节跑通后再调回info。启动服务后别急着开浏览器先用curl或浏览器直接访问一下服务端口看有没有返回。返回 404 都算正常说明服务活着连接被拒绝才是真没起来。3.2 配置 Nginx 反向代理V3.2 的 demo 页面和 WebSocket 服务通常不在同一个端口跨域和混合内容问题都靠反向代理解决。下面是一段我常用的 Nginx 配置把静态页面和 WebSocket 都代理到同一个入口server { listen 443 ssl; server_name local.hikdemo.test; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; # 静态 demo 页面 location / { root /opt/hik_web_sdk_v3.2/demo; index index.html; } # WebSocket 代理路径要和前端 SDK 里配置的一致 location /websocket { proxy_pass http://127.0.0.1:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; proxy_read_timeout 3600s; } }这段配置里proxy_http_version 1.1和Upgrade头是 WebSocket 代理的必需项漏掉任何一个握手都会失败。proxy_read_timeout设长一点否则预览几分钟后会自动断流。location /websocket的路径不是固定的要和你前端 SDK 初始化时填的 WebSocket 地址保持一致常见做法是两边都写成/websocket。3.3 前端 SDK 初始化参数前端部分在 demo 页面里找到初始化 SDK 的代码通常在index.html或main.js里。核心是填对 WebSocket 地址和摄像机信息// 初始化海康 WEB 无插件 SDK const sdk new HikWebSdk({ // WebSocket 地址走 Nginx 代理时用相对路径或域名 wsUrl: wss://local.hikdemo.test/websocket, // 摄像机登录信息 ip: 192.168.1.64, port: 8000, username: admin, password: your_password, // 预览通道一般 1 为主码流 channel: 1, // 日志开关排错时打开 debug: true }); // 绑定到页面容器 sdk.preview(video-container);wsUrl用wss://而不是ws://是因为页面本身是 HTTPS混合内容会被拦。port是摄像机 SDK 端口不是 Web 端口默认 8000改过的话要对应。channel填错会导致预览黑屏但无报错属于隐蔽坑。debug: true打开后浏览器控制台会打印 SDK 内部状态排错时非常有用。3.4 摄像机侧参数核对服务端和前端都配好后还要回头确认摄像机本身。登录摄像机 Web 后台检查这几项WebSocket 是否启用、ISAPI 是否启用、用户是否有远程预览权限。有些设备默认关闭 ISAPI需要手动打开。另外摄像机时间如果和服务器差太多WebSocket 鉴权可能失败常见做法是两边都开 NTP 同步。4. 避坑与排查V3.2 部署中最容易翻车的五个点4.1 现象页面加载正常视频窗口全黑控制台无报错原因通常是摄像机通道号填错或者码流类型不对。V3.2 默认走主码流如果摄像机主码流是 H.265 而浏览器不支持也会黑屏。解决方法是先把channel改成 1码流类型在 SDK 参数里显式指定为sub试一下或者把摄像机主码流临时改成 H.264。4.2 现象控制台报WebSocket connection failed先看 Nginx 的Upgrade和Connection头有没有配。再看服务程序是否真的在监听。最后确认防火墙有没有放行 WebSocket 端口。这三步按顺序查基本能定位。还有一种情况是证书不受信任浏览器静默拦截了wss换成受信任证书或先在浏览器里手动信任一次。4.3 现象服务程序启动报缺少vcruntime140.dllWindows 端没装 VC 运行库。装 2015-2022 合集版即可。Linux 端对应的是glibc版本过低升级系统或换更高版本的基础镜像。这个坑在新装的干净系统上特别常见。4.4 现象预览几秒后自动断开proxy_read_timeout太短或者摄像机侧有连接数限制。把 Nginx 的超时调到 3600s同时确认摄像机允许的并发预览路数没超。有些低端设备只允许 1-2 路同时预览多开一个页面就会踢掉前一个。4.5 现象SDK 加载失败提示Sdk is not defined前端 JS 文件路径不对或者 Nginx 静态目录配错。打开浏览器 Network 面板看webSdk.js有没有 404。有的话检查root路径和实际文件位置是否一致。另外V3.2 的 SDK 文件必须通过 HTTP/HTTPS 加载直接file://打开 HTML 会失败。5. 验证跑通用最小 demo 确认整条链路装完之后别急着往业务页面里集成。先拿开发包自带的 demo 跑一遍确认从浏览器到摄像机整条链路是通的。具体做法把 demo 页面通过 Nginx 访问打开浏览器控制台观察 SDK 初始化日志。正常的话会看到 WebSocket 握手成功、登录成功、开始拉流几条日志视频窗口在 2-3 秒内出画面。如果 demo 能跑通但业务页面不行问题基本在前端集成方式上跟环境无关。这时候重点查 SDK 初始化参数和容器尺寸。容器高度为 0 是另一个隐蔽坑视频窗口会“存在但看不见”。验证时我习惯用一个检查清单过一遍检查项预期结果服务程序进程存在且端口监听Nginx 代理静态页面 200WebSocket 101浏览器控制台无failed关键字视频窗口3 秒内出画面断流重连拔网线再插回能自动恢复最后一项容易被忽略。V3.2 的 SDK 自带重连机制但依赖 WebSocket 代理不断开。如果 Nginx 超时设太短重连会失败。我一般会把超时设成 3600s并且在业务代码里加一个手动重连按钮兜底。从那以后我每次部署海康这套无插件包都强制先跑一遍自带 demo再动业务代码。这个习惯帮我省掉了至少三次“以为是代码问题、其实是环境没通”的无效排查。希望帮到你。本文还有配套的精品资源点击获取
