fe_service_ebtp_frontend/src/components/ElecBidEvaluation/ScreenVideoPlay.tsx

import React, { useEffect, useImperativeHandle, useRef } from 'react';
import { debounce } from 'lodash';

interface ScreenVideoPlayProps {
    videoRef: React.MutableRefObject<any | undefined>,
    cameraParams: any,
    status: number,//0-预览 1-回放
}
/**
 * 视频监控组件（海康插件）
 * @param props 
 * @returns 
 */
const ScreenVideoPlay: React.FC<ScreenVideoPlayProps> = (props) => {
    const { videoRef, cameraParams, status } = props;
    const playWnd = useRef<any>(null);
    let oWebControl: any = null;
    let initCount = 0;
    let pubKey = '';

    useEffect(() => {
        if (oWebControl != null) {
            oWebControl.JS_RequestInterface({
                funcName: "stopAllPreview"
            });
        }
        initPlugin();
    }, [cameraParams?.appSecret])

    // 创建播放实例
    function initPlugin() {
        oWebControl = new WebControl({
            szPluginContainer: "playWnd",                       // 指定容器id
            iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
            iServicePortEnd: 15909,
            szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
            cbConnectSuccess: function () {                     // 创建WebControl实例成功											
                oWebControl.JS_StartService("window", {         // WebControl实例创建成功后需要启动服务
                    dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死 
                }).then(function () {                           // 启动插件服务成功
                    // oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
                    //     cbIntegrationCallBack: cbIntegrationCallBack
                    // });

                    oWebControl.JS_CreateWnd("playWnd", playWnd.current.clientWidth, playWnd.current.clientHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
                        init();  // 创建播放实例成功后初始化
                    });
                }, function () { // 启动插件服务失败
                });
            },
            cbConnectError: function () { // 创建WebControl实例失败
                oWebControl = null;
                // $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
                initCount++;
                if (initCount < 3) {
                    setTimeout(function () {
                        initPlugin();
                    }, 3000)
                } else {
                    // $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                }
            },
            cbConnectClose: function (bNormalClose: any) {
                // 异常断开：bNormalClose = false
                // JS_Disconnect正常断开：bNormalClose = true
                oWebControl = null;
            }
        });
        return oWebControl;
    }

    //初始化
    function init() {
        getPubKey(function () {
            ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////		
            var appkey = cameraParams.appKey;                           //综合安防管理平台提供的appkey，必填
            var secret = setEncrypt(cameraParams.appSecret);   //综合安防管理平台提供的secret，必填
            var ip = cameraParams.platformManagementIp;        //综合安防管理平台IP地址，必填
            var playMode = status;                                  //初始播放模式：0-预览，1-回放
            var port = Number(cameraParams.platformManagementPort);   //综合安防管理平台端口，若启用HTTPS协议，默认443
            var snapDir = "D:\\SnapDir";                       //抓图存储路径
            var videoDir = "D:\\VideoDir";                     //紧急录像或录像剪辑存储路径
            var layout = "1x1";                                //playMode指定模式的布局
            var enableHTTPS = 1;                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
            var encryptedFields = 'secret';					   //加密字段，默认加密领域为secret
            var showToolbar = 0;                               //是否显示工具栏，0-不显示，非0-显示
            var showSmart = 1;                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
            // var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  //自定义工具条按钮
            var buttonIDs = "";  //自定义工具条按钮
            ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

            oWebControl.JS_RequestInterface({
                funcName: "init",
                argument: JSON.stringify({
                    appkey: appkey,                            //API网关提供的appkey
                    secret: secret,                            //API网关提供的secret
                    ip: ip,                                    //API网关IP地址
                    playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
                    port: port,                                //端口
                    // snapDir: snapDir,                          //抓图存储路径
                    // videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
                    layout: layout,                            //布局
                    enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
                    encryptedFields: encryptedFields,          //加密字段
                    showToolbar: showToolbar,                  //是否显示工具栏
                    showSmart: showSmart,                      //是否显示智能信息
                    buttonIDs: buttonIDs                       //自定义工具条按钮
                })
            }).then(function (oData: any) {
                oWebControl.JS_Resize(playWnd.current.clientWidth, playWnd.current.clientHeight);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
            });
        });
    }


    //获取公钥
    function getPubKey(callback: any) {
        oWebControl.JS_RequestInterface({
            funcName: "getRSAPubKey",
            argument: JSON.stringify({
                keyLength: 1024
            })
        }).then(function (oData: any) {
            if (oData.responseMsg.data) {
                pubKey = oData.responseMsg.data;
                callback()
            }
        })
    }

    //RSA加密
    function setEncrypt(value: any) {
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(pubKey);
        return encrypt.encrypt(value);
    }

    // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
    function setWndCover() {
        var iWidth = window.innerWidth;
        var iHeight = window.innerHeight;
        var oDivRect = playWnd.current.getBoundingClientRect();

        var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
        var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
        var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
        var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

        iCoverLeft = (iCoverLeft > playWnd.current.clientWidth) ? playWnd.current.clientWidth : iCoverLeft;
        iCoverTop = (iCoverTop > playWnd.current.clientHeight) ? playWnd.current.clientHeight : iCoverTop;
        iCoverRight = (iCoverRight > playWnd.current.clientWidth) ? playWnd.current.clientWidth : iCoverRight;
        iCoverBottom = (iCoverBottom > playWnd.current.clientHeight) ? playWnd.current.clientHeight : iCoverBottom;

        oWebControl.JS_RepairPartWindow(0, 0, playWnd.current.clientWidth + 1, playWnd.current.clientHeight);    // 多1个像素点防止还原后边界缺失一个像素条
        if (iCoverLeft != 0) {
            oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, playWnd.current.clientHeight);
        }
        if (iCoverTop != 0) {
            oWebControl.JS_CuttingPartWindow(0, 0, playWnd.current.clientWidth + 1, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
        }
        if (iCoverRight != 0) {
            oWebControl.JS_CuttingPartWindow(playWnd.current.clientWidth - iCoverRight, 0, iCoverRight, playWnd.current.clientHeight);
        }
        if (iCoverBottom != 0) {
            oWebControl.JS_CuttingPartWindow(0, playWnd.current.clientHeight - iCoverBottom, playWnd.current.clientWidth, iCoverBottom);
        }
    }

    //视频预览功能
    function startPreview(caremaCode: any) {
        var cameraIndexCode = caremaCode;     //获取输入的监控点编号值，必填
        var streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
        var transMode = 1;                                      //传输协议：0-UDP，1-TCP
        var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
        var wndId = -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）

        cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
        cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
        if (oWebControl != null) {
            oWebControl?.JS_RequestInterface({
                funcName: "startPreview",
                argument: JSON.stringify({
                    cameraIndexCode: cameraIndexCode,                //监控点编号
                    streamMode: streamMode,                         //主子码流标识
                    transMode: transMode,                           //传输协议
                    gpuMode: gpuMode,                               //是否开启GPU硬解
                    wndId: wndId                                     //可指定播放窗口
                })
            })
        }
    };


    //视频回放
    function videoPlayback(caremaCode: any, startTime: any, endTime: any) {
        var cameraIndexCode = caremaCode;         //获取输入的监控点编号值，必填
        var startTimeStamp = new Date(startTime?.replace('-', '/').replace('-', '/')).getTime();    //回放开始时间戳，必填
        var endTimeStamp = new Date(endTime?.replace('-', '/').replace('-', '/')).getTime();        //回放结束时间戳，必填
        var recordLocation = 0;                                     //录像存储位置：0-中心存储，1-设备存储
        var transMode = 1;                                          //传输协议：0-UDP，1-TCP
        var gpuMode = 0;                                            //是否启用GPU硬解，0-不启用，1-启用
        var wndId = -1;                                             //播放窗口序号（在2x2以上布局下可指定播放窗口）

        oWebControl.JS_RequestInterface({
            funcName: "startPlayback",
            argument: JSON.stringify({
                cameraIndexCode: cameraIndexCode,                   //监控点编号
                startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),  //录像查询开始时间戳，单位：秒
                endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),      //录像结束开始时间戳，单位：秒
                recordLocation: recordLocation,                     //录像存储类型：0-中心存储，1-设备存储
                transMode: transMode,                               //传输协议：0-UDP，1-TCP
                gpuMode: gpuMode,                                   //是否启用GPU硬解，0-不启用，1-启用
                wndId: wndId                                         //可指定播放窗口
            })
        })
    };

    useEffect(() => {
        // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
        // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
        const resize = () => {
            if (oWebControl != null) {
                oWebControl.JS_Resize(playWnd.current.clientWidth, playWnd.current.clientHeight);
                setWndCover();
            }
        };
        window.addEventListener("resize", debounce(() => resize(), 100));
        window.addEventListener("scroll", debounce(() => resize(), 100));
        return () => {
            window.removeEventListener("resize", debounce(() => resize(), 100));
            window.removeEventListener("scroll", debounce(() => resize(), 100));
            if (oWebControl != null) {
                oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 
                oWebControl.JS_Disconnect().then(function () {  // 断开与插件服务连接成功
                },
                    function () {  // 断开与插件服务连接失败
                    });
            }
        }
    }, [])

    //选择暴露给父组件的参数或方法
    useImperativeHandle(
        videoRef,
        () => ({
            play(caremaCode: any) {
                startPreview(caremaCode);
            },
            back(caremaCode: any, startTime: any, endTime: any) {
                videoPlayback(caremaCode, startTime, endTime);
            }
        }),
        [],
    );

    return <div id="playWnd" ref={playWnd} style={{ height: "100%", width: "100%" }}></div>;
};

export default ScreenVideoPlay;