TeaTime

  • Angular
  • SpringBoot
  • AWS S3
  • AWS Lambda
  • AWS Cloudfront
  • Heroku
See It On GitHub

Overview

TeaTime is a serverless cloud video streaming platform built for the cloud. Using AWS, Angular and SpringBoot, TeaTime allows users to upload and view video quickly, no matter where they are geographically located. All video is stored, transcoded and delivered entirely from AWS.

Background

TeaTime was developed as a self-directed project during my third year at university. We were required to identify an emerging or relatively new technology that is used in the creative space.

Streaming video applications have become extremely popular and relevant to the creative and social process over the last five years. End users expect that videos can be loaded with little to no buffering, even on a slow internet connection. My aim was to learn more about how video is delivered to end users, what technologies are used, and then implement my own proof of concept application to allow users to upload and view video.

Understanding how video is delivered on the modern internet was crucial to implementing my application. There are two main issues to overcome when it comes to implementing video streaming.

The first is that video files have a large file size, so passing the entire file to the end user is inefficient, especially if the user is unlikely to watch the entire video. To overcome this, different file formats have been created to allow video to be broken into pieces and sent to the end user on demand. In TeaTime, I have used a format called HLS (HTTP Live Streaming). As part of the upload process, the entire video is transcoded and stored in a playlist file and chunks of video. The playlist records timestamps from the video and which chunk contains that time. When the video is streamed, the playlist is the first part delivered to the browser, which then determines which chunk of video to request from the server. The result is that only the small segment of video that is required for the end user is received, reducing data required before a video can start playing.

The second problem that now needs to be overcome is geographical location. Even though the video is broken into chunks, it is limited by network speed and latency between the end user and the originating file server. If the server is far away from the client, the loading and then scrubbing around the video may be slow. This is because the video still must be sent on multiple hops over the internet, and a slow or overloaded connection between servers can cause a delay in receiving the video file. This is where a content delivery network, such as AWS CloudFront, comes in. By copying the video file to a globally distributed file cache, video doesn’t need to be streamed from a single server. Instead, when the browser requests the video, it will receive it from the closest data centre available. Due to AWS’s huge reach, this may be as close as the nearest city, instead of potentially another country.

Solution

To build TeaTime, I knew that I would require several different components. I would need a Content Delivery Network (CDN), some form of initial storage, a way of transcoding the video into the formats that I needed, a front end for the user to upload and view video, and an API to tie it all together. Given that the application was all about modern technologies, I decided to implement TeaTime as fully serverless. Here is a diagram of the outcome of the project.

First, a user uploads a video via the Upload Page to the S3 Ingest bucket. The API takes care of receiving the file from the front end and streaming the raw data to S3. Once the video is uploaded, an AWS Lambda swings into action, using FFMPEG to transcode the video into HLS format. The outputted playlist and video chunks are copied into another S3 bucket. This S3 bucket is then automatically replicated to the CloudFront CDN, ready for playback. When a user requests a video in the video player, it is sent from the closest CloudFront location, meaning the first video can be ready to play extremely quickly.

Overall, my solution was a great way to learn about all the different components that go into streaming video over the internet.