VUE3接入海康威视web插件
接入海康的web插件实现在网页端直接显示摄像头监控画面，此解决方案需要在用户电脑上安装exe插件。
web插件下载
首先在官网下载海康插件，打开demo文件夹可以看到需要用到的js和bin目录下的exe插件。
插件导入
安装
HCWebSDKPlugin.exe
到电脑中，然后在项目的
index.html
中导入需要使用的js文件，由于
jsVideoPlugin-1.0.0.min.js
是用于控制摄像头等功能，此处我们仅需要获取监控画面，因此按实际需求引入。
<body><divid="app"></div><scriptsrc="/jquery-1.7.1.min.js"></script><scriptid="videonode"src="/webVideoCtrl.js"></script><scripttype="module"src="/src/main.js"></script></body>
插件使用
在项目中引入插件后，即可在组件页面实现初始化，由于在script标签中引入，因此对象存在全局变量，在组件中直接使用即可。
需要先进行初始化，然后再登录摄像头，此处提供简单实现。
- 初始化插件
conststartPlugin=()=>{returnnewPromise((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"}]// 登录单个摄像头constlogin=(config)=>{returnnewPromise((resolve, reject)=>{const{ ip, protocol, port, userName, password }= config;
WebVideoCtrl.I_Login(ip, protocol, port, userName, password,{success:()=>{resolve();},error:()=>{
console.log("登录失败");reject();}})})}constcameraListLogin=()=>{const promiseMap = cameraList.map((item)=>{returnlogin(item);})return Promise.all(promiseMap);}
- 获取画面
// 获取单个画面constpreview=(config)=>{returnnewPromise((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("预览失败");}})})}constcameraListPreview=()=>{const promiseMap = cameraList.map((item, index)=>{returnpreview({...item, window: index });})return Promise.all(promiseMap);}
- 停止及销毁
conststopAllPreview=(callBack)=>{
WebVideoCtrl.I_StopAllPlay().then(()=> callBack?.());}constloginOut=()=>{
cameraList.forEach((item)=>{
WebVideoCtrl.I_Logout(`${item.ip}_${item.port}`)})}constbreakDom=()=>{
WebVideoCtrl.I_DestroyPlugin();}
整体实现（vue3+setup）
<template><divclass="monitor-container"><divid="divPlugin"v-if="cameraInitComplete"/><divv-else><p>无数据</p></div></div></template><scriptsetup>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"}]);constinit=async()=>{
cameraInitLoading.value =true;try{awaitstartPlugin();awaitcameraListLogin();awaitcameraListPreview();
cameraInitComplete.value =true;}catch(error){
cameraInitComplete.value =false;}finally{
cameraInitLoading.value =false;}}conststartPlugin=()=>{returnnewPromise((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});}});})}constlogin=(config)=>{returnnewPromise((resolve, reject)=>{const{ ip, protocol, port, userName, password }= config;
WebVideoCtrl.I_Login(ip, protocol, port, userName, password,{success:()=>{resolve();},error:()=>{
console.log("登录失败");reject();}})})}constcameraListLogin=()=>{const promiseMap = cameraList.value.map((item)=>{returnlogin(item);})return Promise.all(promiseMap);}constpreview=(config)=>{returnnewPromise((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("预览失败");}})})}constcameraListPreview=()=>{const promiseMap = cameraList.value.map((item, index)=>{returnpreview({...item, window: index });})return Promise.all(promiseMap);}conststopAllPreview=(callBack)=>{
WebVideoCtrl.I_StopAllPlay().then(()=> callBack?.());}constloginOut=()=>{
cameraList.value.forEach((item)=>{
WebVideoCtrl.I_Logout(`${item.ip}_${item.port}`)})}constbreakDom=()=>{
WebVideoCtrl.I_DestroyPlugin();}onBeforeRouteLeave((to,from, next)=>{if(cameraInitLoading.value){
console.log("请等待摄像头初始化")}elsenext()})onActivated(()=>{init();})onDeactivated(()=>{loginOut();stopAllPreview(breakDom);})</script><stylelang='scss'scoped>.monitor-container{position: relative;width: 900px;height: 450px;
#divPlugin{width: 900px;height: 450px;}}</style>
更多Api实现可以查看官方文档。
本文转载自: https://blog.csdn.net/Raccon_/article/details/143202223
版权归原作者 Raccom 所有， 如有侵权，请联系我们删除。
版权归原作者 Raccom 所有， 如有侵权，请联系我们删除。