效果展示

修改webVideoCtrl.js中的源码

在webVideoCtrl.js中直接搜索 m_pluginOBJECT = new JSVideoPlugin(oParam) 然后将方法暴露出去。这里将源码格式化了一下，方便阅读代码。

函数名	效果	参数
JS_Resize(iWidth, iHeight)	重设大小	iWidth：宽度，iHeight:高度
JS_CuttingPartWindow(iLeft, iTop, iWidth, iHeight)	设置抹除的范围	iLeft：, iTop, iWidth, iHeight
JS_RepairPartWindow(iLeft, iTop, iWidth, iHeight)	去除抹除的范围	iLeft, iTop, iWidth, iHeight

其他可以参考1.5.2的官方开发指南。 视频WEB插件V1.5.2开发指南_20210916162843_20210918161557.pdf (hikvision.com)

函数使用

在html页面中引入这两个

    <script type="text/javascript" src="./static/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="./static/webVideoCtrl.js"></script>

这三个文件要齐全。jsVideoPlugin-1.0.0.min.js会被webVideoCtrl.js引用，放到同级里。 如图所示

定义一个变量 const webVideoCtrl = (window as any).WebVideoCtrl;

1.显示

const hide = () => {
    webVideoCtrl.fuckyou.JS_HideWnd();

}

2.隐藏

const show = () => {
    webVideoCtrl.fuckyou.JS_ShowWnd();
}

3.裁剪部分

const cutVideo = (x,y,w,h) => { 
    webVideoCtrl.fuckyou.JS_CuttingPartWindow(x,y,w,h)
}

4.恢复裁剪的部分

const resetCutVideo = (x,y,w,h) => {
    webVideoCtrl.fuckyou.JS_RepairPartWindow(x,y,w,h)
}

5.滚动隐藏demo

思路，监听滚动计算要隐藏的部分。

    const target = document.getElementById("HKvideo") as HTMLDivElement;
    const hideObj = { width: target.clientWidth, height: target.clientHeight, y: 100 };
    let ratio = window.devicePixelRatio;
    document.addEventListener("scroll", (ev: Event) => {
        hideObj.width = target.clientWidth * ratio;
        webVideoCtrl.fuckyou.JS_Resize(hideObj.width, hideObj.height);
        webVideoCtrl.fuckyou.JS_RepairPartWindow(0, 0, hideObj.width + 2, hideObj.y)
        hideObj.y = -target.getBoundingClientRect().top * ratio;
        webVideoCtrl.fuckyou.JS_CuttingPartWindow(0, 0, hideObj.width + 2, hideObj.y)

    })

其他

1.插件初始化

//初始化
const init = (id:string) => {

    let plugin = webVideoCtrl.I_SupportNoPlugin()
    let isInstall = webVideoCtrl.I_CheckPluginInstall();
    //这里没做插件的更新检查。
    webVideoCtrl.I_InitPlugin({
        bDebugMode: true,
        bNoPlugin: true,
        iWndowType: 1, //分割的窗口数
        iPackageType: 2,
        cbSelWnd: function (e: any) { //窗口选中回调函数
            console.log(e, 'cbSelWnd')
        },
        cbEvent: function (e: any, w: any) { //插件事件回调函数
            console.log(e, w, "cbEvent")
        },
        cbDoubleClickWnd: function (i: any, e: any) { //窗口双击回调函数
            console.log("tire")
        },
        cbInitPluginComplete: () => { //初始化完成回调函数
        
            //嵌入播放插件
            webVideoCtrl.I_InsertOBJECTPlugin(id).then((res: any) => {
                console.log("Eee", res)
            }, () => {
                console.log("error");

            })

            console.log("初始化完成回调")
        }


    })

}

2.登录

const form = ref<Form>({
    id: "192.168.1.64",
    port: "80",
    user: "admin",
    password: "rj123456",
    iPrototocol: "1"
})
//登录
const login = () => {
    // if(isLogin){
    // logout();
    // isLogin=false;
    // }
    webVideoCtrl.I_Login(form.value.id, form.value.iPrototocol, form.value.port, form.value.user, form.value.password, {
        // async:false,
        success: (e: any) => {
            console.log("登录成功", e)

        },
        error: function (e: any) {
            console.log("登录失败", e);

        }
    })
}

3.播放

//播放
const deviceIdentify = form.value.id + "_" + form.value.port; //设备
const play = () => {
    webVideoCtrl.I_StartRealPlay(deviceIdentify, {
        // iWndIndex:2,
        success: () => {
            console.log("播放成功")
        }
        ,
        error: () => {
            console.log('播放失败')
        }
    })
}

4.停止播放

const stopPlay = () => {
    webVideoCtrl.I_Stop({
        success: () => {
            console.log("停止播放成功");

        },
        error: () => {
            console.log("停止播放失败");

        }
    })
}

5.抓图 base64

//抓图
const capturePic = async () => {

    let prefix = 'data:image/jpeg;base64,'
    let data = await webVideoCtrl.I_CapturePicData();
    return (prefix + data);
}

6.分割窗口

// 分割屏幕
const splitScreen = (iType: string) => {
    let data = parseInt(iType, 10);
    webVideoCtrl.I_ChangeWndNum(data).then(() => {
        console.log("窗口分割成功！");
    }, (oError: any) => {
        var szInfo = "窗口分割失败！";
    });
}