> ## Documentation Index
> Fetch the complete documentation index at: https://docs.streampixel.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Video, codecs, and resolution

> Reference for supported codecs, codec negotiation, resolution presets, resolution modes, and bitrate or QP controls.

This page covers how the SDK selects video codecs, the resolution presets it supports, the available resolution modes, and the bitrate and quality controls.

## Supported codecs

The SDK supports four video codecs:

| Codec             | Browser Support       | Notes                                                                                                                       |
| ----------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| AV1 ★ Recommended | Chrome, Edge          | Best compression. Recommended primary codec for every use case. Requires Unreal Engine 5.3+ and is not supported on Firefox |
| VP9               | Chrome, Edge, Firefox | Better compression than VP8. Strong fallback for ArchViz / Digital Twin                                                     |
| H264              | All browsers          | Universal fallback, widest compatibility                                                                                    |
| VP8               | All browsers          | Good compatibility                                                                                                          |

<Warning>
  AV1 requires Unreal Engine 5.3 or later and is **not supported on Firefox**. On older UE versions or unsupported browsers, the SDK will fall back automatically — but you should plan your codec preferences accordingly.
</Warning>

## Codec negotiation

The SDK automatically negotiates the best codec:

1. Detects which codecs the browser supports via `RTCRtpReceiver.getCapabilities('video')`
2. Tries the `primaryCodec` you configured (or dashboard default)
3. If the primary codec is unavailable or incompatible:
   * Tries the `fallBackCodec`
4. If the fallback is also unavailable:
   * Falls back to H264

<Info>
  H264 is the ultimate fallback. If both your primary and fallback codecs are unavailable, the SDK will always fall back to H264 — so every user will get a working stream regardless of browser.
</Info>

Special rules:

* AV1 requires Unreal Engine version > 5.3. On older versions, it falls back automatically.
* Firefox does not support setting codec preferences via the `setOptionSettingOptions` API. The SDK handles this silently.

```javascript theme={"dark"}
await StreamPixelApplication({
  appId: 'your-project-id',
  primaryCodec: 'AV1',
  fallBackCodec: 'H264',
});
```

## Resolution presets

The SDK uses predefined resolution presets:

| Preset                | Dimensions  |
| --------------------- | ----------- |
| `"360p (640x360)"`    | 640 x 360   |
| `"480p (854x480)"`    | 854 x 480   |
| `"720p (1280x720)"`   | 1280 x 720  |
| `"1080p (1920x1080)"` | 1920 x 1080 |
| `"1440p (2560x1440)"` | 2560 x 1440 |
| `"4K (3840x2160)"`    | 3840 x 2160 |

## Device-specific resolution

The SDK detects the user's device and applies the appropriate starting resolution:

| Device  | Config Parameter        | Default               |
| ------- | ----------------------- | --------------------- |
| Desktop | `startResolution`       | `"1080p (1920x1080)"` |
| Tablet  | `startResolutionTab`    | `"720p (1280x720)"`   |
| Mobile  | `startResolutionMobile` | `"480p (854x480)"`    |

Device detection uses the browser's user agent string.

## Resolution modes

### Fixed Resolution Mode

Sends the exact resolution dimensions to UE. The stream always renders at the specified resolution regardless of the browser viewport size.

<Tip>
  **Fixed Resolution Mode** is the simplest option and works well for most use cases. If you don't need the stream to adapt to different viewport sizes, start here.
</Tip>

### Dynamic Resolution Mode

Adapts the resolution to match the browser viewport while respecting the `maxStreamQuality` ceiling. When the viewport is smaller than the max quality, the SDK sends viewport dimensions. When larger, it scales down proportionally.

In this mode, the SDK also listens for window resize events and adjusts resolution automatically (with a 200ms debounce).

### Crop on Resize Mode

Similar to Dynamic Resolution Mode but preserves the aspect ratio by scaling to fit the viewport with proportional dimensions.

## Changing resolution at runtime

Use `UIControl.handleResMax()` to change the maximum resolution during a session:

```javascript theme={"dark"}
UIControl.handleResMax('1920x1080');
UIControl.handleResMax('1280x720');
```

The format is `"WIDTHxHEIGHT"`.

In Fixed Resolution Mode, this sends a `r.SetRes` console command to UE. In Dynamic/Crop modes, it recalculates the resolution based on the viewport.

## Bitrate control

| Parameter    | Type     | Default | Description             |
| ------------ | -------- | ------- | ----------------------- |
| `minBitrate` | `number` | `1`     | Minimum bitrate in Mbps |
| `maxBitrate` | `number` | `100`   | Maximum bitrate in Mbps |

## Quantization parameter (QP)

QP controls video compression quality. Lower values mean better quality but more bandwidth.

| Parameter | Type     | Default | Description                               |
| --------- | -------- | ------- | ----------------------------------------- |
| `minQP`   | `number` | `20`    | Minimum QP (1-51, lower = better quality) |
| `maxQP`   | `number` | `-1`    | Maximum QP (-1 = no limit / auto)         |

## Next steps

<CardGroup cols={2}>
  <Card title="Initialization and configuration" href="/resources/web-sdk/core-concepts/initialization">
    See all configuration parameters in one place.
  </Card>

  <Card title="Input controls" href="/resources/web-sdk/features/input-controls">
    Configure mouse, keyboard, touch, gamepad, and WebXR input.
  </Card>
</CardGroup>