This example uses Mux Video Direct Uploads and NextJS. This is a functioning application at https://stream.new. Feel free to use it!
This example uses:
Slackbot moderator. This examples allows you to configure a
SLACK_WEBHOOK_ASSET_READY. When a new Mux asset is
ready, an Incoming Webhook for slack will be sent. This is an example of how you might integrate a Slack channel that can be used to moderate content. The Slack message contains the asset ID, playback ID and a storyboard of thumbnails from the video.
refreshIntervaldepending on if the client should be polling for updates or not
/pages/apiroutes — a couple endpoints for making authenticated requests to the Mux API.
fallback: true, as well as dynamic API routes.
This app was created with the NextJS
with-mux-video example as a starting point.
All you need to set this up is a Mux account. You can sign up for free and pricing is pay-as-you-go. There are no upfront charges, you get billed monthly only for what you use.
Without entering a credit card on your Mux account all videos are in “test mode” which means they are watermarked and clipped to 10 seconds. If you enter a credit card all limitations are lifted and you get $20 of free credit. The free credit should be plenty for you to test out and play around with everything before you are charged.
.env.local.example file in this directory to
.env.local (which will be ignored by Git):
cp .env.local.example .env.local
Then, go to the settings page in your Mux dashboard, get a new API Access Token that allows for "Full Access" against Mux Video and set each variable in
MUX_TOKEN_IDshould be the
TOKEN IDof your new token
MUX_WEBHOOK_SIGNATURE_SECRET(optional) - the webhook signing secret if you set up webhooks (see below)
SLACK_WEBHOOK_ASSET_READY(optional) - the slack webhook URL that will be used for the Slackbot moderator feature (see below)
SLACK_MODERATOR_PASSWORD(optional) - this is the password when you want to take actions from the Slackbot moderator feature (see below)
NEXT_PUBLIC_MUX_ENV_KEY(optional) - this is the mux environment key for Mux Data integration
Install the Vercel CLI, log in to your account from the CLI, and run the following commands to add the environment variables. Replace the values with the corresponding strings in
vercel secrets add stream_new_token_id <MUX_TOKEN_ID> vercel secrets add stream_new_token_secret <MUX_TOKEN_SECRET>
Then push the project to GitHub/GitLab/Bitbucket and import to Vercel to deploy.
This application uses a slackbot to send message to a slack channel every time a new asset is ready for playback. This requires a few steps for setup.
First, login to your Mux dashboard and in the left sidebar navigation find Settings > Webhooks. Create a new webhook and makes sure you are creating a webhook for the environment that matches the access token that you are using.
For local development you may want to use a tool like ngrok to receive webhooks on localhost. The route for the webhook handler is
/api/webhooks/mux (defined in this NextJS app under
Create a Slack 'Incoming Webhook'. Configure the channel you want to post to, the icon, etc.
When you're done with this, you should have a slack webhook URL that looks something like
Set the optional environment variables either directly in the vercel UI or by updating
vercel.json and setting them as secrets for your organization. The optional environment variables are:
MUX_WEBHOOK_SIGNATURE_SECRET- This is a security mechanism that checks the webhook signature header when the request hits your server so that your server can verify that the webhook came from Mux. Read more about webhook signature verification. Note that in
./pages/api/webhooks/muxthe code will only verify the signature if you have set a signature secret variable, so this step is optional.
SLACK_WEBHOOK_ASSET_READY- This is the
https://hooks.slack.com/services/....URL when you created the Slack Incoming Webhook.
SLACK_MODERATOR_PASSWORD- This is the password that will be used to authorize deleting assets from the slack moderator (The button with the red text "DELETE (cannot be undone)")
NEXT_PUBLIC_MUX_ENV_KEY- This is the env key to use with Mux Data. Note this is different than your API key and this environment key can be found on your environment page in the Mux dashboard
After all of this is set up the flow will be:
video.asset.readythen your server will post a message to your slack channel that has the Mux Asset ID, the Mux Playback ID, and a thumbnail of the video.
When developing, if you make any changes to the video player, make sure it works and looks good with videos of various dimensions:
Also be sure to check: Safari, Mobile Safari, Chrome, Firefox because they all behave a little differently.