海康-WEB无插件开发包，避坑记录

首先确保你的交换机(海康叫脑机)和本机在同一个网段中，可以使用交换机IP访问WEB管理页面：

登陆之后进去配置》网络》高级配置》找到启动WebSocket，如果没有该项可能是你的交换机不支持WebSocket，就不能使用下面的方法。

海康SDK下载地址：海康开放平台

不建议去使用右侧的开发包，只支持低版本浏览器，尝试了几个低版本浏览器支持NPAPI但不支持显示Vue项目 ；

下载左侧“WEB无插件开发包”解压之后按照里面提供的方式运行项目，运行地址改成本地IP加端口，这里只有任务管理器中出现nginx.exe才算运行成功，否则去检查端口是否被占用。

 

运行成功之后的界面：

我的项目是在Vue项目里面使用iframe嵌套时时录像进去，打开自己的vue项目并添加nginx运行的页面：

Vue项目使用npm run serve命令在本地运行的时候，选择使用IP的方式访问，否则会出现跨域问题，网上有其它部署的方式，我时觉得就使用这种方式最方便。

 

 

 另外我嵌套进去的页面只需要显示录像，就直接使用海康提供的demo页面了，有几个地方需要注意： 

 demo-sasy页面需要添加这几个js路径，在demo.html中去找了复制过来。

这里是访问交换机的参数，修改一下运行就行。

单独查看的效果：

 嵌套进Vue项目之后的效果：