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

Question

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

任何以前的参考资料或实施它的 github repo 也可以使用。

谢谢您的帮助！

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