在 中，我们学习了如何创建虚拟“舞台”，以便使用 Amazon Interactive Video Service (Amazon IVS) 为最多 12 名参与者创建实时视频聊天体验。作为一个独立的功能，它非常强大，使我们能够向我们的应用程序添加实时协作。然而，创建此功能的目的是使开发人员能够轻松创建类似于 Twitch 上的“Guest Star”功能的协作直播体验。在这篇文章中，我们将在之前的演示的基础上，将所有参与者的音频和视频源合并到一个源中，并将该源广播到 Amazon IVS 频道。 上一篇文章 如果您尚未阅读上一篇文章，则应该在继续阅读本文之前先阅读上一篇文章。回顾一下，在那篇文章中我们学习了如何： 使用适用于 JavaScript 的 AWS 开发工具包 (v3) 创建阶段资源 使用适用于 JavaScript 的 AWS 开发工具包 (v3) 创建阶段参与者令牌 使用Web Broadcast SDK连接虚拟舞台，参与者之间进行实时视频聊天 创建协作式实时流媒体体验的下一步是将本地和远程参与者组合（或“复合”）为可发布到 Amazon IVS 通道的单个流。为此，我们还可以使用 Web Broadcast SDK，让我们看看它是如何完成的。 创建广播客户端 如果您还记得，在上一篇文章中，我们在 处理程序内部调用了几个函数，这些函数启用权限、获取设备、配置 实例并处理加入 stage。我们将向此流程添加一个名为 的方法，我们可以使用它来创建 的实例。我们需要在组合流的标记中使用 元素，以便我们的参与者可以预览最终将广播到 Amazon IVS 频道的内容。 DOMContentLoaded Stage initBroadcastClient() IVSBroadcastClient <canvas> const initBroadcastClient = async () => { broadcastClient = IVSBroadcastClient.create({ streamConfig: IVSBroadcastClient.STANDARD_LANDSCAPE, ingestEndpoint: '[YOUR INGEST ENDPOINT]', }); const previewEl = document.getElementById('broadcast-preview'); broadcastClient.attachPreview(previewEl); const bgImage = new Image(); bgImage.src = '/images/stage_bg.png'; broadcastClient.addImageSource(bgImage, 'bg-image', { index: 0 }); }; 为了使事情在视觉上更具吸引力，我使用 将背景图像添加到流中。 方法接收三个参数：图像、源的唯一名称以及用于定义源的 （或“图层”）的 对象。如果您检查 对于 ，您还会注意到它可以包含源的 、 、 和 位置的值。当我们为每个参与者添加视频图层时，我们将稍后利用这些属性。 addImageSource() addImageSource() index VideoComposition 文档 VideoComposition height width x y 将参与者音频和视频添加到广播客户端 接下来，我们将把每个参与者的音频和视频添加到广播客户端。我们将在上一篇文章中定义的 处理程序内部执行此操作。修改该函数以添加对两个新函数的调用。 StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => { renderParticipant(participant, streams); renderVideosToClient(participant, streams.find(s => s.streamType === StreamType.VIDEO)); renderAudioToClient(participant, streams.find(s => s.streamType === StreamType.AUDIO)); }); 现在让我们创建 函数。在这里，我将 硬编码为适合单个参与者的值。在您的应用程序中，您需要根据当前参与对话的用户数量动态计算 、 、 和 值。 renderVideosToClient() VideoComposition height width x y const renderVideosToClient = async (participant, stream) => { const participantId = participant.id; const videoId = `video-${participantId}`; const composition = { index: 1, height: 984, width: 1750, x: 85, y: 48 }; const mediaStream = new MediaStream(); mediaStream.addTrack(stream.mediaStreamTrack); broadcastClient.addVideoInputDevice(mediaStream, videoId, composition); }; 函数看起来类似，但使用 SDK 的 方法来添加音轨。 renderAudioToClient() addAudioInputDevice() const renderAudioToClient = async (participant, stream) => { const participantId = participant.id; const audioTrackId = `audio-${participantId}`; const mediaStream = new MediaStream(); mediaStream.addTrack(stream.mediaStreamTrack); broadcastClient.addAudioInputDevice(mediaStream, audioTrackId) }; 此时，阶段已准备好通过调用 广播到频道。当参与者离开舞台时，我们还需要处理将其从 中删除的问题。为此，请更新 的处理程序。 broadcastClient.startBroadcast('[YOUR STREAM KEY]') broadcastClient StageEvents.STAGE_PARTICIPANT_STREAMS_REMOVED stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_REMOVED, (participant, streams) => { const videoTrackId = `video-${participant.id}`; const audioTrackId = `audio-${participant.id}`; if (broadcastClient.getVideoInputDevice(videoTrackId)) broadcastClient.removeVideoInputDevice(videoTrackId); if (broadcastClient.getAudioInputDevice(audioTrackId)) broadcastClient.removeAudioInputDevice(audioTrackId); const videoId = `${participant.id}-video` document.getElementById(videoId).closest('.participant-col').remove(); updateVideoCompositions(); // function not defined in demo, implementation will vary }); 以下是单个参与者的实施情况。请注意，每个阶段参与者将显示在底部屏幕上，并且要广播的合成视图显示在上方。 当多个参与者加入虚拟舞台时，应用程序会调整布局以适应每个参与者。 当“主持人”参与者单击“广播”按钮时，合并的对话将作为复合视图广播到 Amazon IVS 通道，所有参与者的音频和视频将合并为单个流。 概括 在这篇文章中，我们学习了如何使用多个远程参与者的音频和视频创建实时流广播。在以后的文章中，我们将研究用于创建复合流并将其广播到 Amazon IVS 通道的替代选项。
