如何实现HTML Canvas动态渲染动态ID的视频与文本数据？

1. 维护动态视频元素追踪池 #

创建一个集合存储已渲染的参会者视频元素，以动态生成的ID为标识，在视频渲染时同步存入：

// 全局/模块内维护视频元素池
const participantVideos = new Map();

// 修改参会者视频渲染函数，添加追踪逻辑
function initiateParScreens(participantId, videoElement) {
    // 原有视频渲染逻辑（如设置ID、挂载到DOM）
    videoElement.id = `participant-video-${participantId}`;
    document.body.appendChild(videoElement);
    
    // 将视频元素存入池
    participantVideos.set(participantId, videoElement);
    
    // 触发Canvas更新
    updateCanvas();
}

2. 绑定Janus事件触发Canvas更新 #

利用Janus的参会者加入/离开/流更新事件，触发Canvas重绘：

// 参会者加入时触发（示例，需匹配你实际使用的Janus事件）
janus.on('participantJoined', (participant) => {
    initiateParScreens(participant.id, participant.videoElement);
});

// 视频流更新时触发
janus.on('streamUpdated', (participantId) => {
    updateCanvas();
});

// 参会者离开时移除元素并更新Canvas
janus.on('participantLeft', (participantId) => {
    participantVideos.delete(participantId);
    updateCanvas();
});

3. 实现统一的Canvas动态更新函数 #

遍历视频池元素，同时读取指定文本元素内容，批量渲染到Canvas：

const canvas = document.getElementById('your-canvas-id');
const ctx = canvas.getContext('2d');
const targetTextEl = document.getElementById('指定文本元素ID');

function updateCanvas() {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 渲染文本数据
    const textContent = targetTextEl.textContent || '';
    ctx.fillStyle = '#333';
    ctx.font = '16px sans-serif';
    ctx.fillText(textContent, 20, 30);
    
    // 动态渲染所有参会者视频
    let x = 20;
    let y = 60;
    const videoSize = { width: 200, height: 150 };
    const gap = 20;

    for (const [id, video] of participantVideos.entries()) {
        // 确保视频已加载可播放
        if (video.readyState >= 2) {
            ctx.drawImage(video, x, y, videoSize.width, videoSize.height);
            // 可选：渲染参会者ID标签
            ctx.fillText(`参会者ID: ${id}`, x, y + videoSize.height + 18);
        }

        // 自动换行排版
        x += videoSize.width + gap;
        if (x + videoSize.width > canvas.width) {
            x = 20;
            y += videoSize.height + gap + 20;
        }
    }

    // 用requestAnimationFrame实现流畅的实时更新
    requestAnimationFrame(updateCanvas);
}

// 启动Canvas更新循环
updateCanvas();

4. 文本元素动态更新适配 #

用MutationObserver监听指定文本元素的内容变化，触发Canvas更新：

const textObserver = new MutationObserver(() => {
    updateCanvas();
});

textObserver.observe(targetTextEl, {
    childList: true,
    subtree: true,
    characterData: true
});

关键注意事项 #

• 视频渲染前判断readyState >= 2，避免渲染空白画面
• 参会者离开时务必从视频池移除元素，防止内存泄漏
• 使用requestAnimationFrame驱动更新，比setInterval更适配浏览器刷新率

内容的提问来源于stack exchange，提问作者G7S