具有html元素的动态变化数组的不同位置

Question

React/Javascript 开发者请帮忙 我正在尝试创建一个具有 4video 轨道 2*2 网格的视频会议应用程序，并且远程轨道在一个数组中。当有人打开同一个网站或与它断开连接时，数组会更新。 我需要的功能是所有视频轨道的位置都应该固定。 我们有 4 个地方的视频。让用户是 1, 2 ,3 和 4 我希望用户 1 始终显示在左上角 用户 2 始终位于右上角 用户 3 始终位于左下角 用户 4 始终位于右下角。 用户的位置在每个系统上都是相同的。 另一个例子： 如果只有用户 1 和用户 4 相互连接，则视频的位置将如下所示： 左上角的用户 1 用户 4 在右下角

Answer 1

您需要一种方法来判断用户是否已连接到您的阵列中。您可以通过在断开连接时将数组元素设置为 null 或在用户数据中包含 connected 标志来实现此目的。

现在，当您渲染用户时，只需检查用户是否已连接。如果它们未连接，则呈现占位符。否则渲染视频流。