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)
}
相关推荐
言兴几秒前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte4 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常5 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常7 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101811 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28118 分钟前
Chrome插件开发
前端
前端 贾公子30 分钟前
Monorepo + vite 怎么热更新
前端
coding随想39 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试