关于海康威视SDK在VUE中的使用前言在开发过程中遇到了海康威视SDK的调用，遇到了一些坑，特此记录一下。讲述了视频闪

前言

在开发过程中遇到了海康威视SDK的调用，遇到了一些坑，特此记录一下。

vue调用

修改

public/index.html文件

<div id="app"></div>
<script id="videonode" src="<%= BASE_URL %>webVideoCtrl.js"></script>

需要将webVideoCtrl.js 放到public文件夹下

注意：不要忘记放jsPlugin-1.0.0.min.js文件

然后就可以在mounted里调用了。切记不要在created下调用，会报错。

关于调试

因为海康自带的demo中有个nginx，其实可以用自己的，他的主要原理就是利用nginx进行了一层转发。

location ~ /ISAPI|SDK/ {
    if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
      proxy_pass http://$cookie_webVideoCtrlProxy;
      break;
    }
}

$cookie_webVideoCtrlProxy就是海康SDK写的一个cookie信息，内容为你登录的海康硬盘机的IP地址。

调试过程中奇怪的问题

因为是VUE的项目，启动了一个本地开发服务器，但是因为端口不同，一直跨域。折腾了很久，都没有解决，最后通过nginx反向代理的方式处理了。

location / {
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:9528/;
    proxy_redirect default;
}

海康威视视频闪动的问题

在项目中，只要是出现了滚动条，滚动过程中视频就会出现闪动的问题，官方的DEMO 中也会出现同样的问题，为此，使用IScroll解决了此问题，全部使用虚拟滚动。