All Docs
FeaturesPosibl Life & Gym AppUpdated March 15, 2026

Mux Video Asset Management

Mux Video Asset Management

As of v1.0.73, the platform uses Mux as its unified video infrastructure provider. Mux handles video upload, automatic transcoding, and adaptive streaming across every video-capable surface: the Movement Library, Skills School, member video submissions, and live event broadcasts.

Architecture Overview

Browser / Client
      │
      │  1. Request upload URL
      ▼
Next.js API Route (upload URL endpoint)
      │
      │  2. Exchange credentials → return short-lived Mux upload URL
      ▼
Mux Direct Upload (client PUTs file directly to Mux)
      │
      │  3. Mux transcodes & stores asset
      ▼
Mux Adaptive Stream (HLS) → Player

Credentials never leave the server. The client only ever receives a time-limited, single-use upload URL.

Server-Side Mux Client

A reusable, singleton Mux SDK client is initialised once and shared across all Next.js API routes and server-side code. Avoid creating new Mux client instances in individual route handlers — import the shared client instead.

// Example: importing the shared Mux client
import { muxClient } from '@/lib/mux';

The client is configured via environment variables (see Configuration below).

Upload URL Generation Endpoint

POST /api/video/upload-url

Generates a Mux direct-upload URL for a new video asset. The client uses this URL to PUT a video file directly to Mux without routing the binary through your Next.js server.

Request

No request body is required for basic usage. Additional metadata (e.g. surface context, member ID) may be passed as a JSON body depending on your implementation.

Response

{
  "uploadUrl": "https://storage.googleapis.com/video.mux.com/...",
  "uploadId": "abc123xyz"
}
FieldTypeDescription
uploadUrlstringAuthenticated URL to PUT the video file to. Short-lived.
uploadIdstringMux upload ID for tracking the asset after upload.

Client Upload Flow

// 1. Get a upload URL from your server
const { uploadUrl, uploadId } = await fetch('/api/video/upload-url', {
  method: 'POST',
}).then(r => r.json());

// 2. PUT the file directly to Mux
await fetch(uploadUrl, {
  method: 'PUT',
  body: videoFile, // File | Blob
  headers: { 'Content-Type': videoFile.type },
});

// 3. Store uploadId to poll or webhook for asset readiness

Supported Surfaces

SurfaceUse Case
Movement LibraryExercise demonstration videos for coaches and members
Skills SchoolCurriculum and instructional content
Member SubmissionsAthlete-submitted workout and movement review videos
Live Event BroadcastsLive class and community event streaming

Configuration

The Mux integration requires the following environment variables to be set on the server:

VariableDescription
MUX_TOKEN_IDMux API token ID — found in your Mux dashboard
MUX_TOKEN_SECRETMux API token secret — found in your Mux dashboard

These values are never exposed to the client.

Video Processing

Once a file is uploaded to Mux:

  1. Transcoding begins automatically — no manual encoding pipeline is needed.
  2. Adaptive bitrate streaming (HLS) is available for all assets once processing is complete.
  3. Asset status transitions from waiting → preparing → ready. Use Mux webhooks or poll the asset status API to detect readiness before displaying the video to end users.

Related