@livekit/components-js-docs 0.0.0-20251021151641

package/generated-docs/react/component/prejoin.md

@@ -0,0 +1,85 @@
+---
+{
+  "title": "PreJoin",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/PreJoin.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# PreJoin
+
+The `PreJoin` prefab component is normally presented to the user before he enters a room. This component allows the user to check and select the preferred media device (camera und microphone). On submit the user decisions are returned, which can then be passed on to the `LiveKitRoom` so that the user enters the room with the correct media devices.
+
+## Import
+
+```typescript
+import { PreJoin } from "@livekit/components-react";
+```
+
+## Remarks
+
+This component is independent of the `LiveKitRoom` component and should not be nested within it. Because it only accesses the local media tracks this component is self-contained and works without connection to the LiveKit server.
+
+## Usage
+
+```tsx
+<PreJoin />
+```
+
+## Properties
+
+{% parameter name="camLabel" type="string" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="debug" type="boolean" optional=true %}
+_(Optional)_ Display a debug window for your convenience.
+
+{% /parameter %}
+
+{% parameter name="defaults" type="Partial<LocalUserChoices>" optional=true %}
+_(Optional)_ Prefill the input form with initial values.
+
+{% /parameter %}
+
+{% parameter name="joinLabel" type="string" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="micLabel" type="string" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onError" type="(error: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onSubmit" type="(values: LocalUserChoices) => void" optional=true %}
+_(Optional)_ This function is called with the `LocalUserChoices` if validation is passed.
+
+{% /parameter %}
+
+{% parameter name="onValidate" type="(values: LocalUserChoices) => boolean" optional=true %}
+_(Optional)_ Provide your custom validation function. Only if validation is successful the user choices are past to the onSubmit callback.
+
+{% /parameter %}
+
+{% parameter name="persistUserChoices" type="boolean" optional=true %}
+_(Optional)_ If true, user choices are persisted across sessions.
+
+{% /parameter %}
+
+{% parameter name="userLabel" type="string" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="videoProcessor" type="TrackProcessor<Track.Kind.Video>" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/roomaudiorenderer.md

@@ -0,0 +1,38 @@
+---
+{
+  "title": "RoomAudioRenderer",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/RoomAudioRenderer.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# RoomAudioRenderer
+
+The `RoomAudioRenderer` component is a drop-in solution for adding audio to your LiveKit app. It takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
+
+## Import
+
+```typescript
+import { RoomAudioRenderer } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <RoomAudioRenderer />
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="muted" type="boolean" optional=true %}
+_(Optional)_ If set to `true`<!-- -->, mutes all audio tracks rendered by the component.
+
+{% /parameter %}
+
+{% parameter name="volume" type="number" optional=true %}
+_(Optional)_ Sets the volume for all audio tracks rendered by this component. By default, the range is between `0.0` and `1.0`<!-- -->.
+
+{% /parameter %}

package/generated-docs/react/component/roomcontext.md

@@ -0,0 +1,16 @@
+---
+{
+  "title": "RoomContext",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/room-context.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# RoomContext
+
+## Import
+
+```typescript
+import { RoomContext } from "@livekit/components-react";
+```

package/generated-docs/react/component/roomname.md

@@ -0,0 +1,26 @@
+---
+{
+  "title": "RoomName",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/RoomName.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# RoomName
+
+The `RoomName` component renders the name of the connected LiveKit room inside a span tag.
+
+## Import
+
+```typescript
+import { RoomName } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <RoomName />
+</LiveKitRoom>
+```

package/generated-docs/react/component/startaudio.md

@@ -0,0 +1,31 @@
+---
+{
+  "title": "StartAudio",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/StartAudio.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# StartAudio
+
+The `StartAudio` component is only visible when the browser blocks audio playback. This is due to some browser implemented autoplay policies. To start audio playback, the user must perform a user-initiated event such as clicking this button. As soon as audio playback starts, the button hides itself again.
+
+## Import
+
+```typescript
+import { StartAudio } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <StartAudio label="Click to allow audio playback" />
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="label" type="string" optional=false %}
+{% /parameter %}

package/generated-docs/react/component/startmediabutton.md

@@ -0,0 +1,33 @@
+---
+{
+  "title": "StartMediaButton",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/StartMediaButton.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# StartMediaButton
+
+The `StartMediaButton` component is only visible when the browser blocks media playback. This is due to some browser implemented autoplay policies. To start media playback, the user must perform a user-initiated event such as clicking this button. As soon as media playback starts, the button hides itself again.
+
+## Import
+
+```typescript
+import { StartMediaButton } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <StartMediaButton label="Click to allow media playback" />
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="label" type="string" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/toast.md

@@ -0,0 +1,24 @@
+---
+{
+  "title": "Toast",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/Toast.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# Toast
+
+The `Toast` component is a rudimentary way to display a message to the user. This message should be short lived and not require user interaction. For example, displaying the current connection state like `ConnectionStateToast` does.
+
+## Import
+
+```typescript
+import { Toast } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<Toast>Connecting...</Toast>
+```

package/generated-docs/react/component/trackloop.md

@@ -0,0 +1,41 @@
+---
+{
+  "title": "TrackLoop",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/TrackLoop.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# TrackLoop
+
+The `TrackLoop` component loops over tracks. It is for example a easy way to loop over all participant camera and screen share tracks. `TrackLoop` creates a `TrackRefContext` for each track that you can use to e.g. render the track.
+
+## Import
+
+```typescript
+import { TrackLoop } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const trackRefs = useTracks([Track.Source.Camera]);
+<TrackLoop tracks={trackRefs}>
+  <TrackRefContext.Consumer>
+    {(trackRef) => trackRef && <VideoTrack trackRef={trackRef} />}
+  </TrackRefContext.Consumer>
+</TrackLoop>;
+```
+
+## Properties
+
+{% parameter name="children" type="React.ReactNode" optional=false %}
+The template component to be used in the loop.
+
+{% /parameter %}
+
+{% parameter name="tracks" type="TrackReference[] | TrackReferenceOrPlaceholder[]" optional=false %}
+Track references to loop over. You can the use `useTracks()` hook to get TrackReferences.
+
+{% /parameter %}

package/generated-docs/react/component/trackmutedindicator.md

@@ -0,0 +1,34 @@
+---
+{
+  "title": "TrackMutedIndicator",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/TrackMutedIndicator.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# TrackMutedIndicator
+
+The `TrackMutedIndicator` shows whether the participant's camera or microphone is muted or not. By default, a muted/unmuted icon is displayed for a camera, microphone, and screen sharing track.
+
+## Import
+
+```typescript
+import { TrackMutedIndicator } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<TrackMutedIndicator trackRef={trackRef} />
+```
+
+## Properties
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=false %}
+{% /parameter %}
+
+{% parameter name="show" type="'always' | 'muted' | 'unmuted'" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/trackrefcontext.md

@@ -0,0 +1,18 @@
+---
+{
+  "title": "TrackRefContext",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/track-reference-context.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# TrackRefContext
+
+This context provides a `TrackReferenceOrPlaceholder` to all child components.
+
+## Import
+
+```typescript
+import { TrackRefContext } from "@livekit/components-react";
+```

package/generated-docs/react/component/tracktoggle.md

@@ -0,0 +1,62 @@
+---
+{
+  "title": "TrackToggle",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/TrackToggle.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# TrackToggle
+
+With the `TrackToggle` component it is possible to mute and unmute your camera and microphone. The component uses an html button element under the hood so you can treat it like a button.
+
+## Import
+
+```typescript
+import { TrackToggle } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <TrackToggle source={Track.Source.Microphone} />
+  <TrackToggle source={Track.Source.Camera} />
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="source" type="T" optional=false %}
+{% /parameter %}
+
+{% parameter name="captureOptions" type="CaptureOptionsBySource<T>" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="initialState" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onChange" type="(enabled: boolean, isUserInitiated: boolean) => void" optional=true %}
+_(Optional)_ Function that is called when the enabled state of the toggle changes. The second function argument `isUserInitiated` is `true` if the change was initiated by a user interaction, such as a click.
+
+{% /parameter %}
+
+{% parameter name="onDeviceError" type="(error: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="publishOptions" type="TrackPublishOptions" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="showIcon" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/videoconference.md

@@ -0,0 +1,52 @@
+---
+{
+  "title": "VideoConference",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/VideoConference.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# VideoConference
+
+The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application. It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers of participants, basic non-persistent chat, screen sharing, and more.
+
+## Import
+
+```typescript
+import { VideoConference } from "@livekit/components-react";
+```
+
+## Remarks
+
+The component is implemented with other LiveKit components like `FocusContextProvider`<!-- -->, `GridLayout`<!-- -->, `ControlBar`<!-- -->, `FocusLayoutContainer` and `FocusLayout`<!-- -->. You can use these components as a starting point for your own custom video conferencing application.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <VideoConference />
+<LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="chatMessageDecoder" type="MessageDecoder" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="chatMessageEncoder" type="MessageEncoder" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="chatMessageFormatter" type="MessageFormatter" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="SettingsComponent" type="React.ComponentType" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/videotrack.md

@@ -0,0 +1,46 @@
+---
+{
+  "title": "VideoTrack",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/VideoTrack.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# VideoTrack
+
+The `VideoTrack` component is responsible for rendering participant video tracks like `camera` and `screen_share`<!-- -->. This component must have access to the participant's context, or alternatively pass it a `Participant` as a property.
+
+## Import
+
+```typescript
+import { VideoTrack } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<VideoTrack trackRef={trackRef} />
+```
+
+## Properties
+
+{% parameter name="manageSubscription" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onSubscriptionStatusChanged" type="(subscribed: boolean) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onTrackClick" type="(evt: ParticipantClickEvent) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReference" optional=true %}
+_(Optional)_ The track reference of the track to render.
+
+{% /parameter %}

package/generated-docs/react/component/voiceassistantcontrolbar.md

@@ -0,0 +1,50 @@
+---
+{
+  "title": "VoiceAssistantControlBar",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/VoiceAssistantControlBar.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# VoiceAssistantControlBar
+
+{% callout type="note" variation="normal" %}
+
+This feature is under active development and may change based on developer feedback and real-world usage.
+
+{% /callout %}
+
+## Import
+
+```typescript
+import { VoiceAssistantControlBar } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom ... >
+  <VoiceAssistantControlBar />
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="controls" type="VoiceAssistantControlBarControls" optional=true %}
+**_(BETA)_** _(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onDeviceError" type="(error: {
+          source: Track.Source;
+          error: Error;
+      }) => void" optional=true %}
+**_(BETA)_** _(Optional)_
+
+{% /parameter %}
+
+{% parameter name="saveUserChoices" type="boolean" optional=true %}
+**_(BETA)_** _(Optional)_ If `true`<!-- -->, the user's device choices will be persisted. This will enables the user to have the same device choices when they rejoin the room.
+
+{% /parameter %}

package/generated-docs/react/connectionqualityindicatoroptions.md

@@ -0,0 +1,22 @@
+---
+{
+  "title": "ConnectionQualityIndicatorOptions interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useConnectionQualityIndicator.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionQualityIndicatorOptions interface
+
+**Signature:**
+
+```typescript
+export interface ConnectionQualityIndicatorOptions
+```
+
+## Properties
+
+| Property                                                                 | Type        | Description  |
+| ------------------------------------------------------------------------ | ----------- | ------------ |
+| [participant?](./react/connectionqualityindicatoroptions.participant.md) | Participant | _(Optional)_ |

package/generated-docs/react/connectionqualityindicatoroptions.participant.md

@@ -0,0 +1,13 @@
+---
+{ "title": "ConnectionQualityIndicatorOptions.participant property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionQualityIndicatorOptions.participant property
+
+**Signature:**
+
+```typescript
+participant?: Participant;
+```

package/generated-docs/react/connectionqualityindicatorprops.md

@@ -0,0 +1,18 @@
+---
+{
+  "title": "ConnectionQualityIndicatorProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ConnectionQualityIndicator.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionQualityIndicatorProps interface
+
+**Signature:**
+
+```typescript
+export interface ConnectionQualityIndicatorProps extends React.HTMLAttributes<HTMLDivElement>, ConnectionQualityIndicatorOptions
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;, [ConnectionQualityIndicatorOptions](./react/connectionqualityindicatoroptions.md)

package/generated-docs/react/connectionstatetoastprops.md

@@ -0,0 +1,24 @@
+---
+{
+  "title": "ConnectionStateToastProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ConnectionStateToast.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionStateToastProps interface
+
+**Signature:**
+
+```typescript
+export interface ConnectionStateToastProps extends React.HTMLAttributes<HTMLDivElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;
+
+## Properties
+
+| Property                                           | Type | Description  |
+| -------------------------------------------------- | ---- | ------------ |
+| [room?](./react/connectionstatetoastprops.room.md) | Room | _(Optional)_ |

package/generated-docs/react/connectionstatetoastprops.room.md

@@ -0,0 +1,13 @@
+---
+{ "title": "ConnectionStateToastProps.room property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionStateToastProps.room property
+
+**Signature:**
+
+```typescript
+room?: Room;
+```