VOD Upload and Playback

import { Livepeer } from 'livepeer';

const livepeer = new Livepeer({
  apiKey: process.env.LIVEPEER_API_KEY!,
  serverURL: process.env.LIVEPEER_API_URL!,
});

export async function POST(req: Request) {
  const { name } = (await req.json()) as { name: string };

  const result = await livepeer.asset.create({ name });

  return Response.json({
    assetId: result.data?.asset?.id,
    playbackId: result.data?.asset?.playbackId,
    tusUploadUrl: result.data?.tusEndpoint,
  });
}

import { Livepeer } from 'livepeer';

const livepeer = new Livepeer({
  apiKey: process.env.LIVEPEER_API_KEY!,
  serverURL: process.env.LIVEPEER_API_URL!,
});

export async function GET(
  req: Request,
  ctx: { params: Promise<{ id: string }> },
) {
  const { id } = await ctx.params;

  const result = await livepeer.asset.get(id);
  const asset = result.asset;

  return Response.json({
    id: asset?.id,
    playbackId: asset?.playbackId,
    status: asset?.status?.phase,
    errorMessage: asset?.status?.errorMessage,
  });
}

'use client';

const { useState } = React;
import * as tus from 'tus-js-client';

interface UploadResult {
  assetId: string;
  playbackId: string;
}

export function Uploader({
  onComplete,
}: {
  onComplete: (result: UploadResult) => void;
}) {
  const [progress, setProgress] = useState(0);
  const [phase, setPhase] = useState<string>('idle');
  const [error, setError] = useState<string | null>(null);

  async function handleFile(file: File) {
    setError(null);
    setPhase('creating asset');

    // Step 1: create the asset on the server
    const createRes = await fetch('/api/assets', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: file.name }),
    });
    const { assetId, playbackId, tusUploadUrl } = await createRes.json();

    if (!tusUploadUrl) {
      setError('No TUS endpoint returned');
      return;
    }

    setPhase('uploading');

    // Step 2: upload the file via TUS
    await new Promise<void>((resolve, reject) => {
      const upload = new tus.Upload(file, {
        endpoint: tusUploadUrl,
        uploadUrl: tusUploadUrl, // Pre-allocated URL; skip POST creation
        metadata: { filename: file.name, filetype: file.type },
        chunkSize: 5 * 1024 * 1024, // 5 MB chunks
        onError: (err) => reject(err),
        onProgress: (bytesUploaded, bytesTotal) => {
          setProgress(Math.round((bytesUploaded / bytesTotal) * 100));
        },
        onSuccess: () => resolve(),
      });
      upload.start();
    });

    setPhase('processing');

    // Step 3: poll until the asset is ready
    let attempts = 0;
    while (attempts < 120) {
      // 10 minutes at 5s intervals
      const statusRes = await fetch(`/api/assets/${assetId}`);
      const status = await statusRes.json();

      if (status.status === 'ready') {
        setPhase('ready');
        onComplete({ assetId, playbackId });
        return;
      }
      if (status.status === 'failed') {
        setError(status.errorMessage ?? 'Asset processing failed');
        return;
      }

      await new Promise((r) => setTimeout(r, 5000));
      attempts += 1;
    }

    setError('Asset did not become ready within the timeout');
  }

  return (
    <div className="space-y-4 p-4 border rounded">
      <input
        type="file"
        accept="video/*"
        onChange={(e) => e.target.files?.[0] && handleFile(e.target.files[0])}
        disabled={phase !== 'idle' && phase !== 'ready'}
        className="block"
      />
      {phase !== 'idle' && (
        <div className="space-y-2">
          <p className="text-sm">Phase: {phase}</p>
          {phase === 'uploading' && (
            <progress
              value={progress}
              max={100}
              className="w-full h-2"
              aria-label="Upload progress"
            />
          )}
        </div>
      )}
      {error && <p className="text-red-600">{error}</p>}
    </div>
  );
}

import * as Player from '@livepeer/react/player';
import { getSrc } from '@livepeer/react/external';
import { Livepeer } from 'livepeer';

const livepeer = new Livepeer({
  apiKey: process.env.LIVEPEER_API_KEY!,
  serverURL: process.env.LIVEPEER_API_URL!,
});

interface PageProps {
  params: Promise<{ playbackId: string }>;
}

export default async function WatchPage({ params }: PageProps) {
  const { playbackId } = await params;

  const playback = await livepeer.playback.get(playbackId);
  const src = getSrc(playback.playbackInfo);

  return (
    <main className="max-w-2xl mx-auto p-8 space-y-4">
      <h1 className="text-2xl font-bold">Playback</h1>
      <Player.Root src={src} autoPlay volume={1}>
        <Player.Container className="w-full aspect-video bg-black rounded overflow-hidden">
          <Player.Video title="VOD" className="w-full h-full" />
        </Player.Container>
      </Player.Root>
      <p className="text-sm text-gray-600">
        Playback ID: <code>{playbackId}</code>
      </p>
    </main>
  );
}

'use client';

const { useState } = React;
// Import Uploader from ./components/Uploader.

export default function HomePage() {
  const [uploaded, setUploaded] = useState<{
    assetId: string;
    playbackId: string;
  } | null>(null);

  return (
    <main className="max-w-2xl mx-auto p-8 space-y-6">
      <header>
        <h1 className="text-2xl font-bold">VOD Upload</h1>
        <p className="text-gray-600">
          Upload a video file. The asset transcodes and becomes playable.
        </p>
      </header>
      <Uploader onComplete={setUploaded} />
      {uploaded && (
        <div className="p-4 border rounded bg-green-50">
          <p className="font-semibold">Upload complete</p>
          <p className="text-sm">
            <a
              href={`/watch/${uploaded.playbackId}`}
              className="text-blue-600 underline"
            >
              Watch the asset
            </a>
          </p>
        </div>
      )}
    </main>
  );
}

npm run dev

Build the "VOD Upload and Playback" tutorial as a Next.js App Router project. Create a TypeScript app, install livepeer, @livepeer/react, and tus-js-client, and use placeholders LIVEPEER_API_URL=<gateway provider Asset API base URL>, LIVEPEER_API_KEY=<gateway provider API key>, and NEXT_PUBLIC_PLAYBACK_BASE_URL=<provider playback base URL if needed>. Implement server routes for asset creation, upload URL retrieval, and asset status polling; implement a browser uploader with TUS resumable upload and progress display; and implement a playback page that loads the asset by playbackId and renders it through @livepeer/react/player. Include npm run dev, upload verification with a small MP4, status transition checks, and playback verification. Keep API keys server-side and do not use Livepeer Studio-specific endpoints.