stream.new Reference Application

stream.new is an open-source example application designed to demonstrate how to record and upload videos using Mux. It is built using Next.js and integrates several key technologies:

Mux Integration

• Direct Uploads: Uses the Mux API to allow clients to upload video files directly to create Mux Assets.
• Webhook Signature Verification: Ensures incoming webhooks from Mux are authentic.
• HLS.js: Handles HLS video playback.
• Mux Data: Tracks video quality metrics.

Next.js Implementation

• SWR: Manages data fetching with dynamic refreshInterval polling.
• API Routes: Located in /pages/api, these handle authenticated requests to the Mux API.
• Dynamic Routing: Utilizes getStaticPaths with fallback: true and dynamic API routes.

When developing or modifying the video player, ensure the UI handles various video dimensions correctly. Use the following local URLs to test different aspect ratios:

• Horizontal: http://localhost:3000/v/Hi6we01h00uVvZc00GzvVXZW8C02Y8QC8OX7
• Vertical: http://localhost:3000/v/UNDUU7tU7vYt02CRMDTlZd1qKjvk41LN6yI5LbHgtxo8
• Super vertical: http://localhost:3000/v/seK501Bf00kyqSnGdMwQFi3lgqgdoS00qm5PAiV7Yjf2ew

It is recommended to verify playback and layout across multiple browsers, specifically Safari, Mobile Safari, Chrome, and Firefox, as they exhibit different behaviors.

You can modify the Mux Player behavior by appending specific query parameters to the video URL. This allows for deep-linking to specific timestamps or customizing the player's visual theme.

Supported parameters:

• time: A timestamp in seconds. For example, ?time=10 starts the video at the 10-second mark.
• color: A hex color value used to theme the Mux Player's primaryColor. Important: Omit the # character from the hex value (e.g., use ?color=f97316 instead of ?color=#f97316).

https://stream.new/v/XQDCNm01ZPyGg81GzK4mQfL7fxFoqP8uo?time=10
https://stream.new/v/XQDCNm01ZPyGg81GzK4mQfL7fxFoqP8uo?color=f97316

To deploy to Vercel, you must first add your Mux credentials as secrets using the Vercel CLI:

vercel secrets add stream_new_token_id <MUX_TOKEN_ID>
vercel secrets add stream_new_token_secret <MUX_TOKEN_SECRET>

After setting the secrets, push your project to a Git provider (GitHub, GitLab, or Bitbucket) and import the repository into Vercel to complete the deployment.

Before running the application, you must configure your environment variables. First, copy the example file to your local environment:

cp .env.local.example .env.local

Then, populate .env.local with the following values from your Mux Dashboard:

To start the development server, install the dependencies and run the dev script:

npm install
npm run dev

Once running, access the application at http://localhost:3000.

Use sentry.edge.config.ts to initialize Sentry for edge-specific features such as middleware and edge routes. This configuration is required for edge features to function correctly and is used even when running the application locally. Note that this configuration is independent of the Vercel Edge Runtime settings.

Available options:

• dsn: The Sentry Data Source Name (DSN) used to route errors to your Sentry project.
• sendDefaultPii: A boolean flag to control whether Sentry sends user Personally Identifiable Information (PII) by default. Set to false to restrict PII collection.

import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "YOUR_SENTRY_DSN",
  sendDefaultPii: false,
});

The sentry.server.config.ts file is used to initialize Sentry for server-side operations in a Next.js environment. This configuration is applied whenever the server handles a request.

Key configuration options include:

• dsn: The Data Source Name (DSN) provided by Sentry to route errors to your specific project.
• sendDefaultPii: A boolean flag that determines whether Sentry should collect Personally Identifiable Information (PII) by default. Setting this to false helps maintain privacy compliance.

import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "https://855545284ab436cbdb4b6fe01042f189@o43841.ingest.us.sentry.io/4511219257376768",
  sendDefaultPii: false,
});

You can customize the base domain used for Mux stream and image URLs by setting the NEXT_PUBLIC_MUX_BYO_DOMAIN environment variable. If this variable is not provided, the project defaults to using mux.com.

Setting this allows you to use a 'Bring Your Own Domain' (BYO) setup for video and image delivery.

NEXT_PUBLIC_MUX_BYO_DOMAIN=yourdomain.com

The utility functions getStreamBaseUrl and getImageBaseUrl generate the base URLs for Mux assets based on the configured deliveryDomain.

• getStreamBaseUrl(): Returns the URL prefix for video streams (e.g., https://stream.mux.com).
• getImageBaseUrl(): Returns the URL prefix for image assets (e.g., https://image.mux.com).

import { getStreamBaseUrl, getImageBaseUrl } from './lib/urlutils';

const streamUrl = getStreamBaseUrl(); // https://stream.mux.com
const imageUrl = getImageBaseUrl(); // https://image.mux.com