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

Question

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

任何以前的参考或github代码库实现它也可以工作。

谢谢你的帮助！

Answer 1

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

在您的例子中，您可以使用CSS、网格或任何您选择的框架来构建网格布局。要将Agora连接到您的网格布局，您需要使用stream-published事件创建一个新的网格元素，并订阅新的流。解析subscribe() promise后，使用视频轨道的.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);
  }
});