Mux vs Cloudflare Stream vs Bunny Stream 2026

SaaS with video + analytics (like Loom, Wistia)  → Mux (Mux Data analytics)
Already on Cloudflare (CDN, Workers, Pages)       → Cloudflare Stream
High-volume VOD on a budget                       → Bunny Stream
DRM content protection                            → Bunny Stream or Mux
Low-latency live streaming                        → Mux (sub-3s RTMP)
Simple video embeds with no analytics             → Cloudflare Stream
European data residency                           → Bunny Stream (EU-based)

npm install @mux/mux-node         # Server SDK
npm install @mux/mux-player-react  # Video player component

import Mux from "@mux/mux-node";

const mux = new Mux({
  tokenId: process.env.MUX_TOKEN_ID!,
  tokenSecret: process.env.MUX_TOKEN_SECRET!,
});

// Create an asset from a URL (Mux downloads and processes it)
async function uploadVideoFromUrl(videoUrl: string): Promise<string> {
  const asset = await mux.video.assets.create({
    input: [{ url: videoUrl }],
    playback_policy: ["public"],
    mp4_support: "capped-1080p",    // Also generate MP4 for download
    encoding_tier: "baseline",      // "baseline" | "smart"
    video_quality: "plus",
    master_access: "none",
  });

  console.log("Asset ID:", asset.id);
  console.log("Playback ID:", asset.playback_ids?.[0]?.id);

  return asset.id;
}

// Poll for asset status (or use webhooks)
async function waitForAssetReady(assetId: string): Promise<Mux.Video.Asset> {
  let asset = await mux.video.assets.retrieve(assetId);

  while (asset.status === "preparing") {
    await new Promise((resolve) => setTimeout(resolve, 2000));
    asset = await mux.video.assets.retrieve(assetId);
  }

  return asset;
}

// Server: Create an upload URL
// app/api/mux/upload/route.ts
export async function POST() {
  const upload = await mux.video.uploads.create({
    new_asset_settings: {
      playback_policy: ["public"],
      encoding_tier: "baseline",
    },
    cors_origin: process.env.NEXT_PUBLIC_APP_URL!,
  });

  return Response.json({
    uploadId: upload.id,
    uploadUrl: upload.url,   // PUT video bytes directly to this URL
  });
}

// Client: Upload file directly to Mux
import * as UpChunk from "@mux/upchunk";

async function uploadVideo(file: File) {
  const { uploadUrl } = await fetch("/api/mux/upload", { method: "POST" }).then((r) => r.json());

  const upload = UpChunk.createUpload({
    endpoint: uploadUrl,
    file,
    chunkSize: 30720,  // 30MB chunks
  });

  upload.on("progress", (progress) => {
    setUploadProgress(progress.detail);
  });

  upload.on("success", () => {
    console.log("Upload complete!");
  });

  upload.on("error", (error) => {
    console.error("Upload error:", error.detail);
  });
}

import MuxPlayer from "@mux/mux-player-react";

function VideoPlayer({ playbackId }: { playbackId: string }) {
  return (
    <MuxPlayer
      playbackId={playbackId}
      metadata={{
        video_title: "My Video",
        viewer_user_id: "user-123",   // For Mux Data viewer analytics
      }}
      streamType="on-demand"
      autoPlay={false}
      muted={false}
      poster={`https://image.mux.com/${playbackId}/thumbnail.jpg?time=10`}
      style={{ width: "100%", aspectRatio: "16/9" }}
    />
  );
}

// Thumbnail URL patterns
// https://image.mux.com/{PLAYBACK_ID}/thumbnail.jpg?time=10    (still at 10s)
// https://image.mux.com/{PLAYBACK_ID}/animated.gif?start=10&end=15  (animated GIF)
// https://image.mux.com/{PLAYBACK_ID}/storyboard.vtt  (seeking preview sprites)

// app/api/mux/webhook/route.ts
import { headers } from "next/headers";
import Mux from "@mux/mux-node";

const mux = new Mux({ tokenId: process.env.MUX_TOKEN_ID!, tokenSecret: process.env.MUX_TOKEN_SECRET! });

export async function POST(req: Request) {
  const body = await req.text();
  const headersList = await headers();
  const signature = headersList.get("Mux-Signature") ?? "";

  // Verify webhook signature
  mux.webhooks.verifySignature(body, { "mux-signature": signature }, process.env.MUX_WEBHOOK_SECRET!);

  const event = JSON.parse(body);

  switch (event.type) {
    case "video.asset.ready": {
      const asset = event.data;
      await db.video.update({
        where: { muxAssetId: asset.id },
        data: {
          status: "ready",
          playbackId: asset.playback_ids?.[0]?.id,
          duration: asset.duration,
        },
      });
      break;
    }
    case "video.asset.errored": {
      await db.video.update({
        where: { muxAssetId: event.data.id },
        data: { status: "error" },
      });
      break;
    }
  }

  return Response.json({ received: true });
}

// Create signed playback token for private assets
import jwt from "jsonwebtoken";

function createSignedPlaybackToken(playbackId: string, keyId: string, privateKey: string): string {
  const now = Math.floor(Date.now() / 1000);

  return jwt.sign(
    {
      sub: playbackId,
      aud: "v",              // "v" = video, "t" = thumbnail, "g" = gif, "s" = storyboard
      exp: now + 3600,       // 1 hour expiry
      kid: keyId,
    },
    privateKey,
    { algorithm: "RS256" }
  );
}

// Use in player
const token = createSignedPlaybackToken(playbackId, keyId, privateKey);
// https://stream.mux.com/{PLAYBACK_ID}.m3u8?token={TOKEN}

// Server: Get a one-time upload URL
async function createStreamUploadUrl(): Promise<{ uploadUrl: string; uid: string }> {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/accounts/${process.env.CF_ACCOUNT_ID}/stream/direct_upload`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.CF_API_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        maxDurationSeconds: 3600,
        requireSignedURLs: false,
        meta: { name: "User Upload" },
      }),
    }
  );

  const data = await response.json();
  return { uploadUrl: data.result.uploadURL, uid: data.result.uid };
}

// Client: Upload directly to Cloudflare
async function uploadToCloudflare(file: File) {
  const { uploadUrl, uid } = await fetch("/api/stream/upload", { method: "POST" }).then((r) => r.json());

  // Direct TUS upload
  const upload = new tus.Upload(file, {
    endpoint: uploadUrl,
    chunkSize: 50 * 1024 * 1024,  // 50MB chunks
    onProgress: (uploaded, total) => {
      setProgress(Math.round((uploaded / total) * 100));
    },
    onSuccess: () => {
      console.log("Upload complete! Video UID:", uid);
      // Poll: https://api.cloudflare.com/.../{uid} until readyToStream: true
    },
  });

  upload.start();
}

// Cloudflare Stream iframe embed
function CloudflarePlayer({ videoId }: { videoId: string }) {
  return (
    <div style={{ position: "relative", paddingTop: "56.25%" }}>
      <iframe
        src={`https://customer-${process.env.NEXT_PUBLIC_CF_CUSTOMER_CODE}.cloudflarestream.com/${videoId}/iframe`}
        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
        allowFullScreen
        style={{ border: "none", position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
      />
    </div>
  );
}

async function listVideos(accountId: string, apiToken: string) {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/accounts/${accountId}/stream`,
    { headers: { Authorization: `Bearer ${apiToken}` } }
  );

  const data = await response.json();
  return data.result;  // Array of video objects
}

async function deleteVideo(videoId: string) {
  await fetch(
    `https://api.cloudflare.com/client/v4/accounts/${process.env.CF_ACCOUNT_ID}/stream/${videoId}`,
    {
      method: "DELETE",
      headers: { Authorization: `Bearer ${process.env.CF_API_TOKEN}` },
    }
  );
}

const BUNNY_API_KEY = process.env.BUNNY_API_KEY!;
const BUNNY_LIBRARY_ID = process.env.BUNNY_LIBRARY_ID!;

// Create a video entry
async function createBunnyVideo(title: string): Promise<{ videoId: string }> {
  const response = await fetch(
    `https://video.bunnycdn.com/library/${BUNNY_LIBRARY_ID}/videos`,
    {
      method: "POST",
      headers: {
        AccessKey: BUNNY_API_KEY,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ title }),
    }
  );

  const data = await response.json();
  return { videoId: data.guid };
}

// Upload video bytes
async function uploadBunnyVideo(videoId: string, videoBuffer: Buffer): Promise<void> {
  await fetch(
    `https://video.bunnycdn.com/library/${BUNNY_LIBRARY_ID}/videos/${videoId}`,
    {
      method: "PUT",
      headers: {
        AccessKey: BUNNY_API_KEY,
        "Content-Type": "application/octet-stream",
      },
      body: videoBuffer,
    }
  );
}

// Full upload pipeline
async function uploadVideo(title: string, videoPath: string): Promise<string> {
  const { videoId } = await createBunnyVideo(title);

  const videoBuffer = fs.readFileSync(videoPath);
  await uploadBunnyVideo(videoId, videoBuffer);

  // Playback URL: https://[hostname].b-cdn.net/{videoId}/playlist.m3u8
  return videoId;
}

// Bunny Stream embeds via iframe
function BunnyPlayer({ videoId, libraryId }: { videoId: string; libraryId: string }) {
  return (
    <div style={{ position: "relative", paddingTop: "56.25%" }}>
      <iframe
        src={`https://iframe.mediadelivery.net/embed/${libraryId}/${videoId}?autoplay=false&loop=false&muted=false&preload=true`}
        loading="lazy"
        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
        allowFullScreen
        style={{ border: "none", position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
      />
    </div>
  );
}