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

props.serverUrl

Required

string | 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.

props.token

Required

string | 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.

props.audioAudioCaptureOptions | boolean

Publish audio immediately after connecting to your LiveKit room.

props.connectboolean

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

props.connectOptionsRoomConnectOptions

Define options how to connect to the LiveKit server.

props.onConnected() => void

props.onDisconnected(reason?: DisconnectReason) => void

props.onEncryptionError(error: Error) => void

props.onError(error: Error) => void

props.onMediaDeviceFailure(failure?: MediaDeviceFailure, kind?: MediaDeviceKind) => void

props.optionsRoomOptions

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.

props.roomRoom

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.

props.screenScreenShareCaptureOptions | boolean

Publish screen share immediately after connecting to your LiveKit room.

props.simulateParticipantsnumber | undefined

props.videoVideoCaptureOptions | boolean

Publish video immediately after connecting to your LiveKit room.

Returns

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