LiveKit Meet Documentation

The project uses the following core technologies:

• Framework: Next.js (bootstrapped with create-next-app)
• UI Components: @livekit/components-react library
• Infrastructure: LiveKit Cloud

Follow these steps to get a local development environment running:

1. Install dependencies: Use pnpm to install the required packages.
2. Configure environment variables: Copy the .env.example file to .env.local and populate the required values.
3. Start the server: Run the development script to launch the Next.js application.
4. Access the app: Open http://localhost:3000 in your browser.

pnpm install
cp .env.example .env.local
# Update .env.local with your credentials
pnpm dev

The DebugMode component includes a mechanism to call room.simulateScenario(value). This is useful for testing how your application handles various connectivity and signaling events.

Available scenarios are passed via the handleSimulate function in the UI, which maps to the underlying LiveKit simulateScenario method. One example provided in the implementation is signal-reconnect.

The isMeetStaging function returns true if the application is currently running on the meet.staging.livekit.io host. This is useful for toggling staging-specific configurations or debugging tools.

if (isMeetStaging()) {
  console.log('Running in staging environment');
}

The isLowPowerDevice function returns a boolean indicating if the current device is likely a low-power device. It determines this by checking if navigator.hardwareConcurrency is less than 6. This can be used to adjust media quality or feature sets to preserve device performance.

if (isLowPowerDevice()) {
  // Disable heavy visual effects or reduce video resolution
}

When using the useKrispNoiseFilter hook (which powers the noise cancellation in MicrophoneSettings), you can pass a filterOptions object to tune performance and behavior:

• bufferOverflowMs: Milliseconds before buffer overflow triggers.
• bufferDropMs: Milliseconds for buffer drop handling.
• quality: Set to 'low' for low-power devices or 'medium' for standard devices.
• onBufferDrop: A callback function executed when a buffer drop occurs. Note that in Krisp versions >= 0.3.2, the filter will automatically disable itself if a buffer drop occurs.

const { isNoiseFilterEnabled, setNoiseFilterEnabled, isNoiseFilterPending } = useKrispNoiseFilter({
  filterOptions: {
    bufferOverflowMs: 100,
    bufferDropMs: 200,
    quality: 'medium',
    onBufferDrop: () => {
      console.warn('krisp buffer dropped');
    },
  },
});

The generateRoomId function creates a unique identifier for a meeting room in the format xxxx-xxxx, where x is a random alphanumeric character. This is suitable for generating quick, shareable room links.

const roomId = generateRoomId(); // e.g., "a1b2-c3d4"

Use encodePassphrase and decodePassphrase to handle passphrases in a URL-safe format using URI encoding. This is useful for passing passphrases as part of a URL query parameter.

const encoded = encodePassphrase('my secret passphrase');
const decoded = decodePassphrase(encoded);

The useDebugMode hook configures the LiveKit client logging level and integrates with Datadog for error and log tracking if the necessary environment variables are present. It also attaches the current room instance to window.__lk_room for manual inspection in the browser console.

To use it, call the hook within a component that has access to the LiveKit RoomContext (e.g., inside a <LiveKitRoom> provider).

Environment Variables for Datadog Integration:

• NEXT_PUBLIC_DATADOG_CLIENT_TOKEN
• NEXT_PUBLIC_DATADOG_SITE

import { useDebugMode } from './Debug';
import { LogLevel } from 'livekit-client';

// Inside a component wrapped by LiveKitRoom
useDebugMode({ logLevel: LogLevel.debug });