我正在制作一个视频聊天应用程序,其中我想显示连接到房间的每个用户的图像。最初,我想在应用程序的底部显示画布,一旦用户单击特定的画布,相应的画布就会拉伸并在浏览器窗口中打开。
已连接的用户:
javascript - 在单独的 Canvas 中渲染多个视频-LMLPHP

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

javascript - 在单独的 Canvas 中渲染多个视频-LMLPHP
我想为每个已连接的用户创建一个单独的画布,并在底部的栏中显示其图像。

任何帮助表示赞赏。

提前致谢。

最佳答案

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

您评论中的代码似乎表明您只选择了其中一个视频(因为您使用的是querySelector),这就是为什么只显示一个视频的原因。

顺便说一句,我建议不要在这种情况下使用setIntervalrequestAnimationFrame会更好,因为它专门用于动画和显示运动图像。

我会尝试这样的事情:

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元素中查找,并且大概其中一个视频是本地媒体。

无论如何,试一试,让我知道如何进行。

关于javascript - 在单独的 Canvas 中渲染多个视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51278635/

10-13 01:01