LiveKitRoom
The LiveKitRoom component provides the room context to all its child components. It is generally the starting point of your LiveKit app and the root of the LiveKit component tree. It provides the room state as a React context to all child components, so you don't have to pass it yourself.
Import
import { LiveKitRoom } from '@livekit/components-react';
Usage
<LiveKitRoom token="<livekit-token>" serverUrl="<url-to-livekit-server>" connect={true}>...</LiveKitRoom>
Audio only room
You can decide what features your room will provide. There are flags to activate audio
, video
and screen
(screen share) for your room. For example: If you want to create a audio only app you would set video
and screen
to false
.
Instead of just passing a boolean value, you can also pass an option object that gives fine-grained control over the given functionality. See props table for more info.
import { LiveKitRoom } from '@livekit/components-react';const MyPage = () => (<LiveKitRoomaudio={true}video={false}screen={false}serverUrl="<example.livekit.cloud>"token="<your-token>">{/*...*/}</LiveKitRoom>);
Pass your own room
The LiveKitRoom
component takes care of creating the room and providing the RoomContext
for the child components. If more control over the room object is needed, a self created room can also be given to the component.
import { LiveKitRoom } from '@livekit/components-react';import { Room } from 'livekit-client';const MyPage = () => {const room = new Room({});return (<LiveKitRoomserverUrl="<example.livekit.cloud>"token="<your-token>"room={room}>{/*...*/}</LiveKitRoom>);};
Properties
URL to the LiveKit server. For example: wss://<domain>.livekit.cloud
To simplify the implementation, undefined
is also accepted as an intermediate value, but only with a valid string url can the connection be established.
A user specific access token for a client to authenticate to the room. This token is necessary to establish a connection to the room. To simplify the implementation, undefined
is also accepted as an intermediate value, but only with a valid string token can the connection be established.
(Optional) Publish audio immediately after connecting to your LiveKit room.
(Optional) If set to true a connection to LiveKit room is initiated.
(Optional) Define options how to connect to the LiveKit server.
(Optional)
(Optional)
(Optional)
(Optional)
(Optional) Options for when creating a new room. When you pass your own room instance to this component, these options have no effect. Instead, set the options directly in the room instance.
(Optional) Optional room instance. By passing your own room instance you overwrite the options
parameter, make sure to set the options directly on the room instance itself.
(Optional) Publish screen share immediately after connecting to your LiveKit room.
(Optional)
(Optional) Publish video immediately after connecting to your LiveKit room.