时间戳

首页 > 解决方案 > 在单独的画布中渲染多个视频

javascript - 在单独的画布中渲染多个视频

问题描述

我正在制作一个视频聊天应用程序，我想在其中显示连接到房间的每个用户的图像。最初，我想在应用程序底部显示画布，一旦用户单击特定画布，相应的画布就会拉伸并在浏览器窗口中打开。连接的用户： 在此处输入图像描述

在上图中，可以看到多个用户已连接，但当我关闭显示用户已连接的相应 div 时，画布中仅显示 1 个用户。

在此处输入图像描述 我想为每个连接的用户创建一个单独的画布，并在底部的栏中显示他的图像。

任何帮助表示赞赏。

提前致谢。

标签： javascripthtml5-canvashtml5-videotwiliowebrtc

解决方案

Twilio 开发人员布道者在这里。

您评论中的代码似乎表明您只选择了其中一个视频（因为您正在使用querySelector），这就是为什么只有一个视频出现。

顺便说一句，我建议不要使用setInterval这种东西，requestAnimationFrame因为它专门用于动画和显示运动图像会更好。

我会尝试这样的事情：

function drawVideos() {
  const videoContainer = document.querySelector('#remote-media');
  const canvas = document.querySelector('canvas');
  const context = canvas.getContext('2d');
  const height = 200;
  const width = 320;
  canvas.height = height;

  function drawFrame() {
    const videos = videoContainer.querySelectorAll('video');
    canvas.width = videos.length * width;
    context.fillRect(0, 0, canvas.width, canvas.height);
    for (let i = 0, len = videos.length; i < len; i++) {
      const video = videos[i];
      context.drawImage(video, i * width, 0, width, height);
    }
    requestAnimationFrame(drawFrame);
  }

  requestAnimationFrame(drawFrame);
}

这是未经测试的，我担心范围问题，但这可能是一个开始。

另一件值得检查的事情是您只在#remote-media元素内查看，并且您的一个视频可能是本地媒体。

不管怎样，试一试，让我知道进展如何。

推荐阅读