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.
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
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:
token param is what you need to create on your server in order for the playback URL to work.
MUX_TOKEN_ID) and secret (
MUX_TOKEN_SECRET). You will need these to make two api calls.
playback_idfrom the response, you will need this later.
MUX_TOKEN_ID) and the
MUX_PRIVATE_KEY) from the response, you will need these later. These are the keys you will need to create signed urls for playback.
mkdir netlify-mux-signing && cd netlify-mux-signing
netlify initto create a new project. You can choose to connect Netlify to a GitHub repository.
yarn initto create an empty
git initto make this a git repository.
.netlifywhich Netlify uses to handle deploys and Netlify commands
yarn add netlify-lambdato install the netlify-lambda package into your project (it’s recommended to install this locally instead of globally).
yarn add @mux/mux-nodeto add the Mux node SDK to your project
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
Our lambda function is going to use this module in Step 2.
functions/ and add a file called
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
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_PRIVATE_KEY from the Create a URL Signing Key step above.
netlify devthis will start a local Netlify dev server
netlify-lambda serve ./functionsthis will build your functions/, get them ready to handle requests and watch the filesystem for changes.
<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
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
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!