logo
Menu
Build a UGC Live Streaming App with Amazon IVS: Displaying Recent Broadcasts (Lesson 6.1)

Build a UGC Live Streaming App with Amazon IVS: Displaying Recent Broadcasts (Lesson 6.1)

Welcome to Lesson 6.1 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

Intro

In this lesson, we'll learn how the StreamCat application displays a list of recent broadcasts on a user's channel.

Displaying Recent Broadcasts

In lesson 3.5, we learned how StreamCat captures recording events in an object called Stream. These Stream objects contain all of the necessary information to playback a video on demand (VOD) version of a user's live stream.
Channel Stream Relationship
Channel Stream Relationship
StreamCat renders a list of all recent streams on the homepage, as well as all of a user's recent streams on their channel page.
1
2
3
4
5
6
7
const recentBroadcasts = await Stream
.query()
.whereNotNull('recordingEndedAt')
.orderBy('startedAt', 'desc')
.preload('channel')
.preload('category')
.limit(8);
This query retrieves all streams that are complete (recordingEndedAt is not null), orders them by most recent (startedAt desc), and limits the query to the most recent 8 VODs. Your application might enable pagination to allow viewers to continue browsing, but for demo purposes, StreamCat limits this to the 8 most recent broadcasts for the home page.
Similarly, the user's channel page retrieves the most recent 8 VOD streams for a Channel.
1
2
3
4
5
6
7
8
9
10
11
const channel = await Channel
.query()
.preload('category')
.preload('streams', (streamQry) => {
streamQry
.whereNotNull('recordingEndedAt')
.orderBy('startedAt', 'desc')
.limit(8);
})
.where('name', params.channelName)
.first();
The front-end loops over these streams and renders a thumbnail with some meta information (the title, category, and the relative time).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@each(stream in recentBroadcasts)
<div>
<a href="/vod/{{stream.id}}">
<div>
<img src="{{stream.latestThumbnail}}" />
<div>
<span>{{stream.startedRelativeTime}}</span>
</div>
</div>
</a>
<div>
<a href="/channel/{{stream.channel.name}}">
<div>{{stream.channel.name}}</div>
</a>
<a href="/vod/{{stream.id}}">
<div>{{stream.title || 'Untitled Stream'}}</div>
</a>
<div>
{{stream.category?.name || ''}}
</div>
</div>
</div>
@end
The Stream object has a helper method to determine the most recent thumbnail to use for a VOD.
1
2
3
public get latestThumbnail() {
return `https://${Env.get('CF_DOMAIN')}/${this.recordingPath}/media/latest_thumbnail/thumb.jpg`;
}

Summary

In this lesson, we learned how StreamCat retrieves and displays a list of recent broadcasts. In the next lesson, we'll see how to playback a VOD.

Links

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.