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

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)
}
相关推荐
范文杰3 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪3 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy4 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom5 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端