Build a UGC Live Streaming App with Amazon IVS: Add Low-Latency Stream Playback (Lesson 5.2)
Welcome to Lesson 5.2 in this series where we're looking at building a web based user-generated content live streaming application with Amazon IVS. This entire series is available in video format on the AWS Developers YouTube channel and all of the code related to the sample application used in this series can be viewed on GitHub. Refer to the links at the end of the post for more information.
Todd Sharp
Amazon Employee
Published Jan 2, 2024
In this lesson, we'll see how the StreamCat application adds low-latency stream playback to a user's channel page.
As we saw in the last lesson, to playback a low-latency live stream, we need the
playbackUrl from the Channel object. š” Note: In the last lesson, we retrieved theChannelfrom the database and sent it along to the view. We'll need the channelid, and theplaybackURLto play the live stream and post analytics later on, but the rest of the information in theChannelobject isn't necessary for the front-end. Additionally, there is some information in theChannelthat should not be exposed to the front-end (like the user'sstreamKey). Be careful to not accidentally expose sensitive information in your application.
First, we need to add a
<video> tag to the page. This element will be used to play the live stream.We'll also need to include the Amazon IVS player SDK. At the time this course was published, the latest version of the player SDK was
1.19.0 - your player might use a newer version of this SDK.Once we have the player SDK and a
<video> tag, we can create an instance of the IVS player.Next, we call
load() to load the live stream. Since we set the autoplay attribute of the <video> tag, we don't have to call the play() method of the IVS player. If we had omitted that attribute, we'd have to call ivsPlayer.play() after loading the playbackUrl.If the channel is not broadcasting, a
404 error will be thrown. We can listen for this error, and begin polling every 5 seconds to attempt to load the channel. This approach allows us to auto-play a live stream whenever it goes live for any viewers on the page without forcing them to reload the page.The
pollForStream() method attempts to load() the playbackUrl every 5 seconds.StreamCat listens for the
STATE_CHANGED event of the Amazon IVS player, and updates a variable called isLive if the current state is PLAYING.A badge that is positioned in the top right cornerĀ of the
<video> element is updated accordingly.Finally, we watch the
isLive variable and clear or re-start the polling interval as necessary.In this lesson, we learned how the StreamCat application plays back low-latency live streams. In future lessons, we'll look at how StreamCat collects and posts playback analytic data and adds user chat functionality. In the next lesson, we'll look at real-time live stream playback.
Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.