Add prepareConnection option to LiveKitRoom

.changeset/cool-nails-exist.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": minor
+---
+
+Add prepareConnection option to LiveKitRoom (enabled by default)

packages/react/etc/components-react.api.md

@@ -344,6 +344,7 @@ export interface LiveKitRoomProps extends Omit<React_2.HTMLAttributes<HTMLDivEle
     // (undocumented)
     onMediaDeviceFailure?: (failure?: MediaDeviceFailure) => void;
     options?: RoomOptions;
+    prepareConnection?: boolean;
     room?: Room;
     screen?: ScreenShareCaptureOptions | boolean;
     serverUrl: string | undefined;

packages/react/src/components/LiveKitRoom.tsx

@@ -77,6 +77,11 @@ export interface LiveKitRoomProps extends Omit<React.HTMLAttributes<HTMLDivEleme
 
   simulateParticipants?: number | undefined;
 
+  /**
+   * If set to `true` (default) an initial HTTP request will be sent to the serverURL even before connecting to prewarm the connection
+   */
+  prepareConnection?: boolean;
+
   /**
    * @internal
    */

packages/react/src/hooks/useLiveKitRoom.ts

@@ -10,6 +10,7 @@ const defaultRoomProps: Partial<LiveKitRoomProps> = {
   connect: true,
   audio: false,
   video: false,
+  prepareConnection: true,
 };
 
 /**
@@ -45,6 +46,7 @@ export function useLiveKitRoom<T extends HTMLElement>(
     onMediaDeviceFailure,
     onEncryptionError,
     simulateParticipants,
+    prepareConnection,
     ...rest
   } = { ...defaultRoomProps, ...props };
   if (options && passedRoom) {
@@ -59,6 +61,13 @@ export function useLiveKitRoom<T extends HTMLElement>(
     setRoom(passedRoom ?? new Room(options));
   }, [passedRoom]);
 
+  const prewarm = React.useMemo(() => {
+    if (room && serverUrl && prepareConnection && token) {
+      return room.prepareConnection(serverUrl, token);
+    }
+    return new Promise<void>((resolve) => resolve(undefined));
+  }, [serverUrl, prepareConnection, token, room]);
+
   const htmlProps = React.useMemo(() => {
     const { className } = setupLiveKitRoom();
     return mergeProps(rest, { className }) as HTMLAttributes<T>;
@@ -126,10 +135,12 @@ export function useLiveKitRoom<T extends HTMLElement>(
     }
     if (connect) {
       log.debug('connecting');
-      room.connect(serverUrl, token, connectOptions).catch((e) => {
-        log.warn(e);
-        onError?.(e as Error);
-      });
+      prewarm.then(() =>
+        room.connect(serverUrl, token, connectOptions).catch((e) => {
+          log.warn(e);
+          onError?.(e as Error);
+        }),
+      );
     } else {
       log.debug('disconnecting because connect is false');
       room.disconnect();