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)
}
相关推荐
excel17 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel18 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼20 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping20 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙21 小时前
[译] Composition in CSS
前端·css
白水清风21 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix21 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780021 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端21 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧21 小时前
Promise 的使用
前端·javascript