This example uses Mux Video, an API-first platform for video. The example features video uploading and playback in a Remix.js application.

This example is useful if you want to build a platform that supports user-uploaded videos. For example:

• Enabling user profile videos
• Accepting videos for a video contest promotion
• Allowing customers to upload screencasts that help with troubleshooting a bug
• Or even the next Youtube, TikTok, or Instagram

Open this example on CodeSandbox:

npx create-remix@latest --template remix-run/examples/mux-video

All you need to run this example is a Mux account.

Before entering a credit card on your Mux account, all videos are in “test mode” which means they are watermarked and clipped to 10 seconds.

Copy the .env.example file in this directory to .env (which will be ignored by Git):

cp .env.example .env

Then, go to the settings page in your Mux dashboard, get a new API Access Token with "Mux Video Read" and "Mux Video Write" permissions. Use that token to set the variables in .env.local:

• MUX_TOKEN_ID should be the TOKEN ID of your new token
• MUX_TOKEN_SECRET should be TOKEN SECRET

At this point, you're good to npm run dev.

Uploading and viewing a video takes four steps:

1. Upload a video: Use the Mux Direct Uploads API to create an endpoint for Mux Uploader React. The user can then use Mux Uploader to upload a video.
2. Exchange the upload.id for an asset.id: Once the upload is complete, it will have a Mux asset associated with it. We can use the Direct Uploads API to check for that asset.
3. Use the asset.id to check if the asset is ready by polling the Asset API
4. Play back the video with Mux Player React (on a page that uses the Mux Image API to provide og images)

These steps correspond to the following routes:

1. _index.tsx creates the upload in a loader, and exchanges the upload.id for an asset.id in an action which redirects to...
2. status.$assetId.tsx polls the Mux API to see if the asset is ready. When it is, we redirect to...
3. playback.$playbackId.tsx plays the video.

When creating uploads, this demo sets cors_origin: "*" in the app/routes/_index.tsx file. For extra security, you should update this value to be something like cors_origin: 'https://your-app.com', to restrict uploads to only be allowed from your application.

In this example, we poll the Mux API to see if our asset is ready. In production, you'll likely have a database where you can store the upload.id and asset.id, and you can use Mux Webhooks to get notified when your upload is complete, and when your asset is ready. In this example, we poll the Mux API to see if our asset is ready. In production, you'll likely have a database where you can store the upload.id and asset.id, and you can use Mux Webhooks to get notified when your upload is complete, and when your asset is ready.