react 使用WEB3.0控件开发包 V3.0接入海康威视摄像头

news/2024/9/22 17:07:33/

1、下载官方安装包:

2、安装官方插件

3、引入文件

在public/index 中引入监控依赖,这三个文件可以在下载的官方demo中找到

 4、react 中使用

javascript">  useEffect(() => {
const ipInfo = :['192.168.xxxx'];//初始化摄像头const WebVideoCtrl = window.WebVideoCtrl;const videoInitInfo = {WebVideoCtrl,iWndowType: 2,divPlugin: "divPlugin", //这里要和放视频的div的id一样ipInfo,};initVideoPlugin(videoInitInfo)//在退出页面时要调用stop方法return () => {for (let i = 0; i < ipInfo?.length; i++) {const loginInfo = ipInfo[i];const szDeviceIdentify = loginInfo.szIP + "_" + loginInfo.szPort;stopVideoPlay(WebVideoCtrl, szDeviceIdentify, i);}};}, []);<div id="divPlugin" style={{ width: "520px", height: "240px" }}></div>

 5、下面是封装好的海康威视的方法

javascript">export function initVideoPlugin(videoInfo) {const { WebVideoCtrl, iWndowType, divPlugin, ipInfo } = videoInfo;WebVideoCtrl.I_InitPlugin({bWndFull: true,     //是否支持单窗口双击全屏,默认支持 true:支持 false:不支持iWndowType,cbInitPluginComplete: async function () {await WebVideoCtrl.I_InsertOBJECTPlugin(divPlugin);for (let i = 0; i < ipInfo.length; i++) {const loginInfo = ipInfo[i];login(WebVideoCtrl, loginInfo, i)}}});
}
function login(WebVideoCtrl, loginInfo, i) {let { szIP, szPort, szUsername, szPassword } = loginInfo;const szDeviceIdentify = szIP + "_" + szPort;WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {timeout: 3000,async: false,success: function (xmlDoc) {console.log(szDeviceIdentify + " 登录成功!", xmlDoc);setTimeout(function () {getChannelInfo(WebVideoCtrl, szDeviceIdentify);}, 100);setTimeout(function () {clickStartRealPlay(WebVideoCtrl, szDeviceIdentify, i)}, 300);},error: function (oError) {console.log(szDeviceIdentify + " 登录失败!", oError.errorCode, oError.errorMsg);}});
}
// 获取通道
function getChannelInfo(WebVideoCtrl, szDeviceIdentify) {if ("" == szDeviceIdentify) {return;}// 模拟通道WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {async: false,success: function (xmlDoc) {console.log(szDeviceIdentify + " 获取模拟通道成功!");},error: function () {console.log(szDeviceIdentify + " 获取模拟通道失败!");}});
}// 开始预览
function clickStartRealPlay(WebVideoCtrl, szDeviceIdentify, g_iWndIndex) {const oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)if (oWndInfo != null) {// 已经在播放了,先停止WebVideoCtrl.I_Stop();}if (null == szDeviceIdentify) {return;}WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {iStreamType: 1,iWndIndex: g_iWndIndex,iChannelID: 1,bZeroChannel: false,success: function () {console.log("开始预览成功");},error: function (status, xmlDoc) {console.log("开始预览失败111 ", status, xmlDoc);if (403 === status) {console.log("浏览器不支持Websocket取流!请更换ie浏览器");} else {console.log("开始预览失败 ", status, xmlDoc);}}});
}export function stopVideoPlay(WebVideoCtrl, szDeviceIdentify, i) {if (!WebVideoCtrl) {return;}console.log('开始关闭摄像头');WebVideoCtrl.I_StopAllPlay({success: () => {console.log('停止成功')}});WebVideoCtrl.I_Logout(szDeviceIdentify);setTimeout(function () {WebVideoCtrl.I_DestroyPlugin()}, 100)
}


http://www.ppmy.cn/news/1425314.html

相关文章

draw.io使用心得

draw.io使用心得 在当今信息爆炸的时代&#xff0c;视觉表达的重要性日益凸显。无论是在学习、工作&#xff0c;还是在日常生活中&#xff0c;我们经常需要通过图表来清晰地展示复杂的想法、流程或者关系。draw.io作为一款强大且易于使用的在线绘图工具&#xff0c;为我提供了…

端点安全时刻影响着网络安全,我们应该如何保护

端点&#xff08;Endpoint&#xff09;是网络通信中的一个重要概念&#xff0c;指的是网络通信中的发送或接收信息的设备或节点。在一个网络中&#xff0c;端点可以是硬件设备&#xff08;如计算机、服务器、手机、路由器等&#xff09;&#xff0c;也可以是软件应用或服务。端…

Linux 系统中用户、用户组和文件权限管理的常用命令 useradd、usermod、groupadd、groupmod、chmod

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 1. useradd useradd 是 Linux 系统中用于创建新用户账户的命令。管理员通常用它来添加新的系统用户&#xff0c;为他们设置初始配置&#xff0c;如主目录、登录 Shell 等。这个命令具有多个选项&#x…

C语言-单片机:STM32程序烧录的几种方法

STM32微控制器提供了多种程序烧录&#xff08;也称为编程或固件更新&#xff09;方式&#xff0c;这些方法允许用户将编译后的程序代码&#xff08;通常为HEX或BIN格式&#xff09;下载到MCU的闪存中。以下是几种常见的STM32程序烧录方式&#xff1a; ST-LINK&#xff1a; ST-L…

(保姆级教学)跨站请求伪造漏洞

1. CSRF漏洞 CSRF&#xff08;Cross-site request forgery&#xff09;跨站请求伪造&#xff0c;也被称为One Click Attack 或者Session Riding&#xff0c;通常缩写为CSRF或者XSRF&#xff0c;是一种对网站的恶意利用。尽管听起来像跨站脚本&#xff08;XSS&#xff09;&…

.net8系列-01手把手教你创建一个新的.net应用(.net7和.net8的不同点)以及三种方案进行接口调试

前提条件 如果没有安装VS2022.17.8 版本环境&#xff0c;请参考我的.net系列其他安装步骤文章来进行安装&#xff08;发布本文的时候另一篇文章正在审核无法放链接&#xff0c;等后续补充哦&#xff0c;也可以自己搜索我的博文哦~很齐全&#xff09; Windows版本.net环境搭建…

简单二分应用

思路&#xff1a;首先二分需要数列有二分性&#xff0c;我们要对数列排序&#xff0c;然后二分距离&#xff0c;直到出现一个距离可以满足&#xff0c;点数大于等于k。 代码&#xff1a; void solve(){int n, q;cin >> n >> q;vector<int>a(n);for(int i …

《Chain-of-Thought Prompting Elicits Reasoning in Large Language Models》【大模型思维链】

目录 前言一、思维链介绍1-1、指令1-2、逻辑依据1-3、示例 二、Cot一般分类2-1、Zero-Shot-CoT2-2、Few-Shot-CoT 三、Cot的好处&缺陷&适用3-1、Cot的好处3-2、Cot的缺陷3-3、Cot的适用 四、变体4-1、自我验证&#xff08;self-consistency checking&#xff09; 总结 …