React Quickstart

Get started with LiveKit and React

1. Install LiveKit SDK

Install the LiveKit SDK:

yarn add @livekit/components-react @livekit/components-styles livekit-client

2. Join a room

Note that this example hardcodes a token. In a real app, you’ll need your server to generate a token for you.

import {
ControlBar,
GridLayout,
LiveKitRoom,
ParticipantTile,
RoomAudioRenderer,
useTracks,
} from "@livekit/components-react";
import "@livekit/components-styles";
import { Track } from "livekit-client";
const serverUrl = '<your LiveKit server URL>';
const token = '<generate a token>';
export default function App() {
return (
<LiveKitRoom
video={true}
audio={true}
token={token}
serverUrl={process.env.NEXT_PUBLIC_LK_SERVER_URL}
// Use the default LiveKit theme for nice styles.
data-lk-theme="default"
style={{ height: '100vh' }}
>
{/* Your custom component with basic video conferencing functionality. */}
<MyVideoConference />
{/* The RoomAudioRenderer takes care of room-wide audio for you. */}
<RoomAudioRenderer />
{/* Controls for the user to start/stop audio, video, and screen
share tracks and to leave the room. */}
<ControlBar />
</LiveKitRoom>
);
}
function MyVideoConference() {
// `useTracks` returns all camera and screen share tracks. If a user
// joins without a published camera track, a placeholder track is returned.
const tracks = useTracks(
[
{ source: Track.Source.Camera, withPlaceholder: true },
{ source: Track.Source.ScreenShare, withPlaceholder: false },
],
{ onlySubscribed: false },
);
return (
<GridLayout tracks={tracks} style={{ height: 'calc(100vh - var(--lk-control-bar-height))' }}>
{/* The GridLayout accepts zero or one child. The child is used
as a template to render all passed in tracks. */}
<ParticipantTile />
</GridLayout>
);
}

3. Next Steps

  • Set up a server to generate tokens for your app at runtime by following this guide: Generating Tokens.
  • If you're looking to dive deeper into building your LiveKit app with React, check out the React Components reference section. There you'll find a comprehensive list of available components and React hooks, along with examples of how to use them. This is a great resource for building more complex and advanced apps.

Happy coding!