当前位置: 首页> 健康> 美食 > 网站建设与管理好吗_动漫制作专业属于艺术类吗_产品推广活动策划方案_网络服务有哪些

网站建设与管理好吗_动漫制作专业属于艺术类吗_产品推广活动策划方案_网络服务有哪些

时间:2025/7/10 21:05:32来源:https://blog.csdn.net/Raccon_/article/details/143202223 浏览次数:0次
网站建设与管理好吗_动漫制作专业属于艺术类吗_产品推广活动策划方案_网络服务有哪些

VUE3接入海康威视web插件

接入海康的web插件实现在网页端直接显示摄像头监控画面,此解决方案需要在用户电脑上安装exe插件。


web插件下载

首先在官网下载海康插件,打开demo文件夹可以看到需要用到的js和bin目录下的exe插件。
在这里插入图片描述


插件导入

安装HCWebSDKPlugin.exe到电脑中,然后在项目的index.html中导入需要使用的js文件,由于jsVideoPlugin-1.0.0.min.js是用于控制摄像头等功能,此处我们仅需要获取监控画面,因此按实际需求引入。

<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标签中引入,因此对象存在全局变量,在组件中直接使用即可。

需要先进行初始化,然后再登录摄像头,此处提供简单实现。

  1. 初始化插件
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});}});})
}
  1. 登录海康相机
// 根据实际情况修改相机配置
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);
}
  1. 获取画面
// 获取单个画面
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);
}
  1. 停止及销毁
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)

<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实现可以查看官方文档。
在这里插入图片描述

关键字:网站建设与管理好吗_动漫制作专业属于艺术类吗_产品推广活动策划方案_网络服务有哪些

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: