萤石云实际视频实时接入(生产环境)

萤石云视频接入

本示例可用于实际接入萤石云开放平台视频,同时支持音频输入和输出。

实际优化内容

1.动态获取token

2.切换各公司和车间时,自动重新初始化播放器

markup 复制代码
let EZUIKit = null; // 第三方库引用
let EZUIKitPlayers = []; // 播放器实例数组
let gss = ''; // 全局保存当前选择的 gss 值
let accessToken = ''; // 存储动态获取的 accessToken

const APP_KEY = '----------------'; // 替换为实际 appKey
const APP_SECRET = '-----------'; // 替换为实际 appSecret

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

// 下拉选择变化时更新 gss 并重新初始化播放器
Page.下拉选择OnChange = function () {
    gss = gmcom.gs.value;
    console.log('选中的 gss:', gss);
    if (EZUIKit && accessToken) {
        initPlayers(gss);
    } else {
        console.warn('EZUIKit 或 accessToken 尚未准备好');
    }
};

// 获取 accessToken
function fetchAccessToken() {
    const url = 'https://open.ys7.com/api/lapp/token/get';
复制代码
return new Promise((resolve, reject) => {
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
            appKey: APP_KEY,
            appSecret: APP_SECRET
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.code === '200') {
            resolve(data.data.accessToken);
        } else {
            reject(new Error(`获取 token 失败: ${data.msg}`));
        }
    })
    .catch(error => {
        reject(error);
    });
});
markup 复制代码
}
markup 复制代码
// 根据 gss 获取摄像头配置(不再包含 accessToken)
function getPlayerConfigs(gss) {
    const commonUrls = [
        'ezopen://open.ys7.com/-----1.hd.live',
        'ezopen://open.ys7.com/---/1.hd.live',
        'ezopen://open.ys7.com/-----/1.hd.live',
        'ezopen://open.ys7.com/-------/1.hd.live'
    ];
复制代码
let urls = [];

switch (gss) {
    case '0102':
        urls = [
            'ezopen://open.ys7.com/-------/1.hd.live',
            'ezopen://open.ys7.com/------/1.hd.live',
            'ezopen://open.ys7.com/------/1.hd.live'
        ];
        break;
    case '0103':
        urls = [
            'ezopen://open.ys7.com/--------1.hd.live',
            'ezopen://open.ys7.com/-----/1.hd.live',
            'ezopen://open.ys7.com/------/1.hd.live',
            'ezopen://open.ys7.com/--------/1.hd.live'
        ];
        break;
    case '0110':
        urls = [
            'ezopen://open.ys7.com/-------/1.hd.live',
            'ezopen://open.ys7.com/--------/1.hd.live',
            'ezopen://open.ys7.com/--------/1.hd.live',
            'ezopen://open.ys7.com/---------/1.hd.live'
        ];
        break;
    default:
        urls = [...commonUrls];
}

const baseIds = [
    'yt-dtView-10374446859161',
    'yt-dtView-10474436971042',
    'yt-dtView-17744698706218',
    'yt-dtView-10744075992380'
];

return urls.map((url, index) => ({
    id: baseIds[index],
    url: url
}));
markup 复制代码
}

//
markup 复制代码
 清理播放器资源
function clearPlayers() {
    if (EZUIKitPlayers.length > 0) {
        EZUIKitPlayers.forEach(player => {
            if (player.stop) player.stop();
        });
        EZUIKitPlayers = [];
    }
}

// 初始化播放器
function initPlayers(gss) {
    clearPlayers();
复制代码
const playerConfigs = getPlayerConfigs(gss);

playerConfigs.forEach(config => {
    const player = new EZUIKit.EZUIKitPlayer({
        id: config.id,
        accessToken: accessToken, // 使用动态获取的 token
        url: config.url,
        autoplay: false,
        audio: 0,
        handleSuccess: () => {
            // 成功回调
        },
        handleError: (e) => {
            if (typeof doEvent === 'function') {
                doEvent('onError', e);
            } else {
                console.error('doEvent 未定义:', e);
            }
        }
    });

    EZUIKitPlayers.push(player);
markup 复制代码
  });
}
markup 复制代码
// 播放按钮
Page.按钮OnClick = function () {
    EZUIKitPlayers.forEach(player => player.play());
};

// 暂停按钮
Page.按钮11OnClick = function () {
    EZUIKitPlayers.forEach(player => player.stop());
};

// 切换地址按钮
Page.按钮111OnClick = function () {
    const newUrls = [
        'ezopen://open.ys7.com/-----/1.live',
        'ezopen://open.ys7.com/------/1.live',
        'ezopen://open.ys7.com/-----/1.live',
        'ezopen://open.ys7.com/------/1.live'
复制代码
];

EZUIKitPlayers.forEach((player, index) => {
    if (index < newUrls.length) {
        player.stop().then(() => {
            player.play({ url: newUrls[index], accessToken: accessToken });
        });
    }
});

}

相关推荐
网络点点滴33 分钟前
将项目推到Github
javascript·github
HaanLen33 分钟前
React19源码系列之 Hooks (useState、useReducer、useOptimistic)
服务器·前端
yuanyxh3 小时前
《精通正则表达式》精华摘要
前端·javascript·正则表达式
小飞大王6664 小时前
简单实现HTML在线编辑器
前端·编辑器·html
Jimmy4 小时前
CSS 实现卡牌翻转
前端·css·html
百万蹄蹄向前冲4 小时前
大学期末考,AI定制个性化考试体验
前端·人工智能·面试
SuperW4 小时前
RV1126+OPENCV在视频中添加时间戳
人工智能·opencv·音视频
向明天乄4 小时前
在 Vue 3 项目中集成高德地图(附 Key 与安全密钥申请全流程)
前端·vue.js·安全
sunshine_程序媛4 小时前
vue3中的watch和watchEffect区别以及demo示例
前端·javascript·vue.js·vue3
电商数据girl5 小时前
【经验分享】浅谈京东商品SKU接口的技术实现原理
java·开发语言·前端·数据库·经验分享·eclipse·json