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.

Series: Build a UGC Live Streaming App with Amazon IVS (30 articles)

1
Build a UGC Live Streaming App with Amazon IVS: Course Intro (Lesson 1.1)
…
20
Build a UGC Live Streaming App with Amazon IVS: Add Low-Latency Stream Playback (Lesson 5.2) This article
21
Build a UGC Live Streaming App with Amazon IVS: Adding Real-Time Stream Playback (Lesson 5.3)

Todd Sharp

Published Jan 2, 2024

Last modified Jan 2, 2024

Intro

In this lesson, we'll see how the StreamCat application adds low-latency stream playback to a user's channel page.

Adding Live Stream Playback

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 the Channel from the database and sent it along to the view. We'll need the channel id, and the playbackURL to play the live stream and post analytics later on, but the rest of the information in the Channel object isn't necessary for the front-end. Additionally, there is some information in the Channel that should not be exposed to the front-end (like the user's streamKey). 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.

1
<video id="live-player" autoplay playsinline controls muted></video>

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.

1
<script src="https://player.live-video.net/1.19.0/amazon-ivs-player.min.js"></script>

Once we have the player SDK and a <video> tag, we can create an instance of the IVS player.

1
2
const ivsPlayer = IVSPlayer.create();
ivsPlayer.attachHTMLVideoElement(document.getElementById(id));

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.

1
this.ivsPlayer.load(this.channel?.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.

1
2
3
4
5
this.ivsPlayer.addEventListener(IVSPlayer.PlayerEventType.ERROR, (error) => {
  if (error.code === 404 && !this.playbackInterval) {
    this.pollForStream();
  }
});

The pollForStream() method attempts to load() the playbackUrl every 5 seconds.

1
2
3
4
5
pollForStream() {
  this.playbackInterval = setInterval(async () => {
    this.ivsPlayer.load(this.channel?.playbackUrl);
  }, 5000);
}

StreamCat listens for the STATE_CHANGED event of the Amazon IVS player, and updates a variable called isLive if the current state is PLAYING.

1
2
3
this.ivsPlayer.addEventListener(IVSPlayer.PlayerEventType.STATE_CHANGED, (state) => {
  this.isLive = state === IVSPlayer.PlayerState.PLAYING;
});,

A badge that is positioned in the top right corner of the <video> element is updated accordingly.

1
2
3
4
<span 
  :class="{'text-bg-danger': isLive, 'text-bg-light border border-dark': !isLive}" 
  x-text="isLive ? 'LIVE' : 'Offline'">
</span>

Finally, we watch the isLive variable and clear or re-start the polling interval as necessary.

1
2
3
4
5
6
7
8
this.$watch('isLive', async () => {
  if (this.isLive) {
    clearInterval(this.playbackInterval);
    this.playbackInterval = null;
  } else {
    this.pollForStream();
  }
});

Summary

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.

Builder Center

Build a UGC Live Streaming App with Amazon IVS: Add Low-Latency Stream Playback (Lesson 5.2)

Series: Build a UGC Live Streaming App with Amazon IVS (30 articles)

Todd Sharp

Intro

Adding Live Stream Playback

Summary

Links

Series: Build a UGC Live Streaming App with Amazon IVS (30 articles)