# Video, Codecs, and Resolution

## Supported Codecs

The SDK supports four video codecs:

| Codec | Browser Support       | Notes                                                                         |
| ----- | --------------------- | ----------------------------------------------------------------------------- |
| H264  | All browsers          | Default fallback, widest compatibility                                        |
| VP8   | All browsers          | Good compatibility                                                            |
| VP9   | Chrome, Edge, Firefox | Better compression than VP8                                                   |
| AV1   | Chrome, Edge          | Best compression. Requires Unreal Engine 5.3+ and is not supported on Firefox |

{% hint style="danger" %}
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.
{% endhint %}

## 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

{% hint style="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.
{% endhint %}

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

{% hint style="success" %}
**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.
{% endhint %}

### 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
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)         |