在视频通话 UI 中设置网格布局（Web SDK）

Question

我想在我使用 Agora 的 Web SDK 构建的视频通话应用程序中实现网格布局。 我正在浏览文档，但无法获得有关如何在视频会议中实现网格布局的帮助。 最佳拟合和网格布局仅在云录制 API 中可用。

任何以前的参考或实施它的 github 存储库也可以工作。

感谢您的帮助！

Answer 1

Agora Web SDK 为视频流提供了一个库，它不强制执行 UI。构建 UI 是您的任务。话虽如此，Agora 让向您的应用程序添加视频聊天变得非常容易。

在您的情况下，您可以使用 CSS 网格或您选择的任何框架构建网格布局。要将 Agora 连接到您的 Grid 布局，您可以使用 stream-published 事件来创建一个新的网格元素，然后 订阅 到新的流。一旦 subscribe() 承诺解决，使用视频轨道的 .play() 方法在特定 DOM 元素上播放视频

client.on("user-published", async (user, mediaType) => {
  // Initiate the subscription
  await client.subscribe(user, mediaType);

  // If the subscribed track is an audio track
  if (mediaType === "audio") {
    const audioTrack = user.audioTrack;
    // Play the audio
    audioTrack.play();
  } else {
    const videoTrack = user.videoTrack;
    // Play the video the given DOM_ELEMENT
    videoTrack.play(DOM_ELEMENT);
  }
});