Have you used cloud functions yet? They come in many flavors: Amazon Lambda, Cloudflare Workers, Zeit Serverless Functions, and the one we’re using here: Netlify Functions.
All the code in this post is open source here on GitHub in our examples repo: muxinc/examples/signed-playback-netlify.
- Run code close to your clients (clients can be browsers, mobile apps, internet-of-things devices, self-driving cars, drones, anything that is talking to your server). Like a CDN, cloud functions are deployed to edge data centers to minimize latency between your clients and the server that runs their code.
- Protect your origin servers from being flooded with traffic. Cloud functions are a good way to cache data and intercept requests and respond to your users before they reach your origin servers. This means less bandwidth and CPU that your origin servers have to process.
Cloud functions, like Netlify Functions, might be a good option for you if you are using Mux’s Signed URLs feature.
When you create a video asset via Mux’s POST /video API you can also create a Playback ID (Mux API docs) and specify the playback_policy as either "public" or "signed".
A “public” playback policy can be played back on any site, in any player and does not have an expiration. A “signed” playback policy requires that when the playback URL is requested from a player, it has to be accompanied by a “token” param that is generated and signed on your server.
This is how it looks:
public playback URL:
signed playback URL:
The token param is what you need to create on your server in order for the playback URL to work.
- Sign up for a mux.com account (free account comes with $20 credit)
- Go to settings/access-tokens and click “Generate new token” to create a token you can use for API calls
- Copy your token id (we'll call this MUX_TOKEN_ID) and secret (MUX_TOKEN_SECRET). You will need these to make two api calls.
- Create a Mux video asset with a “signed” playback policy
- Copy the playback_id from the response, you will need this later.
- Copy the id (MUX_TOKEN_ID) and the private_key (MUX_PRIVATE_KEY) from the response, you will need these later. These are the keys you will need to create signed urls for playback.
- Create a new directory for your project mkdir netlify-mux-signing && cd netlify-mux-signing
- Install the Netlify CLI and run netlify init to create a new project. You can choose to connect Netlify to a GitHub repository.
- If you’re starting from scratch, run yarn init to create an empty package.json and git init to make this a git repository.
- Now you have a barebones project that is connected to Netlify, but nothing is in it yet (you can see there is a hidden and gitignored directory called .netlify which Netlify uses to handle deploys and Netlify commands
- Run yarn add netlify-lambda to install the netlify-lambda package into your project (it’s recommended to install this locally instead of globally).
- Run yarn add @mux/mux-node to add the Mux node SDK to your project
Create a src/ folder in your project and let’s create a small module called mux_signatures.js. It will export one function called signPlaybackId which takes a playback id and returns a token that is generated with Mux.JWT.sign:
Our lambda function is going to use this module in Step 2.
Add a netlify.toml file to the root directory and tell Netlify where your functions will live. This tells Netlify that before we deploy we are going to build our functions into the ./.netlify/functions directory
In order to use Netlify Functions you will now need to commit your code and push it up to a git repository like GitHub. Do that next and in Netlify’s dashboard connect your git repository to the Netlify project that you created. After connecting you git repository then
In your Netlify project dashboard, naviate to "Settings" > "Deploys" > “Environment” to set your environment variables. Enter the MUX_SIGNING_KEY and MUX_PRIVATE_KEY from the Create a URL Signing Key step above.
- Open one terminal and run netlify dev this will start a local Netlify dev server
- Open another terminal window and run netlify-lambda serve ./functions this will build your functions/, get them ready to handle requests and watch the filesystem for changes.
- In a third terminal window, curl your endpoint to test out the function (replace <netlify-port> and <playback-id> with your values.
You should see a 302 (redirect) response with a location header for the signed url.
When you make any changes to your source files, netlify-lambda serve will pick up on the changes and recompile the functions into ./.netlify/functions.
When you’re ready to deploy, you can deploy from the command line with netlify-lambda build ./functions && netlify deploy --prod. This will build the functions and then push up the changes to Netlify.
Try making a POST request to your cloud function on Netlify:
Just like in dev, you should get back a 302 response with a location header that points to the signed playback URL.
This is what your response should look like:
Now, in your player, you can use your netlify function as the URL src. Here's an example for a web player (note that in order to get HLS in a <video> tag to work outside of Safari you will need to use another library like Video.js or HLS.js:
And here's an example on iOS with AVPlayer in Swift:
The player will load the netlify URL, get the 302 redirect to the signed Mux URL and load the HLS manifest from stream.mux.com.
Now that your cloud function is working, you can add some security around it to make sure you only allow authorized users to generate signed urls.
For web players you will want to change this line in the sign_playback_id.js function:
You can use the Access-Control-Allow-Origin header to control the CORS rules for the resource.
I (along with others from Mux) will be at JAMstack Conf 2019 in SF. If you're using Netlify Cloud Functions (or other cool JAMStack stuff) get in touch or come talk to me at the conference!