vue大屏可视化接入海康web视频插件

vue-cli搭建的项目，建议直接用下列.vue组件替换即可使用。
不建议通过iframe网址访问示范的html普通版iframe_for_demo.html访问。
例如iframe_for_demo.html.html可以正常显示，但放入b.html引入iframe_for_demo.html后，视频窗口位置会一直错误

1放在components下，作为xx.vue组件，使用方式为

<xx :cameras="[]" layout='2x2'></xx?

2 替换后台提供的appkey secretct等参数，安装完必备软件后可以预览。

宽高这里是通过css样式写的，辅助大屏可视化rem用实际自行取舍也可以不动。
下载参考
https://blog.csdn.net/hbjiankely/article/details/103169234

<template>
    <div class="video-container">
        <div class="videoMain" ref="playWndBox">
            <div id="playWnd" :class="{ 'zhdl': layout == '2x2', 'zhtc': layout == '3x3' }"></div>
        </div>
    </div>
</template>

<script>
// 海康威视插件对象
let WebControl = window.WebControl;
// let WebControl = null;
// 海康威视相关函数和状态
let oWebControl = null;
let initCount = 0;
export default {
    props: {
        cameras: {
            type: Array,
            default: () => '',
        },
        layout: {
            type: String,
            default: () => '2x2',
        },
    },
    data() {
        return {
            cameraIndexCode: '', // 监控点编号
            playWndWidth: 0, // 播放器宽度
            playWndHeight: 0, // 播放器高度
            objData: {
                appkey: '12345678', // 海康平台的 AppKey
                ip: '10.0.3.202', // 平台地址
                secret: 'v6EasdsdEFoV6', // Secret
                port: 443, // 端口
                playMode: 0, // 0 预览，1 回放
                layout: '2x2', // 页面布局
            },
            params: {
                openType: 0, // 打开类型
                StartTime: '', // 回放开始时间
                EndTime: '', // 回放结束时间
                stopState: 0, // 停止状态
            },
        };
    },
    mounted() {
        console.log('mounted')
        // css固定的宽高 用ref获取 
        const playWndBox = this.$refs.playWndBox;
        this.playWndWidth = playWndBox.clientWidth;
        this.playWndHeight = playWndBox.clientHeight;

        // 初始化插件
        this.initPlugin();

        // 监听窗口滚动事件，调整插件大小
        window.addEventListener('scroll', () => {
            if (oWebControl) {
                oWebControl.JS_Resize(this.playWndWidth, this.playWndHeight);
            }
        });
        // 监听窗口大小变化事件，调整插件大小
        window.addEventListener('resize', () => {
            if (oWebControl) {
                oWebControl.JS_Resize(this.playWndWidth, this.playWndHeight);
            }
        });
    },
    methods: {
        initPlugin() {
            // 初始化播放器插件
            oWebControl = new WebControl({
                szPluginContainer: 'playWnd',
                iServicePortStart: 15900,
                iServicePortEnd: 15900,
                szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // IE10 ActiveX clsid
                cbConnectSuccess: () => {
                    initCount = 0;

                    oWebControl.JS_StartService('window', {
                        dllPath: './VideoPluginConnect.dll',
                    }).then(() => {
                        oWebControl.JS_CreateWnd('playWnd', this.playWndWidth, this.playWndHeight, {
                            bEmbed: true,
                            cbSetDocTitle: (uuid) => {
                                oWebControl._pendBg = false;
                            },
                        }).then(() => {
                            // 初始化和播放
                            const params = {
                                argument: {
                                    appkey: this.objData.appkey,
                                    ip: this.objData.ip,
                                    port: this.objData.port,
                                    secret: this.objData.secret,
                                    enableHTTPS: 1,
                                    layout: this.layout,
                                    playMode: 0,
                                },
                                funcName: 'init',
                            };
                            console.log('初始化参数:', params);
                            this.requestInterface(JSON.stringify(params));
                            this.cameras.forEach((cameraIndexCode, index) => {
                                const params = {
                                    argument: {
                                        cameraIndexCode,
                                        ezvizDirect: 0,
                                        gpuMode: 0,
                                        streamMode: 1,
                                        transMode: 1,
                                        wndId: index + 1,
                                    },
                                    funcName: 'startPreview',
                                };
                                this.requestInterface(JSON.stringify(params));
                            });
                        });

                        oWebControl.JS_RequestInterface({
                            funcName: 'setFullScreen',
                        }).then((oData) => {
                            console.log(oData);
                        });
                    });
                },
                cbConnectError: () => {
                    console.log('cbConnectError');
                    oWebControl = null;
                    document.getElementById('playWnd').innerHTML = '插件未启动，正在尝试启动，请稍候...';
                    WebControl.JS_WakeUp('VideoWebPlugin://');
                    initCount++;
                    if (initCount < 3) {
                        setTimeout(() => {
                            this.initPlugin();
                        }, 3000);
                    } else {
                        document.getElementById('playWnd').innerHTML = '插件启动失败，请检查插件是否安装！';
                    }
                },
                cbConnectClose: (bNormalClose) => {
                    if (bNormalClose) {
                        console.log('cbConnectClose normal');
                    } else {
                        console.log('cbConnectClose exception');
                    }

                    oWebControl = null;
                    document.getElementById('playWnd').innerHTML = '插件未启动，正在尝试启动，请稍候...';
                    WebControl.JS_WakeUp('VideoWebPlugin://');
                    initCount++;
                    if (initCount < 3) {
                        setTimeout(() => {
                            this.initPlugin();
                        }, 3000);
                    } else {
                        document.getElementById('playWnd').innerHTML = '插件启动失败，请检查插件是否安装！';
                    }
                },
            });
        },

        requestInterface(value) {
            if (oWebControl) {
                oWebControl.JS_RequestInterface(JSON.parse(value)).then((oData) => {
                    // console.log('接口返回:', oData);
                });
            }
        },
    },
    beforeDestroy() {
        console.log(1111, 'beforeDestroy')
        this.playWndHeight = 0
        this.playWndWidth = 0
        if (oWebControl) {
            oWebControl.JS_RequestInterface({
                funcName: 'stopPreview',
            }).then((oData) => {
                console.log('stopPreview成功:', oData);
            });
            oWebControl.JS_HideWnd();
            // 切换其余页暂不考虑
            // oWebControl.JS_Disconnect();
            // oWebControl = null;
        }
    },
};
</script>

<style scoped>
.video-container {
    max-width: 1360px;
    /* 根据需要调整 */
    margin: 0 auto;
    overflow: hidden;
}

.videoMain {
    background-color: #000;
    margin: 0 auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.zhdl {
    width: 930px;
    height: 350px;
}

.zhtc {
    width: 657px;
    height: 530px;
}
</style>