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

我正在制作一个视频聊天应用程序，其中我想显示每个连接到房间的用户的图像。最初，我希望在应用程序的底部显示画布，一旦用户单击特定画布，相应的画布将在浏览器窗口中拉伸和打开。 已连接的用户：

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

---

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

感谢您的帮助

---

提前感谢。

这里是Twilio开发者福音传道者

您评论中的代码似乎表明您只选择了其中一个视频（因为您使用的是

querySelector

），这就是为什么只有一个视频出现的原因

顺便说一句，我建议不要使用

setInterval

进行此类操作，因为它专门用于动画和显示运动图像

我想试试这样的东西：

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

函数drawVideos（）{
const videoContainer=document.querySelector（“#远程媒体”）；
const canvas=document.querySelector（'canvas'）；
const context=canvas.getContext（'2d'）；
常数高度=200；
常数宽度=320；
canvas.height=高度；
函数drawFrame（）{
const videos=videoContainer.querySelectorAll（'video'）；
canvas.width=videos.length*width；
context.fillRect（0,0，canvas.width，canvas.height）；
for（设i=0，len=videos.length；i

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

另一件值得检查的事情是，您只查看

#remote media

元素，您的视频中可能有一个是本地媒体

---

无论如何，试一试，让我知道它是怎么回事。

你有什么代码吗？我正在使用webrtc和twilio。下面是将视频作为图像发布到画布的代码<代码>设置间隔（函数（）{let video=document.querySelector（'#远程媒体视频'）；let canvas=document.querySelector（'canvas'）；let context=canvas.getContext（'2d'）；canvas.width=320；canvas.height=200；context.fillRect（0，0，canvas.width，canvas.height）；context.drawImage（video，0，canvas.width，canvas.height）；}，100）;@ImeshChandrasiri以上是我希望为收到的每个视频创建单独画布的代码。但我想上面的代码并没有做到这一点。我仍在学习js，所以请帮助我。好的，当然，然后你需要创建尽可能多的画布，因为你有视频，然后在他们上面像上面一样画。试一试，让我知道你进展如何。以下是我尝试过的：

function x（）{let canv，context，vids；let vid=document.querySelector（“#远程媒体视频”）；用于（让我=0；看，这样行吗？顺便说一句，我认为你不需要使用
j
的内部循环。我以代码为起点，找到了自己的方法，能够在单独的画布中显示多个流。非常感谢。