基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

---

前言

项目最终效果为 可以预览，并且可以使用云台控制

购买的海康威视摄像头必须可以开启websocket

---

一、插件准备

插件下载地址

下载WEB无插件开发包V3.2,并加入到vue项目中。下载后解压包目录如下：

二、使用步骤

1. 将把webs下的整个codebase文件夹和jquery-1.7.1.min.js都复制到public文件夹下，在index.html下引入对应文件，必须引入的只有jquery-1.7.1.min.js和webVideoCtrl.js

这里我在public下创建了一个static文件夹，把需要用到的都放进去了

2. 行开发包中的nginx-1.10.2/start.bat

nginx启动端口可以自行修改；此处默认80，其中为了方便开发环境下测试，我把nginx-1.10.2放到与项目中文件夹同级，因此nginx的root路径设置为…/labvue/dist（项目打包路径，根据需要自行修改）。修改好后双击start.bat启动nginx

注意：
1.本地开发过程nginx服务必须运行
2.开发过程运行项目地址必须是本地ip地址，不能用localhost那个，否则登录不成功
3.开发过程想要预览监控视频，需要先打包，然后访问部署后的项目路径，访问ip必须是服务器ip地址，不能用localhost或者127.0.0.1，否则登录不成功

4. vue(用了element-ui),配置自己的webVideo.js和html
   (1) 在src下创建一个webVIdeo.js文件
   
   (2)初始化

注意：
1. id=“divPlugin” 必须设置，而且要有明确的宽高
2. beforeDestroy() { this.stopVideoPlay() },必须要退出预览，否则页面切换会出问题。

vue

<template>
  <div>
    <el-row>
      <el-col>
        <div id="divPlugin" class="divPlugin" style="width: 454px;height: 315px"/>
         <!-- 注意：Dom元素ID必须是divPlugin，不然会出问题  -->
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="el-button-group ">
          <div class="el-button primary" @mousedown="mouseDownPTZControl(5)" @mouseup="mouseUpPTZControl">左上</div>
          <div class="el-button primary" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl">向上</div>
          <div class="el-button primary" @mousedown="mouseDownPTZControl(7)" @mouseup="mouseUpPTZControl">右上</div>
        </div>
        <br/>
        <div class="el-button-group ">
          <div class="el-button primary" @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl">向左</div>
          <!--          <div class="el-button primary" @mousedown="mouseDownPTZControl(9)" @mouseup="mouseUpPTZControl">自动</div>-->
          <div class="el-button primary" @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl">向右</div>
        </div>
        <br/>
        <div class="el-button-group ">
          <div class="el-button primary" @mousedown="mouseDownPTZControl(6)" @mouseup="mouseUpPTZControl">左下</div>
          <div class="el-button primary" @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl">向下</div>
          <div class="el-button primary" @mousedown="mouseDownPTZControl(8)" @mouseup="mouseUpPTZControl">右下</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
   WebVideo} from '@/webVideo'

export default {
   
  name: "xxxxxx",
  data() {
   
    return {
   
      webVideo: ''