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

1. 实现过程

   1. 登入海康开发者平台下载 WEB无插件开发包 V3.2

   2. 在index.html文件中引入需要的JS开发包，注：开发包文件需要放在public 文件夹下:

2. 1. 配置nginx :将开发包的nginx1.10.2放在自己项目的同级目录下，项目频繁打包调试。

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

3. 配置自己的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("pPlugin");          }      });  }  // 登录  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   

4. 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-8function 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. 实现预览功能示例：