海康视频监控基于web无插件开发包 3.2 实现预览、云台控制等功能(vue3)

07-03 1206阅读

实现过程
1. 登入海康开发者平台下载 WEB无插件开发包 V3.2
2. 在index.html文件中引入需要的JS开发包，注：开发包文件需要放在public 文件夹下:
1. 配置nginx :将开发包的nginx1.10.2放在自己项目的同级目录下，项目频繁打包调试。
  1. 配置nginx的config本机地址和端口，root指向vue的打包文件dist.

配置自己的webVideo.js：详细配置如下：

export function WebVideo() {
  this.g_iWndIndex = 0//窗口索引
  this.szDeviceIdentify = ''//设备标识(通道)
  this.deviceport = ''//设备端口
  this.rtspPort = ''//rtsp端口
  this.channels = []//通道数组
  this.ip = ''//ip地址
  this.port = ''//端口号
  this.username = ''//海康提供的监控登入用户名
  this.password = ''//登入密码
  this.init = function(ip, username, password) {
      this.ip = ip
      this.username = username
      this.password = password
      // 初始化插件参数及插入插件
      WebVideoCtrl.I_InitPlugin(1160, 630, {
          szColorProperty: 'plugin-background:#102749; sub-background:#102749; sub-border:#18293c; sub-border-select:red',
          bWndFull: true, // 全屏
          // iPackageType: 2,
          iWndowType: 1, //分屏
          bNoPlugin: true, // 支持无插件
          cbInitPluginComplete: function () {
              WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
          }
      });
  }
  // 登录
  this.clickLogin = function () {
      let self = this
      if ("" == self.ip || "" == self.port) {
          return console.log('请输入ip和端口');
      }
      self.szDeviceIdentify = self.ip + "_" + self.port;
      console.log(self.szDeviceIdentify,'----self.szDeviceIdentify-----');
      WebVideoCtrl.I_Login(self.ip, 2, self.port, self.username, self.password, {//1 代表http协议,2 https
          success: function (xmlDoc) {        
              setTimeout(function () {
                //   console.log('登录成功');
                  Store.setIpProt(self.szDeviceIdentify)//存储已登入ip和端口
                  self.getChannelInfo();
                  self.getDevicePort();
              }, 10);
              setTimeout(function() {
                  self.clickStartRealPlay()
              }, 500)
          },
          error: function (status, xmlDoc) {
              console.log(status,'登录失败');
            
          }
      });
  }
  // 退出
  this.clickLogout = function() {
      var self = this
      self.channels = []
      if (null == self.szDeviceIdentify) {
          return;
      }
      var iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify);
      if (0 == iRet) {
          self.getChannelInfo();
          self.getDevicePort();
      }
  }
  // 获取通道
  this.getChannelInfo = function(e) {
      var self = this
      self.channels = []
      if (null == self.szDeviceIdentify) {
          return;
      }
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
          async: false,
          success: function (xmlDoc) {
              var oChannels = $(xmlDoc).find("VideoInputChannel");
              $.each(oChannels, function (i) {
                  var id = $(this).find("id").eq(0).text(),
                      name = $(this).find("name").eq(0).text();
                  if ("" == name) {
                      name = "Camera " + (i

Vue 文件的按需配置：

以下是我的配置信息，可参考开发包提供的demo配置文件进行设置；通过海康提供的摄像头ip、用户名、密码实现登入功能；注：必须要登入才可以实现预览等功能；

  
    
    
      
        
        
            
                播放
                暂停
            
          
            变倍+
            变倍-
            变焦+
            变焦-
            光圈+
            光圈-
          
          
            上
            下
            左
            右
            左上
            左下
            右上
            右下
            自动
          
        
      
    
  


import {ref,nextTick, onMounted} from 'vue'
import { WebVideo} from '@/assets/video/webVideo.js'
import { storeToRefs } from "pinia";
import { Store } from "@/store";
const store = Store();
//登入信息
const loginInfo = ref({
	ip: "",
	portNumber: "",
	userName: "",
	password: "",
})
const webVideo = new WebVideo()
// 登入
 function initVideoPlay() {   
     
     nextTick(() => {
       webVideo.init(loginInfo.value.ip,  loginInfo.value.userName, loginInfo.value.password)
       webVideo.clickLogin()
       // console.log( webVideo.clickLogin(),"登陆状态");
     })
   }
  onMounted(() => {
    initVideoPlay()
  });
// 退出登入
function stopVideoPlay() {
      webVideo.clickStopRealPlay()
      webVideo.clickLogout()
    }
// 播放
function clickStartRealPlay1() {
      webVideo.clickStartRealPlay()
    }
// 暂停播放
    function clickStopRealPlay() {
      webVideo.clickStopRealPlay()
    }
// 开始移动控制 传入方向控制1-8
function mouseDownPTZControl() {
    // console.log('鼠标按下了');
    webVideo.mouseDownPTZControl(1)
  }
// 结束移动控制
function mouseUpPTZControl() {
  // console.log('鼠标抬起了');
  webVideo.mouseUpPTZControl(1)
}
//向下移动
function mouseDownPTZControl2() {
  webVideo.mouseDownPTZControl(2)
}
function mouseUpPTZControl2() {
  webVideo.mouseUpPTZControl(2)
}
// 向左移动
function mouseDownPTZControl3() {
  webVideo.mouseDownPTZControl(3)
}
function mouseUpPTZControl3() {
  webVideo.mouseUpPTZControl(3)
}
// 向右移动
function mouseDownPTZControl4() {
  webVideo.mouseDownPTZControl(4)
}
function mouseUpPTZControl4() {
  webVideo.mouseUpPTZControl(4)
}
// 向左上移动
function mouseDownPTZControl5() {
  webVideo.mouseDownPTZControl(5)
}
function mouseUpPTZControl5() {
  webVideo.mouseUpPTZControl(5)
}
// 向左下移动
function mouseDownPTZControl6() {
  webVideo.mouseDownPTZControl(6)
}
function mouseUpPTZControl6() {
  webVideo.mouseUpPTZControl(6)
}
// 向右上移动
function mouseDownPTZControl7() {
  webVideo.mouseDownPTZControl(7)
}
function mouseUpPTZControl7() {
  webVideo.mouseUpPTZControl(7)
}
// 向右下移动
function mouseDownPTZControl8() {
  webVideo.mouseDownPTZControl(8)
}
function mouseUpPTZControl8() {
  webVideo.mouseUpPTZControl(8)
}
// 自动
function mouseDownPTZControl9() {
  webVideo.mouseDownPTZControl(9)
}
function mouseUpPTZControl9() {
  webVideo.mouseUpPTZControl(9)
}
// 变倍+
function zoomIn() {
  webVideo.PTZZoomIn()
}
// 变倍-
function zoomOut() {
  webVideo.PTZZoomout()
}
// 停止变倍
function stopZoom() {
  webVideo.PTZZoomStop()
}
// 变焦+
function focusIn() {
  webVideo.PTZFocusIn()
}
// 变焦-
function focusOut() {
  webVideo.PTZFoucusOut()
}
// 停止变焦
function stopFocus() {
  webVideo.PTZFoucusStop()
}
// 光圈+
function apertureIn() {
  webVideo.PTZIrisIn()
}
// 光圈-
function apertureOut() {
  webVideo.PTZIrisOut()
}
// 停止光圈
function stopAperture() {
  webVideo.PTZIrisStop()
}


#monitorVideo{
    height: 950px;
    background-color: #c3c7dd;
    text-align: center;
}
.tips1{
  color: rgb(90, 144, 180);
  padding: 10px 30px;
  background-color: transparent;
  box-shadow: 0 0 0px #48adf026;
  text-decoration: none;
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255,255,255,0.1));
}
.data_Selection {
  width:1800px;
  height: 100px;
  background-color: #313445;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  .option_data {
    margin-left: 30px;
  }
  .specific_time {
    margin-left: 20px;
    font-size: 20px;
    font-family: MicrosoftYaHei;
    color: #b7b8bb;
  }
  :deep(.el-input__wrapper) {
    color: white;
    background-color: rgb(70, 72, 87);
  }
  :deep(.el-input__inner) {
    color: white;
  }
  .el-button {
    width: 50px;
    height: 35px;
    color: #ffffff;
    font-size: 14px;
    background-color: #1890ff;
    border: none;
    margin-left: 20px;
  }
  .el-button:hover {
        background-color: #2ebbf3;
    }
    .el-button:focus {
        background-color: #2ebbf3;
    }
  .out {
    background-color: transparent;
    position: absolute;
    right: 10px;
  }
}
.monitoring{
  display: flex;
  color: #fff;
  border-top: 1px solid transparent;
  .monitoring_title{
    display: flex;
    align-items: center; 
       span{
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
       
    }
  }
  .monitoring_content{
    margin-left: 20px;
    justify-content: center;
    align-items: center; 
    .plugin{
      width: 1160px; 
      height: 630px;
      background-color: rgb(49, 52, 68);
      padding: 10px 20px;
      margin-top: 125px;
      margin-left: 300px;
    }
  }
}
.buttn{
  color: #fff;
  text-decoration: none;
  width: 80px;
  background-color: rgb(24, 144, 255);
  height: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 5px;
  margin-left: 10px;
}
.buttn:hover{
  background-color: #2ebbf3;
  color: #fff;
}
.el-select {
    :deep(.el-input__wrapper) {
      background-color: rgb(49, 52, 69);
    }
    :deep(.el-input__inner) {
      text-align: left;
      color: rgb(224, 224, 224);
      font-size: 17px;
      background-color: rgb(49, 52, 69);
    }
  }

5. 实现预览功能示例：