VUE3接入海康威视web插件
接入海康的web插件实现在网页端直接显示摄像头监控画面，此解决方案需要在用户电脑上安装exe插件。
web插件下载
首先在官网下载海康插件，打开demo文件夹可以看到需要用到的js和bin目录下的exe插件。
插件导入
安装HCWebSDKPlugin.exe到电脑中，然后在项目的index.html中导入需要使用的js文件，由于jsVideoPlugin-1.0.0.min.js是用于控制摄像头等功能，此处我们仅需要获取监控画面，因此按实际需求引入。
html
<body>
<div id="app"></div>
<script src="/jquery-1.7.1.min.js"></script>
<script id="videonode" src="/webVideoCtrl.js"></script>
<script type="module" src="/src/main.js"></script>
</body>插件使用
在项目中引入插件后，即可在组件页面实现初始化，由于在script标签中引入，因此对象存在全局变量，在组件中直接使用即可。
需要先进行初始化，然后再登录摄像头，此处提供简单实现。
- 初始化插件
js
const startPlugin = () => {
return new Promise((resolve, reject) => {
WebVideoCtrl.I_InitPlugin({
iWndowType: 2,
bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
// 检查插件是否最新
resolve();
WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
if (bFlag) {
// 提示用户安装最新的HCWebSDKPlugin.exe
}
});
}, () => {
reject();
// 初始化失败，提示用户安装最新的HCWebSDKPlugin.exe
});
}
});
})
}- 登录海康相机
js
// 根据实际情况修改相机配置
const cameraList = [
{
"ip": "xxx.xxx.xxx.xxx",
"protocol": 1,
"port": "80",
"userName": "admin",
"password": "123456"
},
{
"ip": "xxx.xxx.xxx.xxx",
"protocol": 1,
"port": "80",
"userName": "admin",
"password": "123456"
},
{
"ip": "xxx.xxx.xxx.xxx",
"protocol": 1,
"port": "80",
"userName": "admin",
"password": "123456"
},
{
"ip": "xxx.xxx.xxx.xxx",
"protocol": 1,
"port": "80",
"userName": "admin",
"password": "123456"
}
]
// 登录单个摄像头
const login = (config) => {
return new Promise((resolve, reject) => {
const { ip, protocol, port, userName, password } = config;
WebVideoCtrl.I_Login(ip, protocol, port, userName, password, {
success: () => {
resolve();
},
error: () => {
console.log("登录失败");
reject();
}
})
})
}
const cameraListLogin = () => {
const promiseMap = cameraList.map((item) => {
return login(item);
})
return Promise.all(promiseMap);
}- 获取画面
js
// 获取单个画面
const preview = (config) => {
return new Promise((resolve, reject) => {
const { ip, port, window } = config;
WebVideoCtrl.I_StartRealPlay(`${ip}_${port}`, {
async: true,
timeout: 900,
iWndIndex: window,
iChannelID: 1,
bZeroChannel: false,
iStreamType: 2,
success: () => {
resolve();
},
error: () => {
reject();
console.log("预览失败");
}
})
})
}
const cameraListPreview = () => {
const promiseMap = cameraList.map((item, index) => {
return preview({ ...item, window: index });
})
return Promise.all(promiseMap);
}- 停止及销毁
js
const stopAllPreview = (callBack) => {
WebVideoCtrl.I_StopAllPlay().then(() => callBack?.());
}
const loginOut = () => {
cameraList.forEach((item) => {
WebVideoCtrl.I_Logout(`${item.ip}_${item.port}`)
})
}
const breakDom = () => {
WebVideoCtrl.I_DestroyPlugin();
}整体实现（vue3+setup）
html
<template>
<div class="monitor-container">
<div id="divPlugin" v-if="cameraInitComplete"/>
<div v-else>
<p>无数据</p>
</div>
</div>
</template>
<script setup>
import { onBeforeRouteLeave } from 'vue-router';
const cameraInitComplete = ref(true);
const cameraInitLoading = ref(false);
const cameraList = ref([
{
"ip": "xxx.xxx.xxx.xxx",
"protocol": 1,
"port": "80",
"userName": "admin",
"password": "123456"
},
{
"ip": "xxx.xxx.xxx.xxx",
"protocol": 1,
"port": "80",
"userName": "admin",
"password": "123456"
},
{
"ip": "xxx.xxx.xxx.xxx",
"protocol": 1,
"port": "80",
"userName": "admin",
"password": "123456"
},
{
"ip": "xxx.xxx.xxx.xxx",
"protocol": 1,
"port": "80",
"userName": "admin",
"password": "123456"
}
]);
const init = async () => {
cameraInitLoading.value = true;
try {
await startPlugin();
await cameraListLogin();
await cameraListPreview();
cameraInitComplete.value = true;
} catch (error) {
cameraInitComplete.value = false;
} finally {
cameraInitLoading.value = false;
}
}
const startPlugin = () => {
return new Promise((resolve, reject) => {
WebVideoCtrl.I_InitPlugin({
iWndowType: 2,
bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
// 检查插件是否最新
resolve();
WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
if (bFlag) {
// 提示用户安装最新的HCWebSDKPlugin.exe
}
});
}, () => {
reject();
// 初始化失败，提示用户安装最新的HCWebSDKPlugin.exe
});
}
});
})
}
const login = (config) => {
return new Promise((resolve, reject) => {
const { ip, protocol, port, userName, password } = config;
WebVideoCtrl.I_Login(ip, protocol, port, userName, password, {
success: () => {
resolve();
},
error: () => {
console.log("登录失败");
reject();
}
})
})
}
const cameraListLogin = () => {
const promiseMap = cameraList.value.map((item) => {
return login(item);
})
return Promise.all(promiseMap);
}
const preview = (config) => {
return new Promise((resolve, reject) => {
const { ip, port, window } = config;
WebVideoCtrl.I_StartRealPlay(`${ip}_${port}`, {
async: true,
timeout: 900,
iWndIndex: window,
iChannelID: 1,
bZeroChannel: false,
iStreamType: 2,
success: () => {
resolve();
},
error: () => {
reject();
console.log("预览失败");
}
})
})
}
const cameraListPreview = () => {
const promiseMap = cameraList.value.map((item, index) => {
return preview({ ...item, window: index });
})
return Promise.all(promiseMap);
}
const stopAllPreview = (callBack) => {
WebVideoCtrl.I_StopAllPlay().then(() => callBack?.());
}
const loginOut = () => {
cameraList.value.forEach((item) => {
WebVideoCtrl.I_Logout(`${item.ip}_${item.port}`)
})
}
const breakDom = () => {
WebVideoCtrl.I_DestroyPlugin();
}
onBeforeRouteLeave((to, from, next) => {
if (cameraInitLoading.value) {
console.log("请等待摄像头初始化")
} else next()
})
onActivated(() => {
init();
})
onDeactivated(() => {
loginOut();
stopAllPreview(breakDom);
})
</script>
<style lang='scss' scoped>
.monitor-container {
position: relative;
width: 900px;
height: 450px;
#divPlugin {
width: 900px;
height: 450px;
}
}
</style>更多Api实现可以查看官方文档。
