Configuring the Client SDK for Optimal Video Quality

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.

• Pros: Better quality at similar bandwidth.

• Cons: Higher CPU usage for both encoding and decoding.

• Compatibility: VP9 is well supported in modern browsers.

If you choose to use VP9 (or AV1), the simulcast behavior described below will change:

• 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).

  • Spatial layers (Lx) correspond to resolutions.

  • Temporal layers (Tx) correspond to frame rates.

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

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:

• resolution: Suggest the highest quality resolution you want from the camera.

• frameRate: Optional — the browser and device may limit or adjust this.

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

3. Use videoSimulcastLayers and screenshareSimulcastLayers to Enable Adaptive Quality

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

• You can define up to two simulcast layers.

• LiveKit will always include the original (full resolution) layer from VideoCaptureOptions and screenshareSimulcastLayers

  automatically.

Use the videoSimulcastLayers and screenshareSimulcastLayers property to set the additional layers from the pre-defined 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 best and easiest experience, use the values provided by the predefined VideoPresets

• If you manually configure these values, consult this guide for common configurations.

Putting it all together

You can configure these settings in either:

• RoomOptions.publishDefaults

or

• options passed to LocalParticipant.publishTrack()

Example

{
   dynacast: true,
   publishDefaults: {
     simulcast: true,
     screenshareEncoding: VideoPresets.h1080.encoding,
     screenshareSimulcastLayers: [VideoPresets.h720, VideoPresets.h360],
     videoCodecs: 'h264',
     videoEncoding: VideoPresets.h1080.encoding,
     videoSimulcastLayers: [VideoPresets.h720, VideoPresets.h360]
   },
   videoCaptureDefaults: {
     resolution: VideoPresets.h1080.resolution
   }
}

Example with VP9 codec

{
   dynacast: true,
   publishDefaults: {
     scabilityMode: 'L3T3',
     screenshareEncoding: VideoPresets.h1080.encoding,
     videoCodecs: 'vp9',
     videoEncoding: VideoPresets.h1080.encoding
   },
   videoCaptureDefaults: {
     resolution: VideoPresets.h1080.resolution
   }
}