Low-Latency Live Streaming App

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.stream.create({
    name,
    record: false,
  });

  return Response.json({
    streamKey: result.stream?.streamKey,
    playbackId: result.stream?.playbackId,
  });
}

'use client';

const { useState } = React;
import * as Broadcast from '@livepeer/react/broadcast';
import { getIngest } from '@livepeer/react/external';

interface StreamInfo {
  streamKey: string;
  playbackId: string;
}

export default function BroadcastPage() {
  const [stream, setStream] = useState<StreamInfo | null>(null);

  async function createStream() {
    const res = await fetch('/api/streams', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: `live-${Date.now()}` }),
    });
    const data = await res.json();
    setStream(data);
  }

  if (!stream) {
    return (
      <main className="max-w-2xl mx-auto p-8">
        <h1 className="text-2xl font-bold mb-4">Broadcast</h1>
        <button
          onClick={createStream}
          className="bg-blue-600 text-white px-4 py-2 rounded"
        >
          Create Stream
        </button>
      </main>
    );
  }

  const ingestUrl = getIngest(stream.streamKey, {
    baseUrl: process.env.NEXT_PUBLIC_WEBRTC_INGEST_BASE,
  });

  return (
    <main className="max-w-2xl mx-auto p-8 space-y-4">
      <h1 className="text-2xl font-bold">Broadcast</h1>
      <Broadcast.Root ingestUrl={ingestUrl}>
        <Broadcast.Container className="w-full aspect-video bg-black rounded">
          <Broadcast.Video title="Broadcasting" className="w-full h-full" />
          <Broadcast.Controls className="absolute bottom-4 left-4 flex gap-2">
            <Broadcast.EnabledTrigger className="bg-red-600 text-white px-3 py-1 rounded text-sm">
              <Broadcast.EnabledIndicator asChild matcher={false}>
                <span>Start</span>
              </Broadcast.EnabledIndicator>
              <Broadcast.EnabledIndicator asChild matcher={true}>
                <span>Stop</span>
              </Broadcast.EnabledIndicator>
            </Broadcast.EnabledTrigger>
          </Broadcast.Controls>
        </Broadcast.Container>
      </Broadcast.Root>
      <p className="text-sm text-gray-600">
        Playback ID: <code>{stream.playbackId}</code>
      </p>
      <p className="text-sm">
        <a href={`/watch/${stream.playbackId}`} className="text-blue-600 underline">
          Open viewer in another tab
        </a>
      </p>
    </main>
  );
}

'use client';

const { use, useEffect, useState } = React;
import * as Player from '@livepeer/react/player';

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

export default function WatchPage({ params }: PageProps) {
  const { playbackId } = use(params);
  const [src, setSrc] = useState<Player.Src[] | null>(null);

  useEffect(() => {
    const base = process.env.NEXT_PUBLIC_WEBRTC_PLAYBACK_BASE;
    const sources: Player.Src[] = [
      {
        type: 'webrtc',
        src: `${base}/${playbackId}`,
        mime: null,
        width: null,
        height: null,
      },
      // Fallback to HLS if WebRTC negotiation fails
      {
        type: 'hls',
        src: `${base?.replace('/webrtc', '/hls')}/${playbackId}/index.m3u8`,
        mime: 'application/vnd.apple.mpegurl',
        width: null,
        height: null,
      },
    ];
    setSrc(sources);
  }, [playbackId]);

  if (!src) {
    return <main className="p-8">Loading…</main>;
  }

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

npm run dev

Build the "Low-Latency Live Streaming App" tutorial as a Next.js App Router project. Create a TypeScript app, install @livepeer/react and livepeer, and use placeholders LIVEPEER_API_URL=<gateway provider API base URL>, LIVEPEER_API_KEY=<gateway provider API key>, NEXT_PUBLIC_WEBRTC_INGEST_BASE=<WHIP base URL>, and NEXT_PUBLIC_WEBRTC_PLAYBACK_BASE=<WHEP base URL>. Implement a server route that creates a stream and returns streamKey plus playbackId, a broadcaster page using @livepeer/react/broadcast and getIngest, and a viewer page using @livepeer/react/player with WebRTC then HLS fallback. Include run commands, browser verification for /broadcast and /watch/[playbackId], and troubleshooting for ICE/TURN failures. Keep the gateway API key server-side and do not use Livepeer Studio-specific endpoints.