logo
Menu
Build a UGC Live Streaming App with Amazon IVS: Video On Demand (VOD) Playback (Lesson 6.2)

Build a UGC Live Streaming App with Amazon IVS: Video On Demand (VOD) Playback (Lesson 6.2)

Welcome to Lesson 6.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

Intro

In this lesson, we'll look at how the StreamCat application handles video on demand (VOD) playback for a user's recent live streams.

Retrieving a Stream

In lesson 6.1, we learned how the application retrieves and displays a list of recent Stream objects. The StreamCat endpoint for VOD playback expects the id of the Stream, and retrieves the Stream, its Channel and the channel's Category.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Route.get('/vod/:streamId', async ({ auth, view, params, response }) => {
const stream = await Stream
.query()
.where('id', params.streamId)
.preload('channel', (channelQry) => {
channelQry
.preload('category')
.preload('streams', (streamsQry) => {
streamsQry
.whereNotNull('recordingEndedAt')
.orderBy('startedAt', 'desc')
.limit(8);
});
})
.first();
if (!stream) return response.redirect('/');
return view.render('vod', {
stream,
channel: stream?.channel,
});
});
If you remember from lesson 1.4, all low-latency live streams are recorded to Amazon S3, and the Amazon S3 bucket is exposed via Amazon CloudFront. If we combine the CloudFront domain, the recordingPath from the Stream, and the static path for the master playlist that is created by the Amazon IVS recording configuration, we can retrieve a masterPlaylistUrl for the VOD.
1
2
3
4
@computed()
public get masterPlaylistUrl() {
return `https://${Env.get('CF_DOMAIN')}/${this.recordingPath}/media/hls/master.m3u8`;
}
The masterPlaylistUrl can then be used by the Amazon IVS player SDK to playback the VOD in the same way the application plays live streams.
First, a <video> tag:
1
<video id="vod-player" autoplay playsinline controls></video>
Next, create the IVS player and load the masterPlaylistUrl.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async init() {
this.ivsPlayer = this.getIvsPlayer('vod-player');
this.initVodPlayback();
},
getIvsPlayer(id) {
const ivsPlayer = IVSPlayer.create();
ivsPlayer.attachHTMLVideoElement(document.getElementById(id));
return ivsPlayer;
},
initVodPlayback() {
this.ivsPlayer.load(this.stream?.masterPlaylistUrl);
this.ivsPlayer.addEventListener(IVSPlayer.PlayerEventType.STATE_CHANGED, (state) => {
this.isPlaying = state === IVSPlayer.PlayerState.PLAYING;
});
}

Summary

In this lesson, we learned how the StreamCat application handles video on demand (VOD) playback for a user's recent live streams. In a future lesson, we'll see how to render chat messages during VOD playback. This concludes lesson 6. In lesson 7, we'll look at how StreamCat captures and persists playback metrics.

Links

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