paint-brush
如何使用浏览器和 Amazon IVS 与多个主机进行直播经过@amazonivs
4,199 讀數
4,199 讀數

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

太長; 讀書

在上一篇文章中,我们学习了如何创建虚拟“舞台”以使用 Amazon Interactive Video Service (Amazon IVS) 创建实时视频聊天下一步是将本地和远程参与者组合(或“复合”)到可以发布到 Amazon IVS 通道的单个流。为此,我们还可以使用 Web Broadcast SDK,让我们看看它是如何完成的。
featured image - 如何使用浏览器和 Amazon IVS 与多个主机进行直播
Amazon Interactive Video Service (IVS)  HackerNoon profile picture
0-item


上一篇文章中,我们学习了如何创建虚拟“舞台”,以便使用 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 ,您还会注意到它可以包含源的heightwidthxy位置的值。当我们为每个参与者添加视频图层时,我们将稍后利用这些属性。

将参与者音频和视频添加到广播客户端

接下来,我们将把每个参与者的音频和视频添加到广播客户端。我们将在上一篇文章中定义的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硬编码为适合单个参与者的值。在您的应用程序中,您需要根据当前参与对话的用户数量动态计算heightwidthxy值。


 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 通道的替代选项。