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

最新推荐文章于 2024-05-31 09:22:28 发布
最新推荐文章于 2024-05-31 09:22:28 发布
阅读量1.5k 收藏 11
点赞数 8
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IAL59/article/details/138270712
版权

  1. 实现过程

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

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

    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("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为方向PTZ
let 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);
            }
        });
    }
}
}

  4. 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>

 5. 实现预览功能示例：

        

Sqlevely
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
WEB无插件开发包-v3.2，可iframe集成
02-02
WEB无插件开发包_v3.2，可iframe集成
海康威视摄像头WEB无插件开发包 V3.2（官方版本）
06-17
海康威视摄像头WEB无插件开发包 V3.2官方demo
基于nginx+ffmpeg+vue3+TypeScript在网页上显示监控的实时画面
油墨香^-^的博客
05-31 27
最近在忙比赛的项目，项目有一个实时预览监控摄像头的画面的需求。按道理说我一个臭前端不负责这一块的东西，但是没办法，时间紧任务重，只好硬着头皮上了。刚做到这一块的业务的时候，毫无头绪，因为摄像头用的是海康的，然后就四处查阅文档，四处碰壁。并且对摄像头这一块完全不了解，花了三天时间才做出一个「demo」。如果你的摄像头配置比较好，如果可以通过各大摄像头厂商给demo连接上，那就会省下很多麻烦事。一定一定在做之前看摄像头的配置，支持什么，不支持什么！！！因为时间肥肠的宝贵。
海康威视web控件开发+vue结合做网页开发-附件资源
03-02
海康威视web控件开发+vue结合做网页开发-附件资源
海康威视3.2无插件开发包预览时出现WebSocket opening handshake timed out
qq_28688017的博客
11-23 847
海康威视3.2无插件开发包预览时出现WebSocket opening handshake timed out
海康威视web3.2开发包开发使用说明
asdfadafd的博客
03-10 2921
首言： 通过海康威视的最新web开发包工具进行js调用引入至vue项目中，实现监控设备的对接，监控功能的实现。3.2无插件js库同时支持插件安装的模式。 目录 首言： 一、海康威视开发平台： ?1、下载开发工具包文档 2、专家支持在线咨询问题 二、3.2无插件开发 1、需要引用的js包 2、开发api 3、注意事项 三、在VUE项目中多个页面引用插件进行监控视频实时显示 1、把初始化过程抽象为一个组件 2、在不同页面中进行调用 四、其他说明 1、无插件开发包必须使用nginx代理（无论是测试还是生产环境）
海康威视 摄像头网络摄像头 WEB无插件开发包 Web 3.2控件开发包
02-25
web 3.2无插件 是使用websocket 的相关技术 ， web 3.0 插件版是使用了 浏览器的npapi 技术 内容简介 Web 控件 V3.2 基于 ActiveX 和 NPAPI 开发，接口封装于 javascript 脚本，以 javascript 接口形式提供用户 集成，支持网页上实现预览、回放、云台控制等功能。该控件开发包仅支持 B/S 网页开发，不适用于 C/S 开发。 支持设备 Web 控件 V3.2 支持我司多种设备，包括 DVR、NVR、DVS、网络摄像机、网络球机等，设备需要支持 PSIA 或 ISAPI 协议。 运行环境 操作系统：Windows XP、Windows7、Windows8、Windows8.1 浏览器： IE8~IE11、Chrome31+、Firefox35+，32 位浏览器 IE8~IE11、Chrome31+、Firefox35+，64 位浏览器
海康web v3.2无插件开发包 20210918
10-07
海康WEB无插件开发包 v3.2 20210918最新版
海康-WEB无插件开发包，避坑记录
u014336163的博客
09-28 1488
登陆之后进去配置》网络》高级配置》找到启动WebSocket，如果没有该项可能是你的交换机不支持WebSocket，就不能使用下面的方法。不建议去使用右侧的开发包，只支持低版本浏览器，尝试了几个低版本浏览器支持NPAPI但不支持显示Vue项目；下载左侧“WEB无插件开发包”解压之后按照里面提供的方式运行项目，运行地址改成本地IP加端口，这里。Vue项目使用npm run serve命令在本地运行的时候，选择使用IP的方式访问。，否则会出现跨域问题，网上有其它部署的方式，我时觉得就使用这种方式最方便。
海康摄像头web无插件3.2，vue开发，Nginx代理IIS服务器
qq_40099034的博客
11-30 4889
通过海康摄像头web无插件3.2，实现网页播放视频，采用Nginx代理IIS服务器
海康威视 WEB无插件开发包 V3.2
12-02
WEB3.2无插件版本开发包，支持高版本谷歌、火狐浏览器，同时需要设备支持Websocket取流。无插件版本需要使用nginx代理服务器。内附开发文档
海康WEB3.2无插件开发包2020.zip
02-27
WEB3.2无插件版本开发包，支持高版本谷歌、火狐浏览器，同时需要设备支持Websocket取流。无插件版本需要使用nginx代理服务器。
大华摄像头web版二次开发云台控制
01-03
大华摄像头web版二次开发云台控制 带ocx 有演示demo
WEB无插件开发包_20200616.rar
09-23
海康威视的球型摄像头的无插件web端兼容chrome高版本，解压后根据步奏来，注意端口占用问题，注意端口占用，注意端口占用，亲测有效
海康web 开发包
10-15
海康的最新web开发包，其中包含了demo以及开发文档，该资源为最新的开发包。
海康威视WEB开发包最新版
05-11
压缩包为海康威视WEB控件开发包，支持网页预览视频，应该支持所有海康硬盘录像机及摄像头，Doc文件夹内为控件的开发指南（接口函数说明文档）
海康威视有插件版本-vue3集成开发，可云台控制
02-02
在这个特定的项目中，我们关注的是一个基于Vue3框架的有插件版本，特别是针对云台控制功能的实现。 首先，让我们深入理解“Vue3集成开发”。Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。Vue3是其...
海康监控vue3播放器组件
05-07
【海康监控vue3播放器组件】是一款专为Vue3框架设计的H5播放器组件，旨在方便开发者在Web应用中集成海康监控设备的视频流播放功能。Vue.js是一种流行的JavaScript前端框架，以其轻量级、易用性和组件化特性受到广大...
海康h5player2.1.3监控播放插件
最新发布
05-31
海康H5Player是一款专为监控视频播放设计的插件，其版本2.1.3在业界被广泛应用，尤其在安防领域。这款插件的核心功能是支持通过WebSocket协议传输流媒体数据，使得实时监控视频能在网页上流畅播放，极大地提升了用户...
vue+js+海康web开发包接入海康威视摄像头
06-21
### 回答1： Vue.js是一个流行的JavaScript框架，它的出现让前端开发变得更加高效和容易。海康威视是一家集视频监控、智能交通、智能建筑等为一体的安防产品制造商，其摄像头是市场上较为常用的监控设备之一。如何在Vue.js中接入海康威视摄像头呢？ 首先，需要使用海康威视提供的Web开发包（Web SDK）。该开发包提供了相关的API，可以用于实现视频预览、播放控制等功能。 使用Vue.js需要先安装Vue.js框架，并创建一个项目。在项目中引入海康威视Web SDK的JS文件，并进行相关配置，比如设置服务器IP、端口号、用户名、密码等等。 接下来，可以通过Vue.js组件来实现摄像头的预览和播放控制功能。可以使用Vue.js提供的组件生命周期钩子函数，在组件加载完成后执行摄像头预览等相关操作。 在组件中，可以使用海康威视Web SDK提供的API，实现摄像头视频流的预览、停止、播放等功能。需要注意的是，在使用海康威视Web SDK时，需要考虑浏览器兼容性问题。尤其是在使用较老版本的浏览器时，可能会出现兼容性问题，需要进行相应的兼容处理。 总结而言，使用Vue.js接入海康威视摄像头需要进行Web SDK的配置和API的调用。通过Vue.js组件的生命周期钩子函数，可以实现摄像头的预览和播放控制等功能。我们需要注意浏览器兼容性的问题，并在项目中进行相应的兼容性处理。 ### 回答2： 在Vue.js和海康Web开发包的结合下，可以轻松地将海康威视摄像头集成到Web应用程序中。在开始之前，您需要在Web应用程序中安装海康Web开发包。 接下来，您需要创建一个Vue组件，该组件将显示从摄像头捕获的实时视频。您可以使用webPlayer组件来实现这一点，然后将其添加到Vue组件中。 接下来，您需要添加一个视图对象，该对象将使用Web开发包中的API来连接海康威视摄像头。应该使用deviceManager对象和Camera对象来实现这一点。 最后，您需要添加一些事件监听器，以便在用户与Web应用程序交互时执行一些特定的操作。例如，您可以添加一个按钮，该按钮将停止和开始视频播放。 完成所有这些步骤后，您将能够在Vue.js应用程序中轻松集成海康威视摄像头。您可以使用这些摄像头来实现视频监控、安全监测、物联网方案等众多应用场景。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值