Build a full video call

LiveKit’s VideoConference component already provides a participant grid, focus layout, pagination, device controls, screen sharing, basic chat, and connection feedback. Use it directly rather than rebuilding those behaviors.

Collect device choices

Render PreJoin before creating the room:

import { PreJoin } from "@livekit/components-react";

<PreJoin onSubmit={(choices) => void startSession(choices)} />;

Create the API session after the user confirms their devices. This avoids starting a billable realtime session while the user is still deciding whether to join.

Render the conference

import "@livekit/components-styles";
import { VideoConference } from "@livekit/components-react";
import { DigitalHumanRoom } from "digital-human/react";

<DigitalHumanRoom
  connection={connection}
  audio={choices.audioEnabled ? { deviceId: choices.audioDeviceId } : false}
  video={choices.videoEnabled ? { deviceId: choices.videoDeviceId } : false}
>
  <VideoConference />
</DigitalHumanRoom>;

Keep LiveKit’s component stylesheet imported once in your application. You can override its design tokens or replace individual LiveKit layout components as your product evolves.

End the API session

Leaving a LiveKit room and ending an API session are separate operations. When the user explicitly ends the experience, call an authenticated server route that invokes:

await client.endSession(sessionId);

Do not automatically end the API session for every transient disconnect; the browser may reconnect after a short network interruption.

Getting started

JavaScript SDK

Guides

API reference

Help

Collect device choices

Render the conference

End the API session

​Collect device choices

​Render the conference

​End the API session

Collect device choices

Render the conference

End the API session