How to host a secure video using Amazon CloudFront with S3

This tutorial will guide you through the steps to host your video in m3u8 format using an Amazon S3 bucket , protected by Amazon CloudFront which is the recommended and approved method to help you secure your WP Pay Per View video from being played by unauthorized users who get the video url using browser developer tools or when shared by others.

Prerequisites

  • An AWS account that you are able to use.
  • Permissions to Amazon S3 and Amazon CloudFront.
  • Website with WordPress, WooCommerce and WP Pay Per View installed.

Costs

Steps

1. Create an S3 bucket and Configure CORS

Create an Amazon S3 bucket

Create an Amazon S3 bucket to host videos in .m3u8 format using the Amazon S3 console. For more information about Amazon S3, see Introduction to Amazon S3 .

  1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/ .
  2. From the console dashboard, choose Create bucket.
  1. Enter a Bucket name for your bucket, type a unique DNS-compliant name for your new bucket. Follow these naming guidelines:
  • The name must be unique across all existing bucket names in Amazon S3.
  • The name must not contain uppercase characters.
  • The name must start with a lowercase letter or number.
  • The name must be between 3 and 63 characters long.
  1. Choose an AWS Region where you want the bucket to reside. Choose a Region close to you to minimize latency and costs, or to address regulatory requirements. Note that for this example we will accept the default settings and this bucket is secure by default. Consider enabling additional security options such as logging and encryption, the S3 documentation has additional information such as Protecting Data in Amazon S3 .
  2. Accept default value for Block all public access as CloudFront will serve the content for you from S3.
  3. Enable bucket versioning , to keep multiple versions of an object so you can recover an object if you unintentionally modify or delete it. To save storage size, you could also disable bucket versioning for video hosting.
  1. Click Create bucket.

Edit Cross-origin resource sharing (CORS)

After you’ve created your bucket, you need to edit CORS in order to allow browser identify that you have authorized fetching CloudFront content from your website.

  1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/ .
  2. In the console click the name of your bucket you just created.
  3. Click the Permissions tab.
  1. Scroll down to the section Cross-origin resource sharing (CORS)
  2. Click Edit and change it to:
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]
  1. Click Save changes.

2. Convert your videos to .m3u8 format (HLS)

The Unicode version of M3U is M3U8, which uses UTF-8-encoded characters. M3U8 files are the basis for the HTTP Live Streaming (HLS) format originally developed by Apple to stream video and radio to iOS devices, and which is now a popular format for adaptive streaming in general.

FFmpeg is the multimedia framework used for streaming play, decode, encode, mux, demux, stream, transcode and filter.

How to Install FFmpeg on MacOS?

On a Mac, you can install FFmpeg using brew which is a superb package manager for the MacOS ecosystem. Here is the one-liner to install FFmpeg on a Mac machine (testing and working on Cataline v 10.15.5)

brew install ffmpeg

If you want additional tools like Netflix’s VMAF on MacOS with FFmpeg, all you need to do is to include it when you install ffmpeg. For example,

brew install ffmpeg --with-libvmaf

The brew page is an excellent resource for all the possible options. Check there first before hunting on Google or Stackoverflow.

How to Install FFmpeg on Ubuntu?

On Ubuntu, you can install FFmpeg in a couple of ways – using the apt package manager or compiling from source.

To simply install it using apt, use the following commandline,

sudo apt install ffmpeg

That’s it.

How to Install FFmpeg on Windows?

On a Windows machine, it is a complex process to compile and install FFmpeg if you are not a programmer and don’t have access to coding tools.

However, for almost all purposes, you can head over to gyan.dev and download compiled .exe FFmpeg files and use that (or the shared libraries).

How to Convert mp4 to m3u8?

ffmpeg -i filename.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls filename.m3u8

3. Upload files to your Amazon S3 bucket

  1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/ .
  2. In the console click the name of your bucket you just created.
  3. Click the Upload button.
  1. After the video files are uploaded, click the .m3u8 file in the list to open its detail page.
  2. Click the Copy icon of Object URL, and you will get the video url in the clipboard.
  1. You can paste it into your browser’s address bar to view this url; you will see an error message in XML format. That means your S3 video content is restricted to public access. Let’s continue setting up CloudFront to allow access to this video content via Signed URL.

3. Create CloudFront Trusted Key Group

Before configuring CloudFront Distribution, we should create a Trusted Key Group to enable the CloudFront Signed URL feature which will protect your video url.

To create a key pair for a trusted key group, perform the following steps:

  1. Create the public–private key pair.
  1. Upload the public key to CloudFront.
  1. Add the public key to a CloudFront key group.

Follow these Amazon official instructions to create a Trusted Key Group.

4. Make WP Pay Per View the Signer

In the previous step, you will get a private key file that should be uploaded to your WordPress website with WP Pay Per View installed.

To make WP Pay Per View the Signer, perform the following steps:

  1. Upload the private key file to your web server. For security reasons, it is recommended that the private key file be saved outside of the website’s public root folder in order to avoid access via a public url.
  1. Open the WP Pay Per View Settings page, scroll to the section titled CloudFront, check Enabled CloudFront Signed URL, and enter the private key file’s absolute local path
  2. Find and enter the Key Pair ID that you got in Step 3.
  1. Confirm Private Key file path and Key Pair ID are correct and click Save Changes.

5. Configure CloudFront Distribution

Using the AWS Management Console, we will create a CloudFront distribution, and configure it to serve the S3 bucket we previously created.

  1. Open the Amazon CloudFront console at https://console.aws.amazon.com/cloudfront/home .
  2. From the console dashboard, click Create Distribution.
  1. Click Get Started in the Web section.
  1. Specify the following settings for the distribution:

Origin Settings

  • Origin Domain Name: choose the domain name of the S3 bucket you created in the first step.
  • Restrict Bucket Access: choose Yes. This is required because you are setting up signed URLs to restrict access to your video
  • Origin Access Identity: Create a New Identity.

Default Cache Behavior Settings

  • Viewer Protocol Policy: choose Redirect HTTP to HTTPS
  • Allowed HTTP Methods: choose GET, HEAD, OPTIONS
  • Cached HTTP Methods: check OPTIONS
  • Cache and origin request settings: Use a cache policy and origin request policy
  • Cache Policy: choose Managed-Elemental-MediaPackage
  • Origin Request Policy: choose Managed-CORS-S3Origin
  • Smooth Streaming: choose Yes
  • Restrict Viewer Access (Use Signed URLs or Signed Cookies): choose Yes
  • Trusted Key Groups or Trusted Singer: choose Trusted Key Groups
  • Trusted Key Groups: choose the key group you just created and click Add button
  1. After CloudFront creates your distribution which may take approximately 10 minutes, the value of the Status column for your distribution will change from In Progress to Deployed.
  1. When your distribution is deployed, you can generate the CloudFront video url by replacing the domain name of the S3 video url to your new CloudFront Domain Name which you can see in the console.

In this example, the S3 video url is https://flanniantest1.s3.us-east-2.amazonaws.com/edzi/Edzi.com.m3u8, the CloudFront Domain Name is d1houhouylkpzy.cloudfront.net, then the CloudFront video url should be https://d1houhouylkpzy.cloudfront.net/edzi/Edzi.com.m3u8. This url is private too. If you visit this url in your browser you will still get an error message because the url is not signed yet.

  1. But WP Pay Per View can sign it now and play the video with it’s video player. You can do a test by creating a new product in your website and use the CloudFront video url as the product’s video url.
  1. You now have content in a private S3 bucket that only CloudFront has secure access to. CloudFront then serves the requests, effectively becoming a secure, reliable static hosting service with additional features available such as custom certificates and alternate domain names .

For more information on configuring CloudFront, see Viewing and Updating CloudFront Distributions in the CloudFront documentation.