如何使用浏览器和 Amazon IVS 与多个主机进行直播

在上一篇文章中，我们学习了如何创建虚拟“舞台”，以便使用 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，让我们看看它是如何完成的。

创建广播客户端

如果您还记得，在上一篇文章中，我们在DOMContentLoaded处理程序内部调用了几个函数，这些函数启用权限、获取设备、配置Stage实例并处理加入 stage。我们将向此流程添加一个名为initBroadcastClient()的方法，我们可以使用它来创建IVSBroadcastClient的实例。我们需要在组合流的标记中使用<canvas>元素，以便我们的参与者可以预览最终将广播到 Amazon IVS 频道的内容。

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

renderAudioToClient()函数看起来类似，但使用 SDK 的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 通道的替代选项。