Video Streaming
Nuxt provides several component layers to implement the user interface of your application.
We use HTTP Live Streaming (HLS) to stream videos to our users. Videos are stored on an Amazon S3 bucket, and served to users through Amazon CloudFront.
Let’s look at how user request flow as illustrated in Figure 1 above works.
- Client requests signed URL to
*.m3u8
file by making API call to a protected resource. - CloudFront behavior is matched based on path pattern. Request is forwarded to origin.
- Lambda gets CloudFront private key and caches for subsequent requests.
- Using the private key, the URL to
*.m3u8
file is signed and returned to the client.
Before signing the URL, you want to verify if the user is authorized to watch the requested content. Only if this is the case, you sign the URL and return it back to the client application. - Client requests
*.m3u8
file, passing custom query paramsKey-Pair-Id-PREFIX
,Policy-PREFIX
andSignature-PREFIX
. - CloudFront behavior is matched and request is forwarded to the origin.
- CloudFront makes origin request and passes custom headers.
- API Gateway forwards the request to Lambda that has proxy integration configured with a greedy path variable ({proxy+}). This will allow Lambda function to programmatically identify how to get the manifest from S3 bucket in the next step.
- Lambda function gets the original
*.m3u8
manifest file from S3. - Lambda function modifies the .m3u8 manifest by appending signed URL params to each
*.ts
file name. - Client requests
*.ts
file, passing query params as part of request URL. - CloudFront behavior is matched and request is forwarded to the origin.
- CloudFront makes origin request to S3 and returns
*.ts
file.