preface

In the process of development, I met the call of HIkvision SDK and encountered some pits, which is hereby recorded.

Vue call

Modify the

Public /index.html file <div id="app"></div> <script ID ="videonode" SRC ="<%= BASE_URL %> webVideoctrl.js "></script>Copy the code

You need to put webVideoctrl.js in the public folder

Note: don’t forget to put the jsplugin-1.0.0.min.js file

Then it can be called in Mounted. Make sure you don’t call a “created” invocation because it causes an error.

About debugging

Because hikang own demo has a Nginx, in fact, can use their own, his main principle is to use Nginx for a layer of forwarding.

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

$cookie_webVideoCtrlProxy is a cookie message written by hikon SDK. The content is the IP address of the hikon hard disk that you log in to.

Strange problems during debugging

Since it was a VUE project, a local development server was started, but it was always cross-domain because of different ports. Toss about for a long time, have not solved, finally through the way of nginx reverse proxy processing.

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;
}
Copy the code

Hikvision video flash problem

In the project, as long as there is a scroll bar, the video will flash during the scrolling process, and the same problem will occur in the official DEMO. For this reason, IScroll is used to solve this problem, and all virtual scrolling is used.