useLiveKitRoom

The useLiveKitRoom hook is used to implement the LiveKitRoom or your custom implementation of it. It returns a Room instance and HTML props that should be applied to the root element of the component.

Import

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

Usage

const { room, htmlProps } = useLiveKitRoom();
return <div {...htmlProps}>...</div>;

Properties

serverUrlstring | undefined

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.

tokenstring | undefined

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.

audio?AudioCaptureOptions | boolean

Publish audio immediately after connecting to your LiveKit room.

connect?boolean

If set to true a connection to LiveKit room is initiated.

connectOptions?RoomConnectOptions

Define options how to connect to the LiveKit server.

onConnected?() => void

onDisconnected?() => void

onEncryptionError?(error: Error) => void

onError?(error: Error) => void

onMediaDeviceFailure?(failure?: MediaDeviceFailure) => void

options?RoomOptions

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.

room?Room

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.

screen?ScreenShareCaptureOptions | boolean

Publish screen share immediately after connecting to your LiveKit room.

simulateParticipants?number | undefined

video?VideoCaptureOptions | boolean

Publish video immediately after connecting to your LiveKit room.

Returns

{
  room: Room | undefined;
  htmlProps: HTMLAttributes<T>;
}