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.serverUrlstring | undefinedRequired

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.tokenstring | undefinedRequired

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 | booleanOptional

Publish audio immediately after connecting to your LiveKit room.

props.connectbooleanOptional

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

props.connectOptionsRoomConnectOptionsOptional

Define options how to connect to the LiveKit server.

props.onConnected() => voidOptional

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

props.onEncryptionError(error: Error) => voidOptional

props.onError(error: Error) => voidOptional

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

props.optionsRoomOptionsOptional

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

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 | booleanOptional

Publish screen share immediately after connecting to your LiveKit room.

props.simulateParticipantsnumber | undefinedOptional

props.videoVideoCaptureOptions | booleanOptional

Publish video immediately after connecting to your LiveKit room.

Returns

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