upgrade to next15

.gitattributes

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

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

@@ -1,16 +1,33 @@
-# .github/workflows/sync-to-production.yaml
 name: Sync main to sandbox-production
 
 on:
-  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
 
 jobs:
   sync:
     runs-on: ubuntu-latest
-    permissions:
+
-      contents: write
     steps:
-      - uses: livekit-examples/sandbox-deploy-action@v1
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
-          production_branch: 'sandbox-production'
+          fetch-depth: 0 # Fetch all history so we can force push
-          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - 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

.github/workflows/test.yaml

@@ -1,32 +0,0 @@
-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

README.md

@@ -18,7 +18,7 @@
 
 <br>
 
-LiveKit Meet is an open source video conferencing app built on [LiveKit Components](https://github.com/livekit/components-js), [LiveKit Cloud](https://cloud.livekit.io/), and Next.js. It's been completely redesigned from the ground up using our new components library.
+LiveKit Meet is an open source video conferencing app built on [LiveKit Components](https://github.com/livekit/components-js), [LiveKit Cloud](https://livekit.io/cloud), and Next.js. It's been completely redesigned from the ground up using our new components library.
 
 ![LiveKit Meet screenshot](./.github/assets/livekit-meet.jpg)
 

app/api/connection-details/route.ts

@@ -1,5 +1,4 @@
 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';
@@ -7,7 +6,6 @@ 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) {
@@ -17,10 +15,7 @@ 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');
-    if (!LIVEKIT_URL) {
+    const livekitServerUrl = region ? getLiveKitURL(region) : 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');
@@ -80,6 +75,21 @@ 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, RoomContext, VideoConference } from '@livekit/components-react';
+import { formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react';
 import {
   ExternalE2EEKeyProvider,
   LogLevel,
@@ -11,24 +11,23 @@ import {
   type VideoCodec,
 } from 'livekit-client';
 import { DebugMode } from '@/lib/Debug';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
-import { KeyboardShortcuts } from '@/lib/KeyboardShortcuts';
+import { decodePassphrase } from '@/lib/client-utils';
 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 { worker, e2eePassphrase } = useSetupE2EE();
+
+  const e2eePassphrase =
+    typeof window !== 'undefined' ? decodePassphrase(window.location.hash.substring(1)) : undefined;
   const e2eeEnabled = !!(e2eePassphrase && worker);
-
-  const [e2eeSetupComplete, setE2eeSetupComplete] = useState(false);
-
   const roomOptions = useMemo((): RoomOptions => {
     return {
       publishDefaults: {
@@ -44,55 +43,36 @@ 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 (
-    <div className="lk-room-container">
+    <LiveKitRoom
-      <RoomContext.Provider value={room}>
+      room={room}
-        <KeyboardShortcuts />
+      token={props.token}
-        <VideoConference
+      connectOptions={connectOptions}
-          chatMessageFormatter={formatChatMessageLinks}
+      serverUrl={props.liveKitUrl}
-          SettingsComponent={
+      audio={true}
-            process.env.NEXT_PUBLIC_SHOW_SETTINGS_MENU === 'true' ? SettingsMenu : undefined
+      video={true}
-          }
+    >
-        />
+      <VideoConference
-        <DebugMode logLevel={LogLevel.debug} />
+        chatMessageFormatter={formatChatMessageLinks}
-      </RoomContext.Provider>
+        SettingsComponent={
-    </div>
+          process.env.NEXT_PUBLIC_SHOW_SETTINGS_MENU === 'true' ? SettingsMenu : undefined
+        }
+      />
+      <DebugMode logLevel={LogLevel.debug} />
+    </LiveKitRoom>
   );
 }

app/custom/page.tsx

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

app/layout.tsx

@@ -2,7 +2,6 @@ import '../styles/globals.css';
 import '@livekit/components-styles';
 import '@livekit/components-styles/prefabs';
 import type { Metadata, Viewport } from 'next';
-import { Toaster } from 'react-hot-toast';
 
 export const metadata: Metadata = {
   title: {
@@ -51,10 +50,7 @@ export const viewport: Viewport = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body data-lk-theme="default">
+      <body>{children}</body>
-        <Toaster />
-        {children}
-      </body>
     </html>
   );
 }

app/rooms/[roomName]/PageClientImpl.tsx

@@ -1,17 +1,15 @@
 '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 {
@@ -22,13 +20,9 @@ import {
   Room,
   DeviceUnsupportedError,
   RoomConnectOptions,
-  RoomEvent,
-  TrackPublishDefaults,
-  VideoCaptureOptions,
 } from 'livekit-client';
 import { useRouter } from 'next/navigation';
-import { useSetupE2EE } from '@/lib/useSetupE2EE';
+import React from 'react';
-import { useLowCPUOptimizer } from '@/lib/usePerfomanceOptimiser';
 
 const CONN_DETAILS_ENDPOINT =
   process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? '/api/connection-details';
@@ -97,10 +91,15 @@ function VideoConferenceComponent(props: {
     codec: VideoCodec;
   };
 }) {
-  const keyProvider = new ExternalE2EEKeyProvider();
+  const e2eePassphrase =
-  const { worker, e2eePassphrase } = useSetupE2EE();
+    typeof window !== 'undefined' && decodePassphrase(location.hash.substring(1));
-  const e2eeEnabled = !!(e2eePassphrase && worker);
 
+  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 [e2eeSetupComplete, setE2eeSetupComplete] = React.useState(false);
 
   const roomOptions = React.useMemo((): RoomOptions => {
@@ -108,28 +107,30 @@ 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: videoCaptureDefaults,
+      videoCaptureDefaults: {
-      publishDefaults: publishDefaults,
+        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,
+      },
       audioCaptureDefaults: {
         deviceId: props.userChoices.audioDeviceId ?? undefined,
       },
-      adaptiveStream: true,
+      adaptiveStream: { pixelDensity: 'screen' },
       dynacast: true,
-      e2ee: keyProvider && worker && e2eeEnabled ? { keyProvider, worker } : undefined,
+      e2ee: e2eeEnabled
-      singlePeerConnection: true,
+        ? {
+            keyProvider,
+            worker,
+          }
+        : undefined,
     };
   }, [props.userChoices, props.options.hq, props.options.codec]);
 
@@ -163,41 +164,6 @@ 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) => {
@@ -211,23 +177,27 @@ function VideoConferenceComponent(props: {
     );
   }, []);
 
-  React.useEffect(() => {
-    if (lowPowerMode) {
-      console.warn('Low power mode enabled');
-    }
-  }, [lowPowerMode]);
-
   return (
-    <div className="lk-room-container">
+    <>
-      <RoomContext.Provider value={room}>
+      <LiveKitRoom
-        <KeyboardShortcuts />
+        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}
+      >
         <VideoConference
           chatMessageFormatter={formatChatMessageLinks}
           SettingsComponent={SHOW_SETTINGS_MENU ? SettingsMenu : undefined}
         />
         <DebugMode />
         <RecordingIndicator />
-      </RoomContext.Provider>
+      </LiveKitRoom>
-    </div>
+    </>
   );
 }

app/rooms/[roomName]/page.tsx

@@ -14,8 +14,8 @@ export default async function Page({
     codec?: string;
   }>;
 }) {
-  const _params = await params;
   const _searchParams = await searchParams;
+  const _params = await params;
   const codec =
     typeof _searchParams.codec === 'string' && isVideoCodec(_searchParams.codec)
       ? _searchParams.codec

lib/CameraSettings.tsx

@@ -1,175 +0,0 @@
-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

@@ -1,31 +0,0 @@
-'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

@@ -1,55 +0,0 @@
-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/RecordingIndicator.tsx

@@ -1,6 +1,5 @@
 import { useIsRecording } from '@livekit/components-react';
 import * as React from 'react';
-import toast from 'react-hot-toast';
 
 export function RecordingIndicator() {
   const isRecording = useIsRecording();
@@ -10,16 +9,7 @@ export function RecordingIndicator() {
     if (isRecording !== wasRecording) {
       setWasRecording(isRecording);
       if (isRecording) {
-        toast('This meeting is being recorded', {
+        window.alert('This meeting is being recorded');
-          duration: 3000,
-          icon: '🎥',
-          position: 'top-center',
-          className: 'lk-button',
-          style: {
-            backgroundColor: 'var(--lk-danger3)',
-            color: 'var(--lk-fg)',
-          },
-        });
       }
     }
   }, [isRecording]);
@@ -32,7 +22,7 @@ export function RecordingIndicator() {
         left: '0',
         width: '100%',
         height: '100%',
-        boxShadow: isRecording ? 'var(--lk-danger3) 0px 0px 0px 3px inset' : 'none',
+        boxShadow: isRecording ? 'red 0px 0px 0px 3px inset' : 'none',
         pointerEvents: 'none',
       }}
     ></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,6 +27,7 @@ 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,
     };
   }, []);
@@ -37,6 +38,14 @@ 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);
@@ -74,7 +83,7 @@ export function SettingsMenu(props: SettingsMenuProps) {
   };
 
   return (
-    <div className="settings-menu" style={{ width: '100%', position: 'relative' }} {...props}>
+    <div className="settings-menu" style={{ width: '100%' }} {...props}>
       <div className={styles.tabs}>
         {tabs.map(
           (tab) =>
@@ -99,16 +108,22 @@ export function SettingsMenu(props: SettingsMenuProps) {
             {settings.media && settings.media.camera && (
               <>
                 <h3>Camera</h3>
-                <section>
+                <section className="lk-button-group">
-                  <CameraSettings />
+                  <TrackToggle source={Track.Source.Camera}>Camera</TrackToggle>
+                  <div className="lk-button-group-menu">
+                    <MediaDeviceMenu kind="videoinput" />
+                  </div>
                 </section>
               </>
             )}
             {settings.media && settings.media.microphone && (
               <>
                 <h3>Microphone</h3>
-                <section>
+                <section className="lk-button-group">
-                  <MicrophoneSettings />
+                  <TrackToggle source={Track.Source.Microphone}>Microphone</TrackToggle>
+                  <div className="lk-button-group-menu">
+                    <MediaDeviceMenu kind="audioinput" />
+                  </div>
                 </section>
               </>
             )}
@@ -125,6 +140,21 @@ 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>
@@ -141,14 +171,12 @@ export function SettingsMenu(props: SettingsMenuProps) {
           </>
         )}
       </div>
-      <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+      <button
-        <button
+        className={`lk-button ${styles.settingsCloseButton}`}
-          className={`lk-button`}
+        onClick={() => layoutContext?.widget.dispatch?.({ msg: 'toggle_settings' })}
-          onClick={() => layoutContext?.widget.dispatch?.({ msg: 'toggle_settings' })}
+      >
-        >
+        Close
-          Close
+      </button>
-        </button>
-      </div>
     </div>
   );
 }

lib/client-utils.ts

@@ -19,11 +19,3 @@ 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

@@ -1,35 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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/pip.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+
+type PiPContextType = {
+  isSupported: boolean;
+  pipWindow: Window | null;
+  requestPipWindow: (width: number, height: number) => Promise<void>;
+  closePipWindow: () => void;
+};
+
+const PiPContext = React.createContext<PiPContextType | undefined>(undefined);
+
+export function usePiPWindow(): PiPContextType {
+  const context = React.useContext(PiPContext);
+
+  if (context === undefined) {
+    throw new Error('usePiPWindow must be used within a PiPContext');
+  }
+
+  return context;
+}
+
+type PiPProviderProps = {
+  children: React.ReactNode;
+};
+
+export function PiPProvider({ children }: PiPProviderProps) {
+  // Detect if the feature is available.
+  const isSupported = typeof window !== 'undefined' && 'documentPictureInPicture' in window;
+
+  // Expose pipWindow that is currently active
+  const [pipWindow, setPipWindow] = React.useState<Window | null>(null);
+
+  // Close pipWidnow programmatically
+  const closePipWindow = React.useCallback(() => {
+    if (pipWindow != null) {
+      pipWindow.close();
+      setPipWindow(null);
+    }
+  }, [pipWindow]);
+
+  // Open new pipWindow
+  const requestPipWindow = React.useCallback(
+    async (width: number, height: number) => {
+      // We don't want to allow multiple requests.
+      if (pipWindow != null) {
+        return;
+      }
+
+      // @ts-ignore
+      const pip = await window.documentPictureInPicture.requestWindow({
+        width,
+        height,
+      });
+
+      // Detect when window is closed by user
+      pip.addEventListener('pagehide', () => {
+        setPipWindow(null);
+      });
+
+      // It is important to copy all parent widnow styles. Otherwise, there would be no CSS available at all
+      // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window
+      [...document.styleSheets].forEach((styleSheet) => {
+        try {
+          const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
+          const style = document.createElement('style');
+
+          style.textContent = cssRules;
+          pip.document.head.appendChild(style);
+        } catch (e) {
+          const link = document.createElement('link');
+          if (styleSheet.href == null) {
+            return;
+          }
+
+          link.rel = 'stylesheet';
+          link.type = styleSheet.type;
+          // @ts-ignore
+          link.media = styleSheet.media;
+          link.href = styleSheet.href;
+          pip.document.head.appendChild(link);
+        }
+      });
+
+      setPipWindow(pip);
+    },
+    [pipWindow],
+  );
+
+  const value = React.useMemo(() => {
+    {
+      return {
+        isSupported,
+        pipWindow,
+        requestPipWindow,
+        closePipWindow,
+      };
+    }
+  }, [closePipWindow, isSupported, pipWindow, requestPipWindow]);
+
+  return <PiPContext.Provider value={value}>{children}</PiPContext.Provider>;
+}
+
+import { createPortal } from 'react-dom';
+
+type PiPWindowProps = {
+  pipWindow: Window;
+  children: React.ReactNode;
+};
+
+export default function PiPWindow({ pipWindow, children }: PiPWindowProps) {
+  return createPortal(children, pipWindow.document.body);
+}

lib/usePerfomanceOptimiser.ts

@@ -1,71 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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,9 +2,6 @@
 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({
@@ -12,26 +9,8 @@ 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,39 +6,30 @@
     "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",
-    "@livekit/components-react": "2.9.19",
+    "@livekit/components-react": "2.8.0",
-    "@livekit/components-styles": "1.2.0",
+    "@livekit/components-styles": "1.1.4",
-    "@livekit/krisp-noise-filter": "0.4.1",
+    "@livekit/krisp-noise-filter": "0.2.14",
-    "@livekit/track-processors": "^0.7.0",
+    "livekit-client": "2.8.1",
-    "livekit-client": "2.17.2",
+    "livekit-server-sdk": "2.9.7",
-    "livekit-server-sdk": "2.15.0",
+    "next": "^15",
-    "next": "15.2.8",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-hot-toast": "^2.5.2",
     "tinykeys": "^3.0.0"
   },
   "devDependencies": {
-    "@types/node": "24.10.13",
+    "@types/node": "22.10.7",
-    "@types/react": "18.3.27",
+    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.7",
+    "@types/react-dom": "18.3.5",
-    "eslint": "9.39.1",
+    "eslint": "9.18.0",
-    "eslint-config-next": "15.5.6",
+    "eslint-config-next": "14.2.23",
-    "prettier": "3.7.3",
     "source-map-loader": "^5.0.0",
-    "typescript": "5.9.3",
+    "typescript": "5.7.3"
-    "vitest": "^3.2.4"
   },
   "engines": {
     "node": ">=18"
-  },
+  }
-  "packageManager": "pnpm@10.18.2"
 }

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

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

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

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

styles/SettingsMenu.module.css

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