低代码平台接入萤石云平台DEMO

需求描述

某工矿企业 需要在数据大屏，安全生产板块中嵌入现场视频监控，根据车间和工段的不同，实现视屏切换，本内容仅供演示DEMO，自行替换accessToken，以及url.

控制流程

flowchart TD
A[页面加载] --> B[动态引入 ezuikit.js]
B --> C[设置 EZUIKit]
C --> D[调用 initPlayers]
D --> E{判断 gss 值}
E -->|等于 “0101”| F[加载配置组 0101]
E -->|等于 “0108”| G[加载配置组 0108]
E -->|等于 “0103”| H[加载配置组 0103]
E -->|等于 “0102”| I[加载配置组 0102]
F --> J[创建播放器实例]
G --> J
H --> J
I --> J
J --> K[保存至 EZUIKitPlayers 数组]

let EZUIKit = null; // 第三方库引用
let EZUIKitPlayers = []; // 播放器实例数组
let gss = ''; // 全局保存当前选择的 gss 值

// 页面加载时引入 ezuikit.js 并初始化播放器
Page.onLoad = function () {
    System.import('/gemcoderAppResource?appuuid=11ce5afa919d4289bdb6e71912c172b0&path=/files/ezuikit.js&resourcesId=1280590&version=0')
        .then(res => {
            EZUIKit = res.default;
            initPlayers(gss); // 使用当前 gss 初始化播放器
        })
        .catch(err => {
            console.error('加载 ezuikit.js 失败:', err);
        });
};

// 下拉选择变化时更新 gss 并重新初始化播放器
Page.下拉选择OnChange = function () {
    gss = gmcom.gs.value;
    console.log('选中的 gss:', gss);
    initPlayers(gss);
};

/**
 * 根据 gss 获取摄像头配置
 * @param {string} gss - 当前选择的 gss 值
 * @returns {Array} 摄像头配置数组
 */
function getPlayerConfigs(gss) {
    const commonConfig = [
        { id: 'yt-dtView-10374446859161', accessToken: '---------- ',url: '------' },
        { id: 'yt-dtView-10474436971042', accessToken: '---------- ',url: '------' },
        { id: 'yt-dtView-17744698706218', accessToken: '---------- ',url: '------' },
        { id: 'yt-dtView-10744075992380', accessToken: '---------- ',url: '------' }
    ];

    if (gss === '0102') {
        return [
            { id: 'yt-dtView-10374446859161', accessToken: '---------- ',url: '------' },
            { id: 'yt-dtView-10474436971042', accessToken: '---------- ',url: '------' },
            { id: 'yt-dtView-17744698706218', accessToken: '---------- ',url: '------' }
        ];
    }

    return commonConfig;
}

/**
 * 初始化播放器
 * @param {string} gss - 当前选择的 gss 值
 */
function initPlayers(gss) {
    // 清理旧播放器资源
    if (EZUIKitPlayers.length > 0) {
        EZUIKitPlayers.forEach(player => {
            if (player.stop) player.stop(); // 停止播放
        });
        EZUIKitPlayers = [];
    }

    // 获取配置并创建播放器
    const playerConfigs = getPlayerConfigs(gss);

    const self = this; // 保存 this 上下文
    playerConfigs.forEach(config => {
        const player = new EZUIKit.EZUIKitPlayer({
            id: config.id,
            accessToken: config.accessToken,
            url: config.url,
            autoplay: false, // 初始不自动播放
            audio: 0, // 默认关闭声音
            handleSuccess: () => {
                // 成功回调
            },
            handleError: (e) => {
                self.doEvent('onError', e); // 确保 this 正确
            }
        });

        EZUIKitPlayers.push(player);
    });
}