LiveKit vs Agora vs 100ms (2026)

Voice AI agents (LLM + STT + TTS)          → LiveKit (Agents framework)
Consumer app: video calls, live streaming    → Agora (global network)
Developer prototype: call UI fast           → 100ms (pre-built components)
Self-hosted WebRTC (no vendor lock-in)      → LiveKit
Enterprise scale (1M concurrent users)      → Agora
Virtual events and webinars                 → Agora or 100ms
React-first application                     → LiveKit or 100ms

npm install livekit-client @livekit/components-react

import { Room, RoomEvent, Track } from "livekit-client";

async function joinRoom(url: string, token: string) {
  const room = new Room({
    adaptiveStream: true,
    dynacast: true,        // Automatically reduce quality for invisible participants
    videoCaptureDefaults: {
      resolution: { width: 1280, height: 720, frameRate: 30 },
    },
  });

  // Event listeners
  room.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
    if (track.kind === Track.Kind.Video) {
      const element = track.attach();  // Returns <video> element
      document.getElementById("remote-video")?.appendChild(element);
    } else if (track.kind === Track.Kind.Audio) {
      track.attach();  // Auto-plays audio
    }
  });

  room.on(RoomEvent.ParticipantConnected, (participant) => {
    console.log("Participant joined:", participant.identity);
  });

  room.on(RoomEvent.Disconnected, () => {
    console.log("Disconnected from room");
  });

  await room.connect(url, token);

  // Enable camera + microphone
  await room.localParticipant.enableCameraAndMicrophone();

  return room;
}

import {
  LiveKitRoom,
  VideoConference,
  GridLayout,
  ParticipantTile,
  useTracks,
  ControlBar,
} from "@livekit/components-react";
import "@livekit/components-styles";

// Full video conference with one component
function VideoCallPage({ token }: { token: string }) {
  return (
    <LiveKitRoom
      serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL!}
      token={token}
      connect={true}
      video={true}
      audio={true}
      onDisconnected={() => router.push("/")}
    >
      <VideoConference />  {/* Includes grid, controls, chat */}
    </LiveKitRoom>
  );
}

// Custom layout with granular control
function CustomVideoLayout({ token }: { token: string }) {
  return (
    <LiveKitRoom serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL!} token={token}>
      <RoomContent />
    </LiveKitRoom>
  );
}

function RoomContent() {
  const tracks = useTracks([Track.Source.Camera, Track.Source.ScreenShare]);

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <GridLayout tracks={tracks}>
        <ParticipantTile />
      </GridLayout>
      <ControlBar />
    </div>
  );
}

// app/api/livekit/token/route.ts
import { AccessToken } from "livekit-server-sdk";

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const room = searchParams.get("room") ?? "default-room";
  const username = searchParams.get("username") ?? "anonymous";

  if (!process.env.LIVEKIT_API_KEY || !process.env.LIVEKIT_API_SECRET) {
    return Response.json({ error: "Server misconfigured" }, { status: 500 });
  }

  const at = new AccessToken(
    process.env.LIVEKIT_API_KEY,
    process.env.LIVEKIT_API_SECRET,
    {
      identity: username,
      ttl: "10m",
    }
  );

  at.addGrant({
    roomJoin: true,
    room,
    canPublish: true,
    canSubscribe: true,
    canPublishData: true,
  });

  const token = await at.toJwt();
  return Response.json({ token, url: process.env.NEXT_PUBLIC_LIVEKIT_URL });
}

# LiveKit Agents — Python SDK for AI voice pipelines
# pip install livekit-agents[openai,deepgram]
from livekit import agents
from livekit.agents import AgentSession, Agent, RoomInputOptions
from livekit.plugins import openai, deepgram, silero

async def entrypoint(ctx: agents.JobContext):
    await ctx.connect()

    session = AgentSession(
        stt=deepgram.STT(model="nova-2"),         # Speech-to-text
        llm=openai.LLM(model="gpt-4o-mini"),       # Language model
        tts=openai.TTS(voice="nova"),               # Text-to-speech
        vad=silero.VAD.load(),                      # Voice activity detection
    )

    await session.start(
        room=ctx.room,
        agent=Agent(instructions="You are a helpful customer service agent."),
        room_input_options=RoomInputOptions(noise_cancellation=True),
    )

if __name__ == "__main__":
    agents.cli.run_app(agents.WorkerOptions(entrypoint_fnc=entrypoint))

npm install agora-rtc-react
# Or plain SDK:
npm install agora-rtc-sdk-ng

import AgoraRTC, { AgoraRTCProvider, useRTCClient, useLocalMicrophoneTrack, useLocalCameraTrack, usePublish, useRemoteUsers } from "agora-rtc-react";

const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

export function VideoCall({
  appId,
  channel,
  token,
}: {
  appId: string;
  channel: string;
  token: string;
}) {
  return (
    <AgoraRTCProvider client={client}>
      <VideoCallContent appId={appId} channel={channel} token={token} />
    </AgoraRTCProvider>
  );
}

function VideoCallContent({ appId, channel, token }: { appId: string; channel: string; token: string }) {
  const client = useRTCClient();

  const { localMicrophoneTrack } = useLocalMicrophoneTrack(true);
  const { localCameraTrack } = useLocalCameraTrack(true);
  const remoteUsers = useRemoteUsers();

  usePublish([localMicrophoneTrack, localCameraTrack]);

  useEffect(() => {
    client.join(appId, channel, token, null);
    return () => { client.leave(); };
  }, []);

  return (
    <div style={{ display: "flex", flexWrap: "wrap" }}>
      {/* Local video */}
      <LocalVideoTrack track={localCameraTrack} play={true} style={{ width: 300, height: 200 }} />

      {/* Remote videos */}
      {remoteUsers.map((user) => (
        <RemoteUser key={user.uid} user={user} style={{ width: 300, height: 200 }} />
      ))}
    </div>
  );
}

import AgoraRTC from "agora-rtc-sdk-ng";

async function startScreenShare(client: IAgoraRTCClient) {
  // Create screen share track
  const screenTrack = await AgoraRTC.createScreenVideoTrack(
    {
      encoderConfig: "1080p_1",
      optimizationMode: "detail",  // "motion" | "detail"
    },
    "auto"  // Also capture system audio if available
  );

  // Publish screen track (stop camera first)
  await client.unpublish(localCameraTrack);
  await client.publish(screenTrack);

  // Stop screen sharing
  screenTrack.on("track-ended", async () => {
    await client.unpublish(screenTrack);
    screenTrack.close();
    await client.publish(localCameraTrack);
  });

  return screenTrack;
}

// Agora token generation (server-side)
import { RtcTokenBuilder, RtcRole } from "agora-token";

export function generateAgoraToken(channelName: string, uid: number): string {
  const appId = process.env.AGORA_APP_ID!;
  const appCertificate = process.env.AGORA_APP_CERTIFICATE!;
  const role = RtcRole.PUBLISHER;

  const expirationTime = Math.floor(Date.now() / 1000) + 3600;  // 1 hour

  return RtcTokenBuilder.buildTokenWithUid(
    appId,
    appCertificate,
    channelName,
    uid,
    role,
    expirationTime,
    expirationTime
  );
}

npm install @100mslive/roomkit-react @100mslive/react-sdk

import { HMSPrebuilt } from "@100mslive/roomkit-react";

// Fully featured video call UI — no configuration needed
function ConferencePage({ roomCode }: { roomCode: string }) {
  return (
    <div style={{ height: "100vh" }}>
      <HMSPrebuilt
        roomCode={roomCode}
        options={{
          userName: "Guest",
          endpoints: {
            tokenByRoomCode: "https://auth.100ms.live/v2/token",
          },
        }}
      />
    </div>
  );
}

import {
  HMSRoomProvider,
  useHMSStore,
  useHMSActions,
  selectLocalPeer,
  selectRemotePeers,
  selectIsLocalAudioEnabled,
  selectIsLocalVideoEnabled,
} from "@100mslive/react-sdk";

function App() {
  return (
    <HMSRoomProvider>
      <VideoRoom />
    </HMSRoomProvider>
  );
}

function VideoRoom() {
  const hmsActions = useHMSActions();
  const localPeer = useHMSStore(selectLocalPeer);
  const remotePeers = useHMSStore(selectRemotePeers);
  const isAudioOn = useHMSStore(selectIsLocalAudioEnabled);
  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);

  async function joinRoom() {
    const authToken = await fetchToken();  // From 100ms management API
    await hmsActions.join({
      userName: "Alice",
      authToken,
      settings: {
        isAudioMuted: false,
        isVideoMuted: false,
      },
    });
  }

  async function leaveRoom() {
    await hmsActions.leave();
  }

  return (
    <div>
      {localPeer ? (
        <>
          <VideoTile peerId={localPeer.id} isLocal />
          {remotePeers.map((peer) => (
            <VideoTile key={peer.id} peerId={peer.id} />
          ))}
          <div>
            <button onClick={() => hmsActions.setLocalAudioEnabled(!isAudioOn)}>
              {isAudioOn ? "Mute" : "Unmute"}
            </button>
            <button onClick={() => hmsActions.setLocalVideoEnabled(!isVideoOn)}>
              {isVideoOn ? "Stop Video" : "Start Video"}
            </button>
            <button onClick={leaveRoom}>Leave</button>
          </div>
        </>
      ) : (
        <button onClick={joinRoom}>Join Meeting</button>
      )}
    </div>
  );
}

function VideoTile({ peerId, isLocal = false }: { peerId: string; isLocal?: boolean }) {
  const { videoRef } = useVideo({ trackId: peerId });

  return (
    <video
      ref={videoRef}
      autoPlay
      muted={isLocal}
      playsInline
      style={{ width: 300, height: 200, objectFit: "cover" }}
    />
  );
}

// Server-side: start cloud recording
const response = await fetch(
  `https://api.100ms.live/v2/recordings/room/${roomId}/start`,
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${managementToken}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      meeting_url: `https://your-app.100ms.live/meeting/${roomCode}`,
      resolution: { width: 1280, height: 720 },
      storage: {
        type: "s3",
        options: {
          region: "us-east-1",
          bucket: "my-recordings",
          access_key: process.env.AWS_ACCESS_KEY_ID!,
          secret_key: process.env.AWS_SECRET_ACCESS_KEY!,
        },
      },
    }),
  }
);