Jan 7, 2020
How to Stream Videos with AWS
Streaming Introduction
If you know how streaming works, jump down to “Using Video On Demand on AWS”.
A big mistake that first time developers make is not processing videos correctly for streaming. While a single 10MB video isn’t problematic, having dozens of videos over this size that haven’t been processed for streaming has two problems.
- If you want to jump to the half way point of a video, it has to load all of the video before the half way point before you can start watching
- You can’t dynamically change the quality of the video.
In the case of point 1, if you have a movie that’s 1 hour long and is 1GB, you will have to download 500MB first before you can start watching it from the half way point.
In the case of point 2, if you are 5 minutes into a video and the video is 720p, if you want to then jump the quality to 1080p, you will have the same issue as point 1.
The solution to this is to use Streaming Protocols. In a nutshell, the video is split into tiny files (chunks) that are then cataloged like an audio playlist. The catalog knows where each chunk belongs in the video. E.g, if you wanted to jump to the half way point in a video, then the playlist knows that chunk number 50 is the closest and starts streaming from there.
Splitting the video up not only allows you to quickly change positions in a video, but it also saves bandwidth since it doesn’t need to download the video prior to the position you want to watch from. This especially helps speed up viewing and saves bandwidth on a smartphone.
This also helps with changing video quality as it simply needs to “up” the quality on the next “chunk” and the video continues as usual.
Using Video On Demand on AWS
Streaming videos with AWS has become extremely simple with the introduction of Video on Demand on AWS solution. This self managed deployment takes from half an hour to an hour to setup and requires only a few questions to get going.
This video solution handles the following:
- Monitors an S3 bucket for new videos
- Once a video is dropped in the bucket, it then passes it to a video converter to create different quality versions
- It then passes it to the Media Packager which splits the files up and catalogs them
- It’s then placed into a second S3 bucket for viewing
While the process is relatively simple, there are a few things that weren’t explained that I had trouble with.
The progress of the media conversion
Once you drop a video into the S3 bucket, I wasn’t informed about what was happening.
I eventually found that you can view the progress of the conversion here (assuming you’re using us-east-1 region): https://us-east-1.console.aws.amazon.com/mediaconvert/home?region=us-east-1#/jobs/list
The 4K, 10 minute video that I tested it with took about an hour to process and it produced a 1080p, 720p and 480p video versions.
The progress of the packager
The resulting package of the video after it’s been converted appears here: https://console.aws.amazon.com/mediapackagevod/home?region=us-east-1#/assets
How do you view the finished video
Once you’ve clicked on an “asset” from the link above, a list of URLs are provided for each packaging configuration. The most widely used is HLS (HTTP Live Streaming). Here’s an example URL of the video that I processed using the open source Big Buck Bunny video: https://e20604ef07e8336ff0929ea8d86cd342.egress.mediapackage-vod.us-east-1.amazonaws.com/out/v1/355b7150bcf14b9983768d087dfd291c/31cd178ecba441c9b76145a0305fd05c/8d904062595a47f09f4cec8d4e4009b6/index.m3u8
As you can see it ends in m3u8, which is the playlist or “catalog” of the video files.
How to integrate this into a HTML page
While most browsers support HLS, some might need a bit of help. For this, you can use the hls.js npm package, which is widely used with an average 130,000 weekly downloads.
Here’s a code example:
You can view the processed video below:
You will notice that initially it starts off with poor quality. It will then pause (depending on your internet speed) as it jumps to a high quality stream. If it remains on the same quality, it’s because the browser has decided that this is the highest quality version it’s willing to use by default.
You an also jump anywhere in the video and it will start loading from that “chunk” of video.
Since this solution is based on serverless architecture, there’s no servers or resources to maintain. It’s literally, “set and forget”. You upload your video to the S3 bucket, and AWS handles the rest. The only update that is required is when the AWS “Solution” has an update, of which AWS takes care of when you decide to update.
Overall I found using AWS solution extremely simple to use and with it’s ‘pay as you go’ pricing model, its really cost effective if you aren’t processing new video often.
