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

1、下载官方安装包:

2、安装官方插件

3、引入文件

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

 4、react 中使用

  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、下面是封装好的海康威视的方法

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/575956.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Oracle delete删除数据是否为逻辑删除、新插入数据占用的数据块位置实验

假设一&#xff1a;数据库delete删除为直接删除 假设二&#xff1a;数据库delete删除为逻辑删除&#xff0c;在数据块标记出来&#xff0c;但是实际并没有删除。 方式一&#xff1a;通过dump数据块的方式来实现 我们先用小数据量&#xff0c;通过dump数据块的方式来实现 -- 数…

安卓手机连接电脑实用技巧:实现文件传输与共享

在手机使用过程中&#xff0c;我们常常需要将手机中的文件传输到电脑&#xff0c;或者将手机与电脑进行共享。为了实现这一需求&#xff0c;掌握一些实用的安卓手机连接电脑技巧就显得尤为重要。本文将为您详细介绍2种简单、高效且安全的方法&#xff0c;让您轻松实现安卓手机与…

【opencv 加速推理】如何安装 支持cuda的opencv 包 用于截帧加速

要在支持CUDA的系统上安装OpenCV&#xff0c;您可以使用pip来安装支持CUDA的OpenCV版本。OpenCV支持CUDA加速&#xff0c;但需要安装额外的库&#xff0c;如cuDNN和NVIDIA CUDA Toolkit。以下是一般步骤&#xff1a; 安装NVIDIA CUDA Toolkit: 首先&#xff0c;您需要安装NVID…

qt5core.dll怎么下载,qt5core.dll丢失能否修复?

qt5core.dll的丢失真是让人头疼。这个Visual C Redistributable for Visual Studio 2015的运行时库被许多程序和游戏所依赖&#xff0c;一旦缺失了qt5core.dll&#xff0c;就会面临无法打开程序或游戏&#xff0c;甚至系统崩溃等一系列问题。 qt5core.dll的消失会带来以下麻烦 …

泰迪智能科技助力中山三院放射科搭建生成式大模型应用

泰迪智能科技作为一家专业从事物联网、大数据及人工智能技术研发、咨询与培训的高科技企业&#xff0c;具有强大的技术研发实力和应用经验。中山大学附属第三医院放射科是集医疗、教学、科研工作于一体的广东省临床重点专科&#xff0c;具有深厚的医疗资源和科研基础。两者合作…

GaN HEMT中短沟道效应的建模

来源&#xff1a;Modeling of Short-Channel Effects in GaN HEMTs&#xff08;TED 20年&#xff09; 摘要 在本文中&#xff0c;我们提出了一种用于估算GaN高电子迁移率晶体管&#xff08;HEMT&#xff09;器件中短沟道效应&#xff08;SCEs&#xff09;的显式和解析的基于电…

安卓和ios设置自己的短链

ios 的info.plist文件 设置 CFBundleURLSchemes 其中konnect 就是设置app的短链名称 <array><dict><key>CFBundleTypeRole</key><string>Editor</string><key>CFBundleURLName</key><string>org.konnect.app</str…

【Redis】Redis 非关系型数据库 安装、配置、使用(全集)

目录 Redis 第一章 1、什么是redis 2、安装redis 1-7 8 3、redis使用 第二章 1、redis的使用 1、使用方式 2、使用Java代码使用redis 3、优化连接redis 2、五种数据类型 常用命令 string hash list set zset 不同数据类型存、取、遍历的方法 3、redis在项目…

JCE cannot authenticate the provider BC

前言&#xff1a; 公司项目有用AES加密的&#xff0c;报错原因是BC&#xff08;Bouncy Castle&#xff09;提供的加密服务时&#xff0c;JCE&#xff08;Java Cryptography Extension&#xff09;无法进行验证。这通常是由于 JCE 的默认策略文件不支持所需的加密算法&#xff…

Windows下Golang初学乍到

安装 没啥说的&#xff0c;官网下载即可&#xff0c;地址&#xff1a;All releases - The Go Programming Language 根据系统类型下载即可&#xff01; 配置 Windows下安装完后&#xff0c;发现path中已经有了&#xff0c;但为了避免可能的问题&#xff0c;还是建议配置GOPA…

不得不说,在很多业务中,这种设计模式用得真的很香

故事 “不能在写if else来拓展当前系统了&#xff0c;现在已经有三个支付场景了…”工位上&#xff0c;小猫看着电脑&#xff0c;挠着头。 就在刚刚&#xff0c;小猫接到了一个新需求&#xff0c;需要和客户公司打通资产&#xff0c;形成资产联动。说白了就是需要定制化对接客…

Linux下基本指令-掌握

目录 为什么要学命令行 Linux下基本指令-掌握 ls 指令 pwd命令 cd 指令 touch指令 mkdir指令&#xff08;重要&#xff09;&#xff1a; rmdir指令 && rm 指令&#xff08;重要&#xff09;&#xff1a; man指令&#xff08;重要&#xff09;&#xff1a; cp指…

微信黑名单怎么恢复?一招迅速搞定

“求助&#xff01;微信拉黑后&#xff0c;怎样找到并解除黑名单&#xff1f;我不知道具体的操作&#xff0c;希望可以分析给我详细的图文解说&#xff0c;感谢&#xff01;” 微信的黑名单功能允许用户将某人加入黑名单&#xff0c;从而屏蔽其发送消息、查看朋友圈等行为。然…

7天入门Android开发之第1天——初识Android

一、Android系统 1.Linux内核层&#xff1a; 这是安卓系统的底层&#xff0c;它提供了基本的系统功能&#xff0c;如内存管理、进程管理、驱动程序模型等。安卓系统构建在Linux内核之上&#xff0c;借助于Linux的稳定性和安全性。 2.系统运行库层&#xff1a; 这一层包括了安卓…

最新windows版本erlang26.0和rabbitmq3.13下载

Erlang下载 官网下载&#xff1a;https://www.erlang.org/patches/otp-26.0 百度网盘&#xff1a;https://pan.baidu.com/s/1xU4syn14Bh7QR-skjm_hOg 提取码&#xff1a;az1t RabbtitMQ下载 官网下载&#xff1a;https://www.rabbitmq.com/docs/install-windows 百度网盘…

一文解读:阿里云 AI 基础设施的演进与挑战

云布道师 2024 年 4 月 18-19 日&#xff0c;2024 中国生成式 AI 大会在北京 JW 万豪酒店举行&#xff0c;阿里云高级技术专家、阿里云异构计算 AI 推理团队负责人李鹏受邀在【AI Infra】专场发表题为《AI 基础设施的演进与挑战》的主题演讲。李鹏从 AIGC 对云基础设施的挑战、…

echarts利用graphic属性给饼图添加内圈图片及外圈图片(可自适应宽度位于饼图中心)

最终效果图&#xff1a; 目录 前言资源主要部分graphic介绍style介绍代码 加载饼图方法&#xff08;option所有的配置&#xff09; 前言 思路是看到这个博客启发的&#xff1a;点击跳转查看博客&#xff0c;然后在graphic属性里改了我的实际需求&#xff0c;譬如图片的宽高、…

【笔试强训】除2!

登录—专业IT笔试面试备考平台_牛客网牛客网是互联网求职神器&#xff0c;C、Java、前端、产品、运营技能学习/备考/求职题库&#xff0c;在线进行百度阿里腾讯网易等互联网名企笔试面试模拟考试练习,和牛人一起讨论经典试题,全面提升你的技术能力https://ac.nowcoder.com/acm/…

如何安装sbt(sbt在ubuntu上的安装与配置)(有详细安装网站和图解)

sbt下载官网 选择对应的版本和安装程序 Download | sbt (scala-sbt.org) 安装 解压 将sbt-1.9.0.tgz上传到xshell&#xff0c;并解压 解压&#xff1a; tar -zxvf sbt-1.9.0.tgz 配置 1、在/home/hadoop/sbt中创建sbt脚本 /home/hadoop/sbt 注意要改成自己的地址 cd …

16 JavaScript学习: 类型转换

JavaScript 类型转换 Number() 转换为数字&#xff0c; String() 转换为字符串&#xff0c; Boolean() 转换为布尔值。 JavaScript 数据类型 在 JavaScript 中有 6 种不同的数据类型&#xff1a; stringnumberbooleanobjectfunctionsymbol 3 种对象类型&#xff1a; Obje…