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

实现过程1. 登入海康开发者平台下载 WEB无插件开发包 V3.22. 在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 < 9 ? "0" + (i + 1) : (i + 1)); } self.channels.push({ id: id, name: name }) }); }, error: function (status, xmlDoc) { console.log(self.channels,'获取模拟通道号失败') } }); // 数字通道 WebVideoCtrl.I_GetDigitalChannelInfo(self.szDeviceIdentify, { async: false, success: function (xmlDoc) { var oChannels = $(xmlDoc).find("InputProxyChannelStatus"); $.each(oChannels, function (i) { var id = $(this).find("id").eq(0).text(), name = $(this).find("name").eq(0).text(), online = $(this).find("online").eq(0).text(); if ("" == name) { name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1)); } self.channels.push({ id: id, name: name, online:online }) }); console.log(self.szDeviceIdentify +'--'+self.channels[0]+ "--szDeviceIdentify--channels[0]--- 获取数字通道成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify +'--'+self.channels[0] + " ---获取数字通道失---", status, xmlDoc); } }); } // 获取端口 this.getDevicePort = function() { var self = this if (null == self.szDeviceIdentify) { return; } var oPort = WebVideoCtrl.I_GetDevicePort(self.szDeviceIdentify); if (oPort != null) { self.deviceport = oPort.iDevicePort; self.rtspPort = oPort.iRtspPort; } console.log('获取端口号成功') } // 开始预览 this.clickStartRealPlay = function() { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex), iChannelID = self.channels[0].id console.log(self.channels,"---开始预览--通道号----"); if (null == self.szDeviceIdentify) { // console.log(self.szDeviceIdentify + ' --szDeviceIdentify--为空---'); return; } var startRealPlay = function () { WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, { iChannelID: iChannelID, bZeroChannel: false, iStreamType: 2, success: function () { console.log('预览成功') }, error: function (status, xmlDoc) { if (403 === status) { console.log('设备不支持Websocket取流') } else { console.log(iChannelID,self.szDeviceIdentify,'--------预览失败---------',status, xmlDoc,) } } }); }; if (oWndInfo != null) {// 已经在播放了，先停止 WebVideoCtrl.I_Stop({ success: function () { startRealPlay(); } }); } else { startRealPlay(); } } // 停止预览 this.clickStopRealPlay = function() { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex) if (oWndInfo != null) { WebVideoCtrl.I_Stop({ success: function () { console.log('停止预览成功') }, error: function () { console.log('停止预览失败') } }); } }/* 云平台控制 */// PTZ控制 9为自动，1,2,3,4,5,6,7,8为方向PTZlet g_bPTZAuto = false;this.mouseDownPTZControl=function (iPTZIndex) { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex), bZeroChannel = self.channels[0].id ,//通道id iPTZSpeed = 4;//切换速度 $("#ptzspeed").val() if (bZeroChannel==0) {// 零通道不支持云台 // return console.log(bZeroChannel+"-----云台"); } if (oWndInfo != null) { if (9 == iPTZIndex && g_bPTZAuto) { iPTZSpeed = 0;// 自动开启后，速度置为0可以关闭自动 } else { self.g_bPTZAuto = false;// 点击其他方向，自动肯定会被关闭 } WebVideoCtrl.I_PTZControl(iPTZIndex, false, { iPTZSpeed: iPTZSpeed, success: function (xmlDoc) { if (9 == iPTZIndex && g_bPTZAuto) { } else { } if (9 == iPTZIndex) { g_bPTZAuto = !g_bPTZAuto; } }, error: function (status, xmlDoc) { } }); }}// 方向PTZ停止this.mouseUpPTZControl=function () { let self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(1, true, { success: function (xmlDoc) { }, error: function (status, xmlDoc) { } }); }}/* 调焦部分 */// 变倍+this.PTZZoomIn= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(10, false, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 调焦+成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 调焦+失败！", status, xmlDoc); // showOPInfo(oWndInfo.szDeviceIdentify + " 调焦+失败！", status, xmlDoc); } }); }}// 变倍—this.PTZZoomout= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(11, false, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 调焦-成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 调焦-失败！", status, xmlDoc); } }); }}// 停止变倍this.PTZZoomStop= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(11, true, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 调焦停止成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 调焦停止失败！", status, xmlDoc); } }); }}// 变焦+this.PTZFocusIn= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(12, false, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦+成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦+失败！", status, xmlDoc); } }); }}// 变焦— this.PTZFoucusOut=function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(13, false, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦-成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦-失败！", status, xmlDoc); } }); }}// 停止变焦this.PTZFoucusStop=function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(12, true, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦停止成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦停止失败！", status, xmlDoc); } }); }}// 光圈+this.PTZIrisIn= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(14, false, { iWndIndex: selfg_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 光圈+成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 光圈+失败！", status, xmlDoc); } }); }}// 光圈-this.PTZIrisOut= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(15, false, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 光圈-成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 光圈-失败！", status, xmlDoc); } }); }}// 停止光圈this.PTZIrisStop = function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(14, true, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 光圈停止成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 光圈停止失败！", status, xmlDoc); } }); }}}

Vue 文件的按需配置：

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

<template>
  <div id="monitorVideo">
    <!-- 监控画面 -->
    <div class="monitoring">

      <div class="monitoring_content" style="position: relative">

        <div class="plugin" id="divPlugin"></div>

        <div class="data_Selection" style=" height: 60px; align-items: center; flex-wrap: wrap; background-color: transparent;justify-content: space-around;">
            <div class="control_button" style="display: flex; justify-content: center; align-items: center" >
                <el-button @click="clickStartRealPlay1">播放</el-button>
                <el-button @click="clickStopRealPlay">暂停</el-button>
            </div>
          <div class="control_button" style="display: flex; justify-content: center; align-items: center">
            <el-button @mousedown="zoomIn" @mouseup="stopZoom" style="width: 50px" >变倍+</el-button>
            <el-button @mousedown="zoomOut" @mouseup="stopZoom" style="width: 50px">变倍-</el-button>
            <el-button  @mousedown="focusIn" @mouseup="stopFocus" style="width: 80px; ">变焦+</el-button>
            <el-button  @mousedown="focusOut" @mouseup="stopFocus" style="width: 80px; ">变焦-</el-button>
            <el-button @mousedown="apertureIn" @mouseup="stopAperture" style="width: 80px; ">光圈+</el-button>
            <el-button  @mousedown="apertureOut" @mouseup="stopAperture" style="width: 80px; ">光圈-</el-button>
          </div>
          <div class="ptz_control" style="display: flex; justify-content: left; align-items: center">
            <el-button @mousedown="mouseDownPTZControl" @mouseup="mouseUpPTZControl" >上</el-button>
            <el-button @mousedown="mouseDownPTZControl2" @mouseup="mouseUpPTZControl2">下</el-button>
            <el-button @mousedown="mouseDownPTZControl3" @mouseup="mouseUpPTZControl3">左</el-button>
            <el-button @mousedown="mouseDownPTZControl4" @mouseup="mouseUpPTZControl4">右</el-button>
            <el-button @mousedown="mouseDownPTZControl5" @mouseup="mouseUpPTZControl5">左上</el-button>
            <el-button @mousedown="mouseDownPTZControl6" @mouseup="mouseUpPTZControl6">左下</el-button>
            <el-button @mousedown="mouseDownPTZControl7" @mouseup="mouseUpPTZControl7" >右上</el-button>
            <el-button @mousedown="mouseDownPTZControl8" @mouseup="mouseUpPTZControl8">右下</el-button>
            <el-button @mousedown="mouseDownPTZControl9" @mouseup="mouseUpPTZControl9">自动</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
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()
}
</script>
<style scoped lang="scss">
#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);
    }
  }
</style>

实现预览功能示例：

![](https://img-blog.csdnimg.cn/direct/13876f9e79754a5397bb5596b89a3740.png)

标签： vue.js 前端 javascript

本文转载自: https://blog.csdn.net/IAL59/article/details/138270712
版权归原作者 Sqlevely 所有，如有侵权，请联系我们删除。

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

发表评论

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

关于作者

overfit同步小助手

相关阅读

文章导航

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

发表评论

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

关于作者

overfit同步小助手

相关阅读

文章导航

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

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