Mux Video Starter

• Overview: A Next.js example that integrates Mux Video for video uploading and playback, demonstrating API-first video platform capabilities.

Demo:

• Access the live demo at https://with-mux-video.vercel.app/, which was used as the basis for creating stream.new.

Getting Started:

• Initialization: Bootstrap the project using create-next-app with the Mux Video example template:
  • npx create-next-app --example with-mux-video with-mux-video-app
  • yarn create next-app --example with-mux-video with-mux-video-app
  • pnpm create next-app --example with-mux-video with-mux-video-app

Security Note:

• Update the cors_origin in pages/api/upload.js to restrict uploads to your application domain for enhanced security.

Key Features:

• Utilizes SWR for dynamic data fetching with adjustable refreshInterval.
• Employs /pages/api routes for authenticated requests to the Mux API.
• Implements dynamic and static routing, including dynamic API routes.

Configuration Steps:

1. Mux Account Setup: Sign up for Mux and obtain an API access token from the dashboard settings.
2. Environment Variables:
   • Copy .env.local.example to .env.local and configure it with your Mux API token ID and secret.
3. Deployment:
   • Deploy the application to Vercel, setting up the necessary environment variables via the Vercel CLI or dashboard.

Deployment on Vercel:

• Use Vercel CLI to add environment variables (MUX_TOKEN_ID and MUX_TOKEN_SECRET) as secrets.
• Deploy the project by pushing it to a Git repository and importing it to Vercel.