海康威视web无插件开发包webVideoCtrl.js+vue做网页开发

        最近项目需要在网页上预览海康的摄像头实时画面，遇到一些问题和踩了一些坑，在这里梳理一下。

        我本次前端开发使用的是vue-admin-template。

一、上来第一步，先不要着急开发，先看看公司的摄像头是否支持websock取流！。

        这是海康客服发来的图片，可能页面显示不太一样，但是 【启用WebSocket】 这一项必须要有，如果没有，那就放弃使用web无插件开发包吧。

        还有一种方法，就是启动开发包的demo，登录自己的摄像头，看看能不能预览

 二、去官网下载海康的web无插件开发包

海康开放平台

如果没账号就注册一个，免费下载，不需要在其他地方付费买

 三、项目中引入开发包

        这是下载的开发包，我们需要的是codebase里边的所有文件以及外侧的jquery-1.7.1.min.js（由于demo里引用的是这个jquery，所以我为了避免一些不必要的版本问题，也引入的该文件）。有时间的可以多研究下cn目录下的demo，对开发有帮助。

 在public目录下，引入文件

index.html 中引入

        由于web无插件开发包使用的是nginx代理服务器，暂未研究node怎么实现，所以用的比较繁琐的方式：将开发包的nginx1.10.2放在自己项目的同级目录下，项目频繁打包调试。

目录结构

配置nginx的config本机地址和端口，root指向vue的打包文件dist