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

萤石云视频接入

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

实际优化内容

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 });
        });
    }
});

}

相关推荐
互联网搬砖老肖2 小时前
React的单向数据绑定
前端·javascript·react.js
NoneCoder2 小时前
React 生命周期与 Hook 理解解析
前端·react.js·面试
盛夏绽放2 小时前
Python常用高阶函数全面解析:通俗易懂的指南
前端·windows·python
深空数字孪生3 小时前
前端性能优化:如何让网页加载更快?
前端·性能优化
阿乐今天敲代码没3 小时前
echarts实现项目进度甘特图
前端·echarts·甘特图
john_Asura3 小时前
Vue 前端全方位性能优化指南
前端·vue.js·性能优化
日晞4 小时前
深浅拷贝?
开发语言·前端·javascript
沐土Arvin5 小时前
性能优化关键:link、script和meta的正确打开方式
开发语言·前端·javascript·设计模式·性能优化·html
叶九灵不灵5 小时前
node入门:安装和npm使用
前端·npm·node.js
Sleepless_斑马5 小时前
【FFmpeg+SDL】播放音频时,声音正常但是有杂音问题(已解决)
qt·ffmpeg·音视频