Merge branch 'main' into lukas/update-deps

.gitattributes

@@ -0,0 +1 @@
+public/background-images/*.jpg filter=lfs diff=lfs merge=lfs -text

.github/workflows/sync-to-production.yaml

@@ -1,33 +1,16 @@
+# .github/workflows/sync-to-production.yaml
 name: Sync main to sandbox-production
 
 on:
-  push:
-    branches:
-      - main
-
-permissions:
-  contents: write
-  pull-requests: write
+  workflow_dispatch:
 
 jobs:
   sync:
     runs-on: ubuntu-latest
-
+    permissions:
+      contents: write
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
+      - uses: livekit-examples/sandbox-deploy-action@v1
         with:
-          fetch-depth: 0 # Fetch all history so we can force push
-
-      - name: Set up Git
-        run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@livekit.io'
-
-      - name: Sync to sandbox-production
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          git checkout sandbox-production || git checkout -b sandbox-production
-          git merge --strategy-option theirs main
-          git push origin sandbox-production
+          production_branch: 'sandbox-production'
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yaml

@@ -0,0 +1,32 @@
+name: Test
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v6
+    - uses: pnpm/action-setup@v4
+    - name: Use Node.js 22
+      uses: actions/setup-node@v4
+      with:
+        node-version: 24
+        cache: 'pnpm'
+
+    - name: Install dependencies
+      run: pnpm install
+
+    - name: ESLint
+      run: pnpm lint
+    
+    - name: Prettier
+      run: pnpm format:check
+
+    - name: Run Tests
+      run: pnpm test

app/api/connection-details/route.ts

@@ -1,4 +1,5 @@
 import { randomString } from '@/lib/client-utils';
+import { getLiveKitURL } from '@/lib/getLiveKitURL';
 import { ConnectionDetails } from '@/lib/types';
 import { AccessToken, AccessTokenOptions, VideoGrant } from 'livekit-server-sdk';
 import { NextRequest, NextResponse } from 'next/server';
@@ -6,6 +7,7 @@ import { NextRequest, NextResponse } from 'next/server';
 const API_KEY = process.env.LIVEKIT_API_KEY;
 const API_SECRET = process.env.LIVEKIT_API_SECRET;
 const LIVEKIT_URL = process.env.LIVEKIT_URL;
+
 const COOKIE_KEY = 'random-participant-postfix';
 
 export async function GET(request: NextRequest) {
@@ -15,7 +17,10 @@ export async function GET(request: NextRequest) {
     const participantName = request.nextUrl.searchParams.get('participantName');
     const metadata = request.nextUrl.searchParams.get('metadata') ?? '';
     const region = request.nextUrl.searchParams.get('region');
-    const livekitServerUrl = region ? getLiveKitURL(region) : LIVEKIT_URL;
+    if (!LIVEKIT_URL) {
+      throw new Error('LIVEKIT_URL is not defined');
+    }
+    const livekitServerUrl = region ? getLiveKitURL(LIVEKIT_URL, region) : LIVEKIT_URL;
     let randomParticipantPostfix = request.cookies.get(COOKIE_KEY)?.value;
     if (livekitServerUrl === undefined) {
       throw new Error('Invalid region');
@@ -75,21 +80,6 @@ function createParticipantToken(userInfo: AccessTokenOptions, roomName: string)
   return at.toJwt();
 }
 
-/**
- * Get the LiveKit server URL for the given region.
- */
-function getLiveKitURL(region: string | null): string {
-  let targetKey = 'LIVEKIT_URL';
-  if (region) {
-    targetKey = `LIVEKIT_URL_${region}`.toUpperCase();
-  }
-  const url = process.env[targetKey];
-  if (!url) {
-    throw new Error(`${targetKey} is not defined`);
-  }
-  return url;
-}
-
 function getCookieExpirationTime(): string {
   var now = new Date();
   var time = now.getTime();

app/custom/VideoConferenceClientImpl.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react';
+import { formatChatMessageLinks, RoomContext, VideoConference } from '@livekit/components-react';
 import {
   ExternalE2EEKeyProvider,
   LogLevel,
@@ -11,23 +11,24 @@ import {
   type VideoCodec,
 } from 'livekit-client';
 import { DebugMode } from '@/lib/Debug';
-import { useMemo } from 'react';
-import { decodePassphrase } from '@/lib/client-utils';
+import { useEffect, useMemo, useState } from 'react';
+import { KeyboardShortcuts } from '@/lib/KeyboardShortcuts';
 import { SettingsMenu } from '@/lib/SettingsMenu';
+import { useSetupE2EE } from '@/lib/useSetupE2EE';
+import { useLowCPUOptimizer } from '@/lib/usePerfomanceOptimiser';
 
 export function VideoConferenceClientImpl(props: {
   liveKitUrl: string;
   token: string;
   codec: VideoCodec | undefined;
+  singlePeerConnection: boolean | undefined;
 }) {
-  const worker =
-    typeof window !== 'undefined' &&
-    new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
   const keyProvider = new ExternalE2EEKeyProvider();
-
-  const e2eePassphrase =
-    typeof window !== 'undefined' ? decodePassphrase(window.location.hash.substring(1)) : undefined;
+  const { worker, e2eePassphrase } = useSetupE2EE();
   const e2eeEnabled = !!(e2eePassphrase && worker);
+
+  const [e2eeSetupComplete, setE2eeSetupComplete] = useState(false);
+
   const roomOptions = useMemo((): RoomOptions => {
     return {
       publishDefaults: {
@@ -43,36 +44,55 @@ export function VideoConferenceClientImpl(props: {
             worker,
           }
         : undefined,
+      singlePeerConnection: props.singlePeerConnection,
     };
-  }, []);
+  }, [e2eeEnabled, props.codec, keyProvider, worker]);
+
+  const room = useMemo(() => new Room(roomOptions), [roomOptions]);
 
-  const room = useMemo(() => new Room(roomOptions), []);
-  if (e2eeEnabled) {
-    keyProvider.setKey(e2eePassphrase);
-    room.setE2EEEnabled(true);
-  }
   const connectOptions = useMemo((): RoomConnectOptions => {
     return {
       autoSubscribe: true,
     };
   }, []);
 
+  useEffect(() => {
+    if (e2eeEnabled) {
+      keyProvider.setKey(e2eePassphrase).then(() => {
+        room.setE2EEEnabled(true).then(() => {
+          setE2eeSetupComplete(true);
+        });
+      });
+    } else {
+      setE2eeSetupComplete(true);
+    }
+  }, [e2eeEnabled, e2eePassphrase, keyProvider, room, setE2eeSetupComplete]);
+
+  useEffect(() => {
+    if (e2eeSetupComplete) {
+      room.connect(props.liveKitUrl, props.token, connectOptions).catch((error) => {
+        console.error(error);
+      });
+      room.localParticipant.enableCameraAndMicrophone().catch((error) => {
+        console.error(error);
+      });
+    }
+  }, [room, props.liveKitUrl, props.token, connectOptions, e2eeSetupComplete]);
+
+  useLowCPUOptimizer(room);
+
   return (
-    <LiveKitRoom
-      room={room}
-      token={props.token}
-      connectOptions={connectOptions}
-      serverUrl={props.liveKitUrl}
-      audio={true}
-      video={true}
-    >
-      <VideoConference
-        chatMessageFormatter={formatChatMessageLinks}
-        SettingsComponent={
-          process.env.NEXT_PUBLIC_SHOW_SETTINGS_MENU === 'true' ? SettingsMenu : undefined
-        }
-      />
-      <DebugMode logLevel={LogLevel.debug} />
-    </LiveKitRoom>
+    <div className="lk-room-container">
+      <RoomContext.Provider value={room}>
+        <KeyboardShortcuts />
+        <VideoConference
+          chatMessageFormatter={formatChatMessageLinks}
+          SettingsComponent={
+            process.env.NEXT_PUBLIC_SHOW_SETTINGS_MENU === 'true' ? SettingsMenu : undefined
+          }
+        />
+        <DebugMode logLevel={LogLevel.debug} />
+      </RoomContext.Provider>
+    </div>
   );
 }

app/custom/page.tsx

@@ -7,9 +7,10 @@ export default async function CustomRoomConnection(props: {
     liveKitUrl?: string;
     token?: string;
     codec?: string;
+    singlePC?: string;
   }>;
 }) {
-  const { liveKitUrl, token, codec } = await props.searchParams;
+  const { liveKitUrl, token, codec, singlePC } = await props.searchParams;
   if (typeof liveKitUrl !== 'string') {
     return <h2>Missing LiveKit URL</h2>;
   }
@@ -22,7 +23,12 @@ export default async function CustomRoomConnection(props: {
 
   return (
     <main data-lk-theme="default" style={{ height: '100%' }}>
-      <VideoConferenceClientImpl liveKitUrl={liveKitUrl} token={token} codec={codec} />
+      <VideoConferenceClientImpl
+        liveKitUrl={liveKitUrl}
+        token={token}
+        codec={codec}
+        singlePeerConnection={singlePC === 'true'}
+      />
     </main>
   );
 }

app/rooms/[roomName]/PageClientImpl.tsx

@@ -1,15 +1,17 @@
 'use client';
 
+import React from 'react';
 import { decodePassphrase } from '@/lib/client-utils';
 import { DebugMode } from '@/lib/Debug';
+import { KeyboardShortcuts } from '@/lib/KeyboardShortcuts';
 import { RecordingIndicator } from '@/lib/RecordingIndicator';
 import { SettingsMenu } from '@/lib/SettingsMenu';
 import { ConnectionDetails } from '@/lib/types';
 import {
   formatChatMessageLinks,
-  LiveKitRoom,
   LocalUserChoices,
   PreJoin,
+  RoomContext,
   VideoConference,
 } from '@livekit/components-react';
 import {
@@ -20,9 +22,13 @@ import {
   Room,
   DeviceUnsupportedError,
   RoomConnectOptions,
+  RoomEvent,
+  TrackPublishDefaults,
+  VideoCaptureOptions,
 } from 'livekit-client';
 import { useRouter } from 'next/navigation';
-import React from 'react';
+import { useSetupE2EE } from '@/lib/useSetupE2EE';
+import { useLowCPUOptimizer } from '@/lib/usePerfomanceOptimiser';
 
 const CONN_DETAILS_ENDPOINT =
   process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? '/api/connection-details';
@@ -91,15 +97,10 @@ function VideoConferenceComponent(props: {
     codec: VideoCodec;
   };
 }) {
-  const e2eePassphrase =
-    typeof window !== 'undefined' && decodePassphrase(location.hash.substring(1));
-
-  const worker =
-    typeof window !== 'undefined' &&
-    e2eePassphrase &&
-    new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
-  const e2eeEnabled = !!(e2eePassphrase && worker);
   const keyProvider = new ExternalE2EEKeyProvider();
+  const { worker, e2eePassphrase } = useSetupE2EE();
+  const e2eeEnabled = !!(e2eePassphrase && worker);
+
   const [e2eeSetupComplete, setE2eeSetupComplete] = React.useState(false);
 
   const roomOptions = React.useMemo((): RoomOptions => {
@@ -107,30 +108,28 @@ function VideoConferenceComponent(props: {
     if (e2eeEnabled && (videoCodec === 'av1' || videoCodec === 'vp9')) {
       videoCodec = undefined;
     }
+    const videoCaptureDefaults: VideoCaptureOptions = {
+      deviceId: props.userChoices.videoDeviceId ?? undefined,
+      resolution: props.options.hq ? VideoPresets.h2160 : VideoPresets.h720,
+    };
+    const publishDefaults: TrackPublishDefaults = {
+      dtx: false,
+      videoSimulcastLayers: props.options.hq
+        ? [VideoPresets.h1080, VideoPresets.h720]
+        : [VideoPresets.h540, VideoPresets.h216],
+      red: !e2eeEnabled,
+      videoCodec,
+    };
     return {
-      videoCaptureDefaults: {
-        deviceId: props.userChoices.videoDeviceId ?? undefined,
-        resolution: props.options.hq ? VideoPresets.h2160 : VideoPresets.h720,
-      },
-      publishDefaults: {
-        dtx: false,
-        videoSimulcastLayers: props.options.hq
-          ? [VideoPresets.h1080, VideoPresets.h720]
-          : [VideoPresets.h540, VideoPresets.h216],
-        red: !e2eeEnabled,
-        videoCodec,
-      },
+      videoCaptureDefaults: videoCaptureDefaults,
+      publishDefaults: publishDefaults,
       audioCaptureDefaults: {
         deviceId: props.userChoices.audioDeviceId ?? undefined,
       },
-      adaptiveStream: { pixelDensity: 'screen' },
+      adaptiveStream: true,
       dynacast: true,
-      e2ee: e2eeEnabled
-        ? {
-            keyProvider,
-            worker,
-          }
-        : undefined,
+      e2ee: keyProvider && worker && e2eeEnabled ? { keyProvider, worker } : undefined,
+      singlePeerConnection: true,
     };
   }, [props.userChoices, props.options.hq, props.options.codec]);
 
@@ -164,6 +163,41 @@ function VideoConferenceComponent(props: {
     };
   }, []);
 
+  React.useEffect(() => {
+    room.on(RoomEvent.Disconnected, handleOnLeave);
+    room.on(RoomEvent.EncryptionError, handleEncryptionError);
+    room.on(RoomEvent.MediaDevicesError, handleError);
+
+    if (e2eeSetupComplete) {
+      room
+        .connect(
+          props.connectionDetails.serverUrl,
+          props.connectionDetails.participantToken,
+          connectOptions,
+        )
+        .catch((error) => {
+          handleError(error);
+        });
+      if (props.userChoices.videoEnabled) {
+        room.localParticipant.setCameraEnabled(true).catch((error) => {
+          handleError(error);
+        });
+      }
+      if (props.userChoices.audioEnabled) {
+        room.localParticipant.setMicrophoneEnabled(true).catch((error) => {
+          handleError(error);
+        });
+      }
+    }
+    return () => {
+      room.off(RoomEvent.Disconnected, handleOnLeave);
+      room.off(RoomEvent.EncryptionError, handleEncryptionError);
+      room.off(RoomEvent.MediaDevicesError, handleError);
+    };
+  }, [e2eeSetupComplete, room, props.connectionDetails, props.userChoices]);
+
+  const lowPowerMode = useLowCPUOptimizer(room);
+
   const router = useRouter();
   const handleOnLeave = React.useCallback(() => router.push('/'), [router]);
   const handleError = React.useCallback((error: Error) => {
@@ -177,27 +211,23 @@ function VideoConferenceComponent(props: {
     );
   }, []);
 
+  React.useEffect(() => {
+    if (lowPowerMode) {
+      console.warn('Low power mode enabled');
+    }
+  }, [lowPowerMode]);
+
   return (
-    <>
-      <LiveKitRoom
-        connect={e2eeSetupComplete}
-        room={room}
-        token={props.connectionDetails.participantToken}
-        serverUrl={props.connectionDetails.serverUrl}
-        connectOptions={connectOptions}
-        video={props.userChoices.videoEnabled}
-        audio={props.userChoices.audioEnabled}
-        onDisconnected={handleOnLeave}
-        onEncryptionError={handleEncryptionError}
-        onError={handleError}
-      >
+    <div className="lk-room-container">
+      <RoomContext.Provider value={room}>
+        <KeyboardShortcuts />
         <VideoConference
           chatMessageFormatter={formatChatMessageLinks}
           SettingsComponent={SHOW_SETTINGS_MENU ? SettingsMenu : undefined}
         />
         <DebugMode />
         <RecordingIndicator />
-      </LiveKitRoom>
-    </>
+      </RoomContext.Provider>
+    </div>
   );
 }

lib/CameraSettings.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import {
+  MediaDeviceMenu,
+  TrackReference,
+  TrackToggle,
+  useLocalParticipant,
+  VideoTrack,
+} from '@livekit/components-react';
+import { BackgroundBlur, VirtualBackground } from '@livekit/track-processors';
+import { isLocalTrack, LocalTrackPublication, Track } from 'livekit-client';
+import Desk from '../public/background-images/samantha-gades-BlIhVfXbi9s-unsplash.jpg';
+import Nature from '../public/background-images/ali-kazal-tbw_KQE3Cbg-unsplash.jpg';
+
+// Background image paths
+const BACKGROUND_IMAGES = [
+  { name: 'Desk', path: Desk },
+  { name: 'Nature', path: Nature },
+];
+
+// Background options
+type BackgroundType = 'none' | 'blur' | 'image';
+
+export function CameraSettings() {
+  const { cameraTrack, localParticipant } = useLocalParticipant();
+  const [backgroundType, setBackgroundType] = React.useState<BackgroundType>(
+    (cameraTrack as LocalTrackPublication)?.track?.getProcessor()?.name === 'background-blur'
+      ? 'blur'
+      : (cameraTrack as LocalTrackPublication)?.track?.getProcessor()?.name === 'virtual-background'
+        ? 'image'
+        : 'none',
+  );
+
+  const [virtualBackgroundImagePath, setVirtualBackgroundImagePath] = React.useState<string | null>(
+    null,
+  );
+
+  const camTrackRef: TrackReference | undefined = React.useMemo(() => {
+    return cameraTrack
+      ? { participant: localParticipant, publication: cameraTrack, source: Track.Source.Camera }
+      : undefined;
+  }, [localParticipant, cameraTrack]);
+
+  const selectBackground = (type: BackgroundType, imagePath?: string) => {
+    setBackgroundType(type);
+    if (type === 'image' && imagePath) {
+      setVirtualBackgroundImagePath(imagePath);
+    } else if (type !== 'image') {
+      setVirtualBackgroundImagePath(null);
+    }
+  };
+
+  React.useEffect(() => {
+    if (isLocalTrack(cameraTrack?.track)) {
+      if (backgroundType === 'blur') {
+        cameraTrack.track?.setProcessor(BackgroundBlur());
+      } else if (backgroundType === 'image' && virtualBackgroundImagePath) {
+        cameraTrack.track?.setProcessor(VirtualBackground(virtualBackgroundImagePath));
+      } else {
+        cameraTrack.track?.stopProcessor();
+      }
+    }
+  }, [cameraTrack, backgroundType, virtualBackgroundImagePath]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      {camTrackRef && (
+        <VideoTrack
+          style={{
+            maxHeight: '280px',
+            objectFit: 'contain',
+            objectPosition: 'right',
+            transform: 'scaleX(-1)',
+          }}
+          trackRef={camTrackRef}
+        />
+      )}
+
+      <section className="lk-button-group">
+        <TrackToggle source={Track.Source.Camera}>Camera</TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu kind="videoinput" />
+        </div>
+      </section>
+
+      <div style={{ marginTop: '10px' }}>
+        <div style={{ marginBottom: '8px' }}>Background Effects</div>
+        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+          <button
+            onClick={() => selectBackground('none')}
+            className="lk-button"
+            aria-pressed={backgroundType === 'none'}
+            style={{
+              border: backgroundType === 'none' ? '2px solid #0090ff' : '1px solid #d1d1d1',
+              minWidth: '80px',
+            }}
+          >
+            None
+          </button>
+
+          <button
+            onClick={() => selectBackground('blur')}
+            className="lk-button"
+            aria-pressed={backgroundType === 'blur'}
+            style={{
+              border: backgroundType === 'blur' ? '2px solid #0090ff' : '1px solid #d1d1d1',
+              minWidth: '80px',
+              backgroundColor: '#f0f0f0',
+              position: 'relative',
+              overflow: 'hidden',
+              height: '60px',
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: '#e0e0e0',
+                filter: 'blur(8px)',
+                zIndex: 0,
+              }}
+            />
+            <span
+              style={{
+                position: 'relative',
+                zIndex: 1,
+                backgroundColor: 'rgba(0,0,0,0.6)',
+                padding: '2px 5px',
+                borderRadius: '4px',
+                fontSize: '12px',
+              }}
+            >
+              Blur
+            </span>
+          </button>
+
+          {BACKGROUND_IMAGES.map((image) => (
+            <button
+              key={image.path.src}
+              onClick={() => selectBackground('image', image.path.src)}
+              className="lk-button"
+              aria-pressed={
+                backgroundType === 'image' && virtualBackgroundImagePath === image.path.src
+              }
+              style={{
+                backgroundImage: `url(${image.path.src})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                width: '80px',
+                height: '60px',
+                border:
+                  backgroundType === 'image' && virtualBackgroundImagePath === image.path.src
+                    ? '2px solid #0090ff'
+                    : '1px solid #d1d1d1',
+              }}
+            >
+              <span
+                style={{
+                  backgroundColor: 'rgba(0,0,0,0.6)',
+                  padding: '2px 5px',
+                  borderRadius: '4px',
+                  fontSize: '12px',
+                }}
+              >
+                {image.name}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

lib/KeyboardShortcuts.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import { Track } from 'livekit-client';
+import { useTrackToggle } from '@livekit/components-react';
+
+export function KeyboardShortcuts() {
+  const { toggle: toggleMic } = useTrackToggle({ source: Track.Source.Microphone });
+  const { toggle: toggleCamera } = useTrackToggle({ source: Track.Source.Camera });
+
+  React.useEffect(() => {
+    function handleShortcut(event: KeyboardEvent) {
+      // Toggle microphone: Cmd/Ctrl-Shift-A
+      if (toggleMic && event.key === 'A' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        toggleMic();
+      }
+
+      // Toggle camera: Cmd/Ctrl-Shift-V
+      if (event.key === 'V' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        toggleCamera();
+      }
+    }
+
+    window.addEventListener('keydown', handleShortcut);
+    return () => window.removeEventListener('keydown', handleShortcut);
+  }, [toggleMic, toggleCamera]);
+
+  return null;
+}

lib/MicrophoneSettings.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useKrispNoiseFilter } from '@livekit/components-react/krisp';
+import { TrackToggle } from '@livekit/components-react';
+import { MediaDeviceMenu } from '@livekit/components-react';
+import { Track } from 'livekit-client';
+import { isLowPowerDevice } from './client-utils';
+
+export function MicrophoneSettings() {
+  const { isNoiseFilterEnabled, setNoiseFilterEnabled, isNoiseFilterPending } = useKrispNoiseFilter(
+    {
+      filterOptions: {
+        bufferOverflowMs: 100,
+        bufferDropMs: 200,
+        quality: isLowPowerDevice() ? 'low' : 'medium',
+        onBufferDrop: () => {
+          console.warn(
+            'krisp buffer dropped, noise filter versions >= 0.3.2 will automatically disable the filter',
+          );
+        },
+      },
+    },
+  );
+
+  React.useEffect(() => {
+    // enable Krisp by default on non-low power devices
+    setNoiseFilterEnabled(!isLowPowerDevice());
+  }, []);
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '10px',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <section className="lk-button-group">
+        <TrackToggle source={Track.Source.Microphone}>Microphone</TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu kind="audioinput" />
+        </div>
+      </section>
+
+      <button
+        className="lk-button"
+        onClick={() => setNoiseFilterEnabled(!isNoiseFilterEnabled)}
+        disabled={isNoiseFilterPending}
+        aria-pressed={isNoiseFilterEnabled}
+      >
+        {isNoiseFilterEnabled ? 'Disable' : 'Enable'} Enhanced Noise Cancellation
+      </button>
+    </div>
+  );
+}

lib/SettingsMenu.tsx

@@ -8,9 +8,9 @@ import {
   useRoomContext,
   useIsRecording,
 } from '@livekit/components-react';
-import { useKrispNoiseFilter } from '@livekit/components-react/krisp';
 import styles from '../styles/SettingsMenu.module.css';
-
+import { CameraSettings } from './CameraSettings';
+import { MicrophoneSettings } from './MicrophoneSettings';
 /**
  * @alpha
  */
@@ -27,7 +27,6 @@ export function SettingsMenu(props: SettingsMenuProps) {
   const settings = React.useMemo(() => {
     return {
       media: { camera: true, microphone: true, label: 'Media Devices', speaker: true },
-      effects: { label: 'Effects' },
       recording: recordingEndpoint ? { label: 'Recording' } : undefined,
     };
   }, []);
@@ -38,14 +37,6 @@ export function SettingsMenu(props: SettingsMenuProps) {
   );
   const [activeTab, setActiveTab] = React.useState(tabs[0]);
 
-  const { isNoiseFilterEnabled, setNoiseFilterEnabled, isNoiseFilterPending } =
-    useKrispNoiseFilter();
-
-  React.useEffect(() => {
-    // enable Krisp by default
-    setNoiseFilterEnabled(true);
-  }, []);
-
   const isRecording = useIsRecording();
   const [initialRecStatus, setInitialRecStatus] = React.useState(isRecording);
   const [processingRecRequest, setProcessingRecRequest] = React.useState(false);
@@ -83,7 +74,7 @@ export function SettingsMenu(props: SettingsMenuProps) {
   };
 
   return (
-    <div className="settings-menu" style={{ width: '100%' }} {...props}>
+    <div className="settings-menu" style={{ width: '100%', position: 'relative' }} {...props}>
       <div className={styles.tabs}>
         {tabs.map(
           (tab) =>
@@ -108,22 +99,16 @@ export function SettingsMenu(props: SettingsMenuProps) {
             {settings.media && settings.media.camera && (
               <>
                 <h3>Camera</h3>
-                <section className="lk-button-group">
-                  <TrackToggle source={Track.Source.Camera}>Camera</TrackToggle>
-                  <div className="lk-button-group-menu">
-                    <MediaDeviceMenu kind="videoinput" />
-                  </div>
+                <section>
+                  <CameraSettings />
                 </section>
               </>
             )}
             {settings.media && settings.media.microphone && (
               <>
                 <h3>Microphone</h3>
-                <section className="lk-button-group">
-                  <TrackToggle source={Track.Source.Microphone}>Microphone</TrackToggle>
-                  <div className="lk-button-group-menu">
-                    <MediaDeviceMenu kind="audioinput" />
-                  </div>
+                <section>
+                  <MicrophoneSettings />
                 </section>
               </>
             )}
@@ -140,21 +125,6 @@ export function SettingsMenu(props: SettingsMenuProps) {
             )}
           </>
         )}
-        {activeTab === 'effects' && (
-          <>
-            <h3>Audio</h3>
-            <section>
-              <label htmlFor="noise-filter"> Enhanced Noise Cancellation</label>
-              <input
-                type="checkbox"
-                id="noise-filter"
-                onChange={(ev) => setNoiseFilterEnabled(ev.target.checked)}
-                checked={isNoiseFilterEnabled}
-                disabled={isNoiseFilterPending}
-              ></input>
-            </section>
-          </>
-        )}
         {activeTab === 'recording' && (
           <>
             <h3>Record Meeting</h3>
@@ -171,12 +141,14 @@ export function SettingsMenu(props: SettingsMenuProps) {
           </>
         )}
       </div>
-      <button
-        className={`lk-button ${styles.settingsCloseButton}`}
-        onClick={() => layoutContext?.widget.dispatch?.({ msg: 'toggle_settings' })}
-      >
-        Close
-      </button>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+        <button
+          className={`lk-button`}
+          onClick={() => layoutContext?.widget.dispatch?.({ msg: 'toggle_settings' })}
+        >
+          Close
+        </button>
+      </div>
     </div>
   );
 }

lib/client-utils.ts

@@ -19,3 +19,11 @@ export function randomString(length: number): string {
   }
   return result;
 }
+
+export function isLowPowerDevice() {
+  return navigator.hardwareConcurrency < 6;
+}
+
+export function isMeetStaging() {
+  return new URL(location.origin).host === 'meet.staging.livekit.io';
+}

lib/getLiveKitURL.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { getLiveKitURL } from './getLiveKitURL';
+
+describe('getLiveKitURL', () => {
+  it('returns the original URL if no region is provided', () => {
+    const url = 'https://myproject.livekit.cloud';
+    expect(getLiveKitURL(url, null)).toBe(url + '/');
+  });
+
+  it('inserts the region into livekit.cloud URLs', () => {
+    const url = 'https://myproject.livekit.cloud';
+    const region = 'eu';
+    expect(getLiveKitURL(url, region)).toBe('https://myproject.eu.production.livekit.cloud/');
+  });
+
+  it('inserts the region into livekit.cloud URLs and preserves the staging environment', () => {
+    const url = 'https://myproject.staging.livekit.cloud';
+    const region = 'eu';
+    expect(getLiveKitURL(url, region)).toBe('https://myproject.eu.staging.livekit.cloud/');
+  });
+
+  it('returns the original URL for non-livekit.cloud hosts, even with region', () => {
+    const url = 'https://example.com';
+    const region = 'us';
+    expect(getLiveKitURL(url, region)).toBe(url + '/');
+  });
+
+  it('handles URLs with paths and query params', () => {
+    const url = 'https://myproject.livekit.cloud/room?foo=bar';
+    const region = 'ap';
+    expect(getLiveKitURL(url, region)).toBe(
+      'https://myproject.ap.production.livekit.cloud/room?foo=bar',
+    );
+  });
+});

lib/getLiveKitURL.ts

@@ -0,0 +1,12 @@
+export function getLiveKitURL(projectUrl: string, region: string | null): string {
+  const url = new URL(projectUrl);
+  if (region && url.hostname.includes('livekit.cloud')) {
+    let [projectId, ...hostParts] = url.hostname.split('.');
+    if (hostParts[0] !== 'staging') {
+      hostParts = ['production', ...hostParts];
+    }
+    const regionURL = [projectId, region, ...hostParts].join('.');
+    url.hostname = regionURL;
+  }
+  return url.toString();
+}

lib/usePerfomanceOptimiser.ts

@@ -0,0 +1,71 @@
+import {
+  Room,
+  ParticipantEvent,
+  RoomEvent,
+  RemoteTrack,
+  RemoteTrackPublication,
+  VideoQuality,
+  LocalVideoTrack,
+  isVideoTrack,
+} from 'livekit-client';
+import * as React from 'react';
+
+export type LowCPUOptimizerOptions = {
+  reducePublisherVideoQuality: boolean;
+  reduceSubscriberVideoQuality: boolean;
+  disableVideoProcessing: boolean;
+};
+
+const defaultOptions: LowCPUOptimizerOptions = {
+  reducePublisherVideoQuality: true,
+  reduceSubscriberVideoQuality: true,
+  disableVideoProcessing: false,
+} as const;
+
+/**
+ * This hook ensures that on devices with low CPU, the performance is optimised when needed.
+ * This is done by primarily reducing the video quality to low when the CPU is constrained.
+ */
+export function useLowCPUOptimizer(room: Room, options: Partial<LowCPUOptimizerOptions> = {}) {
+  const [lowPowerMode, setLowPowerMode] = React.useState(false);
+  const opts = React.useMemo(() => ({ ...defaultOptions, ...options }), [options]);
+  React.useEffect(() => {
+    const handleCpuConstrained = async (track: LocalVideoTrack) => {
+      setLowPowerMode(true);
+      console.warn('Local track CPU constrained', track);
+      if (opts.reducePublisherVideoQuality) {
+        track.prioritizePerformance();
+      }
+      if (opts.disableVideoProcessing && isVideoTrack(track)) {
+        track.stopProcessor();
+      }
+      if (opts.reduceSubscriberVideoQuality) {
+        room.remoteParticipants.forEach((participant) => {
+          participant.videoTrackPublications.forEach((publication) => {
+            publication.setVideoQuality(VideoQuality.LOW);
+          });
+        });
+      }
+    };
+
+    room.localParticipant.on(ParticipantEvent.LocalTrackCpuConstrained, handleCpuConstrained);
+    return () => {
+      room.localParticipant.off(ParticipantEvent.LocalTrackCpuConstrained, handleCpuConstrained);
+    };
+  }, [room, opts.reducePublisherVideoQuality, opts.reduceSubscriberVideoQuality]);
+
+  React.useEffect(() => {
+    const lowerQuality = (_: RemoteTrack, publication: RemoteTrackPublication) => {
+      publication.setVideoQuality(VideoQuality.LOW);
+    };
+    if (lowPowerMode && opts.reduceSubscriberVideoQuality) {
+      room.on(RoomEvent.TrackSubscribed, lowerQuality);
+    }
+
+    return () => {
+      room.off(RoomEvent.TrackSubscribed, lowerQuality);
+    };
+  }, [lowPowerMode, room, opts.reduceSubscriberVideoQuality]);
+
+  return lowPowerMode;
+}

lib/useSetupE2EE.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ExternalE2EEKeyProvider } from 'livekit-client';
+import { decodePassphrase } from './client-utils';
+
+export function useSetupE2EE() {
+  const e2eePassphrase =
+    typeof window !== 'undefined' ? decodePassphrase(location.hash.substring(1)) : undefined;
+
+  const worker: Worker | undefined =
+    typeof window !== 'undefined' && e2eePassphrase
+      ? new Worker(new URL('livekit-client/e2ee-worker', import.meta.url))
+      : undefined;
+
+  return { worker, e2eePassphrase };
+}

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: false,
   productionBrowserSourceMaps: true,
+  images: {
+    formats: ['image/webp'],
+  },
   webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
     // Important: return the modified config
     config.module.rules.push({
@@ -9,8 +12,26 @@ const nextConfig = {
       enforce: 'pre',
       use: ['source-map-loader'],
     });
+
     return config;
   },
+  headers: async () => {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Cross-Origin-Opener-Policy',
+            value: 'same-origin',
+          },
+          {
+            key: 'Cross-Origin-Embedder-Policy',
+            value: 'credentialless',
+          },
+        ],
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -6,7 +6,11 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "test": "vitest run",
+    "format:check": "prettier --check \"**/*.{ts,tsx,md,json}\"",
+    "format:write": "prettier --write \"**/*.{ts,tsx,md,json}\""
   },
   "dependencies": {
     "@datadog/browser-logs": "^5.23.3",
@@ -23,16 +27,18 @@
     "tinykeys": "^3.0.0"
   },
   "devDependencies": {
-    "@types/node": "22.14.0",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
-    "eslint": "9.24.0",
-    "eslint-config-next": "15.2.4",
+    "@types/node": "24.10.13",
+    "@types/react": "18.3.27",
+    "@types/react-dom": "18.3.7",
+    "eslint": "9.39.1",
+    "eslint-config-next": "15.5.6",
+    "prettier": "3.7.3",
     "source-map-loader": "^5.0.0",
-    "typescript": "5.8.3"
+    "typescript": "5.9.3",
+    "vitest": "^3.2.4"
   },
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "pnpm@9.15.9"
+  "packageManager": "pnpm@10.18.2"
 }

public/background-images/ali-kazal-tbw_KQE3Cbg-unsplash.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4a3c9eb8da1ef3ddf2439428b49c11abd9a765e056600bd4f1d89a5dfc82778a
+size 52339

public/background-images/samantha-gades-BlIhVfXbi9s-unsplash.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8bc017736e04acb0188f69cec0aafb88bd6891bfc4a6ff1530665e8dc210dbdf
+size 1273171

styles/SettingsMenu.module.css

@@ -1,9 +1,3 @@
-.settingsCloseButton {
-  position: absolute;
-  right: var(--lk-grid-gap);
-  bottom: var(--lk-grid-gap);
-}
-
 .tabs {
   position: relative;
   display: flex;