在视频通话 UI (web SDK) 中设置网格布局

问题描述

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

任何以前的参考或实现它的 github 存储库也可以使用。

感谢您的帮助！

解决方法

Agora Web SDK 提供了一个视频流库，它不强制执行 UI。构建 UI 是您的任务。话虽如此，Agora 可以非常轻松地将视频聊天添加到您的应用程序中。

在您的情况下，您可以使用 CSS 网格或您选择的任何框架构建网格布局。要将 Agora 连接到您的网格布局，您可以使用 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);
  }
});