Build a video meeting app

npx create-next-app@latest my-meeting-app --typescript --app
cd my-meeting-app
npm install @levelchat/web @levelchat/web-react

export async function POST(req: Request) {
  const userId = await yourAuth(req); // your existing auth
  const { searchParams } = new URL(req.url);
  const roomId = searchParams.get('room')!;
  const displayName = searchParams.get('name') ?? 'Guest';

  const res = await fetch(`${process.env.LEVELCHAT_API_URL}/v1/auth/tokens/room`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.LEVELCHAT_API_KEY}`, // lc_pk_xxx.yyy
    },
    body: JSON.stringify({
      roomId,
      userId,
      identity: userId,
      displayName,
      roomType: 'meeting', // 'meeting' | 'live' | 'webinar' | '1to1'
      role: 'publisher', // every meeting participant publishes
      caps: ['publish:camera', 'publish:mic', 'publish:screen', 'subscribe:all', 'chat:send'],
      ttlSeconds: 600, // 10 minutes
    }),
  });

  if (!res.ok) return new Response('token mint failed', { status: 500 });
  const { token, expires_at } = await res.json();
  return Response.json({ token, expires_at });
}

import { LevelChat, type LiveStream } from '@levelchat/web';

async function connect(roomId: string, displayName: string): Promise<LiveStream> {
  // 1. Mint the token from YOUR server (step 2).
  const { token } = await fetch(
    `/api/lc-token?room=${roomId}&name=${encodeURIComponent(displayName)}`,
  ).then((r) => r.json());

  // 2. Construct the client. `logLevel: 'warn'` is the production default.
  const client = new LevelChat({ logLevel: 'warn' });

  // 3. Join. `role: 'broadcaster'` gives every participant the publish
  //    surface — in a meeting, everyone is a broadcaster. `roomType`
  //    is a topology hint; the server still enforces room policy.
  const live = await client.joinLive({
    token,
    role: 'broadcaster',
    roomType: 'meeting',
  });

  // `live.room.ready` resolves once the initial join-ack has been
  // processed — await it before reading `live.room.participants`.
  await live.room.ready;

  return live;
}

async function publishLocalMedia(
  live: LiveStream,
  opts: { cameraDeviceId?: string; micDeviceId?: string; camOn: boolean; micOn: boolean },
): Promise<MediaStream | null> {
  const tracks: MediaStreamTrack[] = [];

  if (opts.camOn) {
    const cam = await live.publishCamera({
      resolution: '720p',
      ...(opts.cameraDeviceId ? { deviceId: opts.cameraDeviceId } : {}),
      // Simulcast: three layers the SFU picks from per-subscriber.
      encodings: [{ rid: 'h', maxBitrate: 1_500_000 }],
    });
    if (cam.mediaStreamTrack) tracks.push(cam.mediaStreamTrack);
  }

  if (opts.micOn) {
    const mic = await live.publishMic(
      opts.micDeviceId ? { deviceId: opts.micDeviceId } : undefined,
    );
    if (mic.mediaStreamTrack) tracks.push(mic.mediaStreamTrack);
  }

  // Bundle the two tracks into one MediaStream for the local preview.
  return tracks.length > 0 ? new MediaStream(tracks) : null;
}

<video ref={localVideoRef} autoPlay playsInline muted style={{ transform: 'scaleX(-1)' }} />

if (localVideoRef.current && localStream) {
  localVideoRef.current.srcObject = localStream;
}

function toggleMic(localStream: MediaStream, muted: boolean) {
  localStream.getAudioTracks().forEach((t) => (t.enabled = !muted));
}
function toggleCam(localStream: MediaStream, muted: boolean) {
  localStream.getVideoTracks().forEach((t) => (t.enabled = !muted));
}

import { LevelChatError } from '@levelchat/web';

try {
  await room.publishCamera({ resolution: '720p' });
} catch (err) {
  if (err instanceof LevelChatError && err.code === 'media/permission-denied') {
    showToast('Camera blocked — you can still see and hear everyone.');
  } else {
    throw err; // unexpected — let it surface
  }
}

async function switchCamera(room, deviceId, currentTrackId) {
  await room.stopPublishing(currentTrackId);
  return room.publishCamera({ deviceId, resolution: '720p' });
}

interface RemotePeer {
  id: string;
  displayName: string;
  stream: MediaStream; // camera + mic
  screen: MediaStream | null; // screen share, when present
}

function wireParticipantGrid(
  live: LiveStream,
  localId: string | null,
  onChange: (peers: RemotePeer[]) => void,
) {
  const peers = new Map<string, RemotePeer>();
  const emit = () => onChange([...peers.values()]);

  // Seed with whoever is already in the room (minus ourselves).
  for (const p of live.room.participants.values()) {
    if (p.id === localId) continue;
    peers.set(p.id, {
      id: p.id,
      displayName: p.identity ?? p.displayName ?? 'Participant',
      stream: new MediaStream(),
      screen: null,
    });
  }
  emit();

  live.room.on('participant-joined', (p) => {
    if (p.id === localId || peers.has(p.id)) return;
    peers.set(p.id, {
      id: p.id,
      displayName: p.identity ?? p.displayName ?? 'Participant',
      stream: new MediaStream(),
      screen: null,
    });
    emit();
  });

  live.room.on('participant-left', (p) => {
    peers.delete(p.id);
    emit();
  });

  live.room.on('track-subscribed', (track) => {
    if (!track.mediaStreamTrack || !track.participantId) return;
    const peer = peers.get(track.participantId);
    if (!peer) return;
    const isScreen = track.source === 'screen-video' || track.source === 'screen-audio';
    if (isScreen) {
      peer.screen ??= new MediaStream();
      peer.screen.addTrack(track.mediaStreamTrack);
    } else {
      peer.stream.addTrack(track.mediaStreamTrack);
    }
    emit();
  });

  live.room.on('track-unsubscribed', (track) => {
    if (!track.participantId) return;
    const peer = peers.get(track.participantId);
    if (!peer) return;
    if (track.source === 'screen-video' || track.source === 'screen-audio') {
      peer.screen = null;
      emit();
    }
  });
}

function PeerTile({ peer }: { peer: RemotePeer }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  useEffect(() => {
    if (videoRef.current) videoRef.current.srcObject = peer.stream;
  }, [peer.stream]);
  return (
    <div className="tile">
      <video ref={videoRef} autoPlay playsInline />
      <span className="name">{peer.displayName}</span>
    </div>
  );
}

async function startScreenShare(live: LiveStream): Promise<MediaStream> {
  const tracks = await live.publishScreen({ frameRate: 15 });
  const stream = new MediaStream();
  const trackIds: string[] = [];
  for (const t of tracks) {
    if (t.mediaStreamTrack) stream.addTrack(t.mediaStreamTrack);
    trackIds.push(t.id);
    // The browser's own "Stop sharing" pill ends the track directly —
    // listen for it so your UI collapses in sync.
    t.mediaStreamTrack?.addEventListener('ended', () => stopScreenShare(live, trackIds), {
      once: true,
    });
  }
  return stream;
}

async function stopScreenShare(live: LiveStream, trackIds: string[]) {
  for (const id of trackIds) {
    await live.room.stopPublishing(id);
  }
}

function wireChat(live: LiveStream, localId: string | null, onMessage: (m: ChatEntry) => void) {
  live.room.on('chat-message', (msg) => {
    const owner = live.room.participants.get(msg.from);
    onMessage({
      id: msg.id,
      authorId: msg.from,
      authorName: owner?.identity ?? msg.from.slice(0, 8),
      body: msg.text,
      at: msg.at,
      mine: msg.from === localId,
    });
  });
}

function sendChat(live: LiveStream, text: string) {
  if (!text.trim()) return;
  live.room.sendChat({ text });
  // Optimistically render our own message — the server won't echo it.
}

interface ChatEntry {
  id: string;
  authorId: string;
  authorName: string;
  body: string;
  at: string;
  mine: boolean;
}

async function startRecording(live: LiveStream) {
  const recording = await live.room.record({ compose: 'speaker' });
  // recording.id — surface it in your UI / store it for later.
  return recording.id;
}

async function stopRecording(live: LiveStream) {
  await live.room.stopRecording();
}

live.room.on('connection-state', (state) => {
  // 'connecting' | 'connected' | 'reconnecting' | 'disconnected' | 'failed'
  if (state === 'reconnecting') showReconnectingBanner();
  if (state === 'connected') hideReconnectingBanner();
});

live.room.on('connection-quality', (participantId, quality) => {
  // `quality.label` ∈ 'excellent' | 'good' | 'fair' | 'poor' | 'disconnected'
  // For the local participant, `participantId` is 'local'.
  if (participantId === 'local' || participantId === live.room.localId) {
    updateLocalQualityIndicator(quality);
  }
});

async function leave(live: LiveStream, localStream: MediaStream | null) {
  await live.leave();
  // `leave()` stops published tracks, but stop the preview stream's
  // tracks too so the camera light goes off immediately.
  localStream?.getTracks().forEach((t) => t.stop());
}

useEffect(() => {
  return () => {
    void live?.leave();
    localStream?.getTracks().forEach((t) => t.stop());
  };
}, [live, localStream]);

'use client';
import { useEffect, useState } from 'react';
import {
  LevelChatProvider,
  ParticipantGrid,
  Chat,
  useLocalParticipant,
  useParticipants,
  useChat,
  useRoom,
} from '@levelchat/web-react';

export default function RoomPage({ params }: { params: { id: string } }) {
  const [token, setToken] = useState<string>();
  useEffect(() => {
    fetch(`/api/lc-token?room=${params.id}&name=Alice`)
      .then((r) => r.json())
      .then((d) => setToken(d.token));
  }, [params.id]);

  if (!token) return <p>Connecting…</p>;

  // `autoJoin` takes the same options as `client.joinRoom` — pass the
  // token your server minted. The provider joins on mount, leaves on unmount.
  return (
    <LevelChatProvider autoJoin={{ token }}>
      <ParticipantGrid />
      <Controls />
      <RoomChat />
    </LevelChatProvider>
  );
}

function Controls() {
  // `useLocalParticipant` returns the publish helpers, scoped to the
  // local participant. They no-op until the provider has joined.
  const { publishCamera, publishMic, publishScreen } = useLocalParticipant();
  return (
    <div className="controls">
      <button onClick={() => publishCamera({ resolution: '720p' })}>Camera</button>
      <button onClick={() => publishMic()}>Mic</button>
      <button onClick={() => publishScreen({ frameRate: 15 })}>Share screen</button>
    </div>
  );
}

function RoomChat() {
  const room = useRoom();
  const messages = useChat(); // append-only ChatMessageView[]
  return <Chat messages={messages} onSend={(text) => room?.sendChat({ text })} localName="Alice" />;
}