我最近写了几篇有关使用 Amazon Interactive Video Service (Amazon IVS) 进行多主机直播的文章。这是一项令人兴奋的功能，它开启了直到最近才出现的可能性世界。我们首先了解了如何 。 创建多主机实时聊天应用程序 接下来，我们了解了如何将实时聊天会话广播到 Amazon IVS 频道。 当我们在上一篇文章中考虑将聊天参与者添加到广播客户端时，您可能注意到我做了一些作弊，并对 值进行了硬编码，这些值告诉广播客户端参与者视频在客户端上的大小和位置。 VideoComposition 好吧 - 欺骗是一个很强烈的词 - 假设我故意简化了代码以专注于广播实时聊天会话的过程。 本质上，我们在这里要寻找的是修改广播中参与者视频的大小和位置，以便当有一个视频时，布局将如下所示： 但是当有两个视频时，布局会变成这样： 当有五个时： 您明白了——根据参与者数量而变化的动态布局。 在这篇文章中，我们将介绍一种可以用来更轻松地创建动态布局的方法。我们将在上一篇文章中构建解决方案，因此如果您还没有阅读该文章，那么现在阅读可能是个好主意。 在上一篇文章中，我们监听了一个名为 的事件。在该事件的事件处理程序中，我们将参与者添加到 DOM 并将音频和视频渲染到 实例。 STAGE_PARTICIPANT_STREAMS_ADDED IVSBroadcastClient 为了呈现动态布局，我们需要跟踪会话中当前有多少参与者，因此我们将添加一个名为 的数组作为全局变量。让我们修改事件处理程序以将当前参与者 ID 推送到该数组。 participantIds stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => { //add participant id to array participantIds.push(participant.id); renderParticipant(participant, streams); renderVideosToClient(participant, streams.find(s => s.streamType === StreamType.VIDEO)); renderAudioToClient(participant, streams.find(s => s.streamType === StreamType.AUDIO)); updateVideoCompositions(); }); 在上一篇文章中，我提到未显示 方法，因为实现会有所不同。我们稍后将讨论一种可能的实现。 updateVideoCompositions() 现在，让我们看看如何获取动态布局配置，而不是像上一篇文章中那样对其进行硬编码。 获取动态大小和位置的一种方法是循环访问参与者数组，并根据参与者的数量、 的大小以及所需的行、列和填充量来计算它们。但是， ？ <canvas> 为什么 当您意识到这些值永远不会改变时，这听起来像是很多困难的代码和不必要的工作。如果您有一名参与者，视频将具有固定大小并位于 中心。 <canvas> 添加多少参与者并不重要 - 对于给定数量的参与者，每个视频的布局将始终相同。那么，当我们可以预先计算这些值并将它们存储在数组的数组中时，为什么还要浪费时间和 CPU 周期呢？ 在我的演示中，我花了 30 分钟的时间，用笔、纸和计算器密集地确定了最佳值，以确定每种可能布局的构图值。请注意：我 数学或艺术专业的，如下图所示。 不是 对于此演示，我将直播限制为仅向前 6 位参与者显示视频。您的用例可能会规定一些不同的内容，但根据我的经验，在一个直播流中包含超过 6 个参与者的视频会变得有点过于繁忙。 这是我的计算结果： const layouts = [ [{ height: 720, width: 1280, x: 320, y: 180 }], [{ height: 450, width: 800, x: 80, y: 315 }, { height: 450, width: 800, x: 1040, y: 315 }], [{ height: 450, width: 800, x: 80, y: 45 }, { height: 450, width: 800, x: 1040, y: 45 }, { height: 450, width: 800, x: 560, y: 585 }], [{ height: 450, width: 800, x: 80, y: 45 }, { height: 450, width: 800, x: 1040, y: 45 }, { height: 450, width: 800, x: 80, y: 585 }, { height: 450, width: 800, x: 1040, y: 585 }], [{ height: 337, width: 600, x: 20, y: 100 }, { height: 337, width: 600, x: 650, y: 100 }, { height: 337, width: 600, x: 1280, y: 100 }, { height: 337, width: 600, x: 340, y: 640 }, { height: 337, width: 600, x: 980, y: 640 }], [{ height: 337, width: 600, x: 20, y: 100 }, { height: 337, width: 600, x: 650, y: 100 }, { height: 337, width: 600, x: 1280, y: 100 }, { height: 337, width: 600, x: 20, y: 640 }, { height: 337, width: 600, x: 650, y: 640 }, { height: 337, width: 600, x: 1280, y: 640 }] ]; 这可能看起来令人难以承受，但请考虑外部数组元素中的每个元素都包含每个视频的组成数组。 如果有 3 个参与者，我们可以引用外部数组中的第三个元素，参与者 id 在 数组中的位置将决定哪个合成将应用于该视频。 participantIds 我们可以修改 函数以获取正确的组合，并在将视频添加到广播客户端时使用这些值。 renderVideosToClient() const renderVideosToClient = async (participant, stream) => { const participantId = participant.id; const videoId = `video-${participantId}`; // get the index of this participantId const pIdx = participantIds.indexOf(participantId); let composition = layouts[participantIds.length - 1][pIdx]; config.index = 2; const mediaStream = new MediaStream(); mediaStream.addTrack(stream.mediaStreamTrack); broadcastClient.addVideoInputDevice(mediaStream, videoId, composition); }; 但请记住 - 如果我们仅在添加参与者时执行此操作，则之前的视频合成仍将反映添加时应用的合成。这就是 函数发挥作用的地方。 updateVideoCompositions() 在这里，我们循环访问 数组，从 中获取正确的组合，并使用 （ ） 的方法。 participantIds layouts updateVideoDeviceComposition() 文档 broadcastClient const updateVideoCompositions = async () => { let idx = 0; for (const p of participantIds) { const videoId = `video-${p}`; let config = layouts[filteredParticipantIds.length - 1][idx]; config.index = 2; broadcastClient.updateVideoDeviceComposition(videoId, config); idx = idx + 1; } }; 我们还应该确保当参与者离开舞台时，我们从数组中删除参与者 ID，并再次更新所有视频的合成。 stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_REMOVED, (participant, streams) => { const participantId = participant.id; // remove participant id from array const pIdx = participantIds.findIndex(id => id === participantId); participantIds.splice(pIdx, 1); const videoTrackId = `video-${participantId}`; const audioTrackId = `audio-${participantId}`; if (broadcastClient.getVideoInputDevice(videoTrackId)) broadcastClient.removeVideoInputDevice(videoTrackId); if (broadcastClient.getAudioInputDevice(audioTrackId)) broadcastClient.removeAudioInputDevice(audioTrackId); const videoId = `${participantId}-video`; document.getElementById(videoId).closest('.participant-col').remove(); updateVideoCompositions(); }); 如上所述，您很可能希望限制通过广播客户端添加到直播流的视频量。您可能想要添加静态图像而不是最终视频，以显示参与者数量多于显示的数量： 概括 在这篇文章中，我们学习了使用 Amazon IVS 广播多主机舞台时动态布局的一种方法。在以后的文章中，我们将研究使用多个主机进行广播的其他选项。一如既往，如果您有任何问题或意见，请在下面留下。 也发布 在这里
