|
1 | | -# Mux Video |
2 | | - |
3 | | -> [!NOTE] |
4 | | -> This example will be removed from this repository once it is accepted and merged into the official Remix examples: [remix-run/examples#441](https://github.com/remix-run/examples/pull/441). |
5 | | -
|
6 | | -This example features video uploading and playback in a Remix.js application. |
7 | | - |
8 | | -This example is useful if you want to build a platform that supports user-uploaded videos. For example: |
9 | | - |
10 | | -- Enabling user profile videos |
11 | | -- Accepting videos for a video contest promotion |
12 | | -- Allowing customers to upload screencasts that help with troubleshooting a bug |
13 | | -- Or even the next Youtube, TikTok, or Instagram |
14 | | - |
15 | | -## Preview |
16 | | - |
17 | | -Open this example on [CodeSandbox](https://codesandbox.com): |
18 | | - |
19 | | -[](https://codesandbox.io/s/github/remix-run/examples/tree/main/mux-video) |
20 | | - |
21 | | -## How to use |
22 | | - |
23 | | -### Step 1. Create an account in Mux |
24 | | - |
25 | | -All you need to run this example is a [Mux account](https://www.mux.com?utm_source=remix-examples&utm_medium=mux-video&utm_campaign=remix-examples). You can sign up for free. There are no upfront charges -- you get billed monthly only for what you use. |
26 | | - |
27 | | -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. |
28 | | - |
29 | | -### Step 2. Set up environment variables |
30 | | - |
31 | | -Copy the `.env.example` file in this directory to `.env` (which will be ignored by Git): |
32 | | - |
33 | | -```bash |
34 | | -cp .env.example .env |
35 | | -``` |
36 | | - |
37 | | -Then, go to the [settings page](https://dashboard.mux.com/settings/access-tokens) in your Mux dashboard, get a new **API Access Token**. Use that token to set the variables in `.env.local`: |
38 | | - |
39 | | -- `MUX_TOKEN_ID` should be the `TOKEN ID` of your new token |
40 | | -- `MUX_TOKEN_SECRET` should be `TOKEN SECRET` |
41 | | - |
42 | | -At this point, you're good to `npm run dev`. |
43 | | - |
44 | | -## How it works |
45 | | - |
46 | | -Uploading and viewing a video takes four steps: |
47 | | - |
48 | | -1. **Upload a video**: Use the Mux [Direct Uploads API](https://docs.mux.com/api-reference#video/tag/direct-uploads?utm_source=remix-examples&utm_medium=mux-video&utm_campaign=remix-examples) to create an endpoint for [Mux Uploader React](https://docs.mux.com/guides/mux-uploader?utm_source=remix-examples&utm_medium=mux-video&utm_campaign=remix-examples). The user can then use Mux Uploader to upload a video. |
49 | | -1. **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](https://docs.mux.com/api-reference#video/tag/direct-uploads?utm_source=remix-examples&utm_medium=mux-video&utm_campaign=remix-examples) to check for that asset. |
50 | | -1. **Use the `asset.id` to check if the asset is ready** by polling the [Asset API](https://docs.mux.com/api-reference#video/tag/assets?utm_source=remix-examples&utm_medium=mux-video&utm_campaign=remix-examples) |
51 | | -1. **Play back the video with [Mux Player React](https://docs.mux.com/guides/mux-player-web?utm_source=remix-examples&utm_medium=mux-video&utm_campaign=remix-examples)** (on a page that uses the [Mux Image API](https://docs.mux.com/guides/get-images-from-a-video) to provide og images) |
52 | | - |
53 | | -These steps correspond to the following routes: |
54 | | - |
55 | | -1. [`_index.tsx`](app/routes/_index.tsx) creates the upload in a loader, and exchanges the `upload.id` for an `asset.id` in an action which redirects to... |
56 | | -2. [`status.$assetId.tsx`](app/routes/status.$assetId.tsx) polls the Mux API to see if the asset is ready. When it is, we redirect to... |
57 | | -3. [`playback.$playbackId.tsx`](app/routes/playback.$playbackId.tsx) plays the video. |
58 | | - |
59 | | -## Preparing for Production |
60 | | - |
61 | | -### Set the `cors_origin` |
62 | | - |
63 | | -When creating uploads, this demo sets `cors_origin: "*"` in the [`app/routes/_index.tsx`](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. |
64 | | - |
65 | | -### Consider webhooks |
66 | | - |
67 | | -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](https://docs.mux.com/guides/listen-for-webhooks) to get notified when your upload is complete, and when your asset is ready. |
68 | | - |
69 | | -See [`app/routes/mux.webhook.ts`](app/routes/mux.webhook.ts) for an example of how you might handle a Mux webhook. |
| 1 | +Check out our full example in the official Remix.js Examples repository: [remix-run/examples/mux-video](https://github.com/remix-run/examples/tree/main/mux-video). |
0 commit comments