前端接入海康威视web插件 - ToB企服应用市场:ToB评测及商务社交产业平台

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

复制代码

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 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);
}

复制代码

// 获取单个画面
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);
}

复制代码

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();
}

复制代码

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

复制代码