前端接入海康威视web插件

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

标签： 1024程序员节 javascript 音视频

本文转载自: https://blog.csdn.net/Raccon_/article/details/143202223
版权归原作者 Raccom 所有，如有侵权，请联系我们删除。

前端接入海康威视web插件

VUE3接入海康威视web插件

web插件下载

插件导入

插件使用

整体实现（vue3+setup）

发表评论

“前端接入海康威视web插件”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航