Mux Meet

Mux Meet is a video conferencing app powered by Mux Real-Time Video, written in React, using the Next.js framework.

Getting Started

In order for Meet to connect to Mux's APIs, an access token and signing key must be provided. These are generated in the Mux Dashboard and should be set as environment variables.

The easiest way to use Mux Meet is to deploy it to Vercel.

After creating your project, you will be prompted to configure it.

In a separate window, open https://dashboard.mux.com and sign in. You will need to create an account, if you don't already have one.

From the Mux Dashboard, open Settings from the bottom left and click Access Tokens. Then click "Generate new token" and select Mux Video from the list of permissions. Optionally, give the access token a name like Mux Meet.

Once your token is generated, copy and paste the ID and Secret as the values for MUX_TOKEN_ID and MUX_TOKEN_SECRET in Vercel.

Now go back to https://dashboard.mux.com to generate the Signing Key.

From the Mux Dashboard, open Settings from the bottom left and click Signing Keys. Then click "Generate new key" and make sure you use the same environment as you did for the Access Token. The Product selection should default to Video.

Once your key is generated, copy and paste the ID and Secret as the values for MUX_SIGNING_KEY and MUX_PRIVATE_KEY in Vercel.

Both the Access Token and Signing Key are sensitive. DO NOT MAKE THEM PUBLIC. It is safe to store them in Vercel as Environment Variables or locally during development.

Once all 4 environment variables are filled in. Click Deploy for Vercel to build and start your app.

Cleanup Spaces after Meeting

Joining a new Space creates a Space in Mux, but in order to clean up Spaces after a meeting is over, set up a simple webhook from Mux.

From the Mux Dashboard, open Settings from the bottom left and click Webhooks. Then click "Generate new webhook" and make sure you use the same environment as you did for the Access Token. The URL to notify will be your app's URL + /api/webhooks.

Now generate the Webhook and copy the Signing Secret by clicking Show Signing Secret.

Configure your deployed app with a new environment variable named WEBHOOK_SECRET with the value of the Webhook Signing Secret.

Make sure you redeploy for your new environment variable to take affect.

Limit Access

To limit the number of active Spaces, set an integer value for an environment variable ACTIVE_SPACE_LIMIT.

To limit the amount of time participants are allowed to spend in a temporary Space, set an integer value in seconds for an environment variable SPACE_DURATION_SECONDS.

Develop locally

Create an .env.local file at the root of the repo with the following secrets:

MUX_TOKEN_ID=
MUX_TOKEN_SECRET=
MUX_SIGNING_KEY=
MUX_PRIVATE_KEY=

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Learn More

Mux

• Mux Real-Time Video
• Real-Time Video in React
• Real-Time Video on Android
• Real-Time Video on iOS

Next.js

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.