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