海康摄像头接入前端项目（海康官网v3.0包）

门三金

已于 2024-11-07 15:37:46 修改

阅读量1.3k

点赞数 5

文章标签：前端 javascript vue.js

于 2024-11-07 15:35:18 首次发布

本文链接：https://blog.csdn.net/weixin_45717984/article/details/143595644

版权

一、下载海康官网插件包

地址：https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24

二、关键文件引入

1.下载完成后根据\\WebSDK3.3.9_20241031151026\WebSDK3.3.9\webs到这个目录，把这个目录下的jquery.min.js，复制到项目的 public 文件夹下
2.\\WebSDK3.3.9_20241031151026\WebSDK3.3.9\webs\codebase把这个目录下的jsVideoPlugin-1.0.0.min.js，webVideoCtrl.js这两个文件也复制到项目的 public 文件夹下
在这里插入图片描述

3.在项目的index.html文件中全局引入这几个文件

 	<script type="text/javascript" src="jsVideoPlugin-1.0.0.min.js"></script>
    <script type="text/javascript" src="webVideoCtrl.js"></script>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

在这里插入图片描述

三、安装插件

1.双击\\WebSDK3.3.9_20241031151026\WebSDK3.3.9\webs\codebase 这个目录下的HCWebSDKPlugin.exe文件进行插件安装

四、实例化监控视频

1.这是基础的代码示例，承载视频的容器盒子一定要配置width和height，然后其他具体的功能根据文档里面的内容可以自己增加

<template>
  <div class="con">
    <div
      ref="container"
      id="divPlugin"
      style="width: 100%; height: 500px"
    ></div>
    <el-button type="primary" size="default" @click="login">登录</el-button>
    <el-button type="primary" size="default" @click="play">预览</el-button>
    <el-button type="primary" size="default" @click="split">画面分割</el-button>
  </div>
</template>

<script setup>
const container = ref(null)
const szIP = '192.168.2.64'
const iPrototocol = 1
const iPort = '80'
const szUserName = 'admin'
const szPassword = 'yd@2024..'

onMounted(() => {
  initMonitor()
})

function initMonitor() {
  // 检查插件是否已经安装过
  if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
    console.log()
    ;('您还未安装过插件，下载WebComponents.exe安装！')
    return
  }
  // 初始化插件参数及插入插件
  WebVideoCtrl.I_InitPlugin({
    iWndowType: 1,
  })
  WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin')
}
function login() {
  WebVideoCtrl.I_Login(szIP, 1, iPort, szUserName, szPassword, {
    success: function (xmlDoc) {
      //成功的回调函数
      console.log(szIP + ' 登录成功！')
    },
    error: function () {
      //失败的回调函数
      console.log(szIP + ' 登录失败!')
    },
  })
}
// 播放
function play() {
  WebVideoCtrl.I_StartRealPlay(`${szIP}_${iPort}`, {
    iWndIndex: 0,
  })
}

// 停止播放，预览，销毁插件
function stopAllPlay() {
  WebVideoCtrl.I_StopAllPlay()
  WebVideoCtrl.I_Logout()
  WebVideoCtrl.I_DestroyPlugin()
}

onUnmounted(() => {
  stopAllPlay()
})
</script>

<style scoped>
.con {
  width: 100%;
  height: 100%;
}
</style>