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 (<LiveKitRoomvideo={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 screenshare 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 usedas 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!