Skip to main content
Field Guides

Configuring the LiveKit Client SDK for Optimal Video Quality

Learn how to configure the LiveKit Client SDK for optimal video quality, including codec selection, simulcast layers, and encoding settings.

Last Updated:


To get the best video quality when capturing and streaming video with the LiveKit JavaScript Client SDK, it's important to correctly configure a few key parameters. This guide will help you understand which options affect quality, and how to balance resolution, bandwidth, and compatibility.

1. Select the right video codec

We recommend VP9 if your use case prioritizes visual quality. VP9 offers better perceptual quality at the same bitrate compared to VP8, which can be particularly beneficial on constrained networks.

VP9 pros and cons

ProsCons
Better quality at similar bandwidthHigher CPU usage for encoding and decoding
Well supported in modern browsers

VP9 and AV1 use SVC instead of simulcast

If you choose to use VP9 (or AV1), the simulcast behavior changes:

  • VP9 (and AV1) uses SVC (Scalable Video Coding)
  • Simulcast settings (videoSimulcastLayers) are not used with VP9
  • Additional layers are instead configured via the scalabilityMode property (allowed values)

The scalability mode format is LxTy where:

  • Spatial layers (Lx) correspond to resolutions
  • Temporal layers (Ty) correspond to frame rates

Note: Clients do not have direct control over the exact resolutions and frame rates of each layer; the browser determines the optimal configuration.

When to use H264

We recommend H264 in situations where you have limited CPU, as the encoding and decoding are typically done in hardware.

2. Configure VideoCaptureOptions for camera resolution

VideoCaptureOptions lets you request a specific resolution and frame rate from the user's camera.

Key fields

FieldDescription
resolutionSuggest the highest quality resolution you want from the camera
frameRateOptional — the browser and device may limit or adjust this

Important: This setting determines the original source video stream from the camera. Simulcast layers are derived from this base layer.

3. Use simulcast layers to enable adaptive quality

Simulcast allows LiveKit to send multiple resolutions of a video stream. This helps optimize for varying network and device conditions.

How simulcast works

  • You can define up to two simulcast layers
  • LiveKit always includes the original (full resolution) layer from VideoCaptureOptions automatically
  • Use videoSimulcastLayers and screenshareSimulcastLayers to set additional layers from the predefined VideoPresets

Important: Simulcast layers are additional to the base capture resolution.

4. Enable Dynacast

We recommend enabling dynacast to optimize bandwidth usage:

  • Dynamically disables unused simulcast layers based on which subscribers are viewing them
  • Helps reduce unnecessary upstream bandwidth consumption

5. Configure videoEncoding

You can also configure the video encoding parameters for the camera track via the videoEncoding property:

  • For the best and easiest experience, use the values provided by the predefined VideoPresets
  • If you manually configure these values, consult the video encoding guide for common configurations

Putting it all together

You can configure these settings in either:

  • RoomOptions.publishDefaults
  • Options passed to LocalParticipant.publishTrack()

Example with H264 codec

import { RoomOptions, VideoPresets } from 'livekit-client';
const roomOptions: RoomOptions = {
dynacast: true,
publishDefaults: {
simulcast: true,
screenshareEncoding: VideoPresets.h1080.encoding,
screenshareSimulcastLayers: [VideoPresets.h720, VideoPresets.h360],
videoCodec: 'h264',
videoEncoding: VideoPresets.h1080.encoding,
videoSimulcastLayers: [VideoPresets.h720, VideoPresets.h360],
},
videoCaptureDefaults: {
resolution: VideoPresets.h1080.resolution,
},
};

Example with VP9 codec

import { RoomOptions, VideoPresets } from 'livekit-client';
const roomOptions: RoomOptions = {
dynacast: true,
publishDefaults: {
scalabilityMode: 'L3T3',
screenshareEncoding: VideoPresets.h1080.encoding,
videoCodec: 'vp9',
videoEncoding: VideoPresets.h1080.encoding,
},
videoCaptureDefaults: {
resolution: VideoPresets.h1080.resolution,
},
};

With VP9 and L3T3 scalability mode:

  • L3 = 3 spatial layers (different resolutions)
  • T3 = 3 temporal layers (different frame rates)

The browser will automatically determine the optimal resolution and frame rate for each layer based on network conditions and subscriber requirements.