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

# Stream statistics

> Monitor WebRTC stream quality, bitrate, frame rates, and codecs using UIControl helpers and the statsReceived event.

The SDK provides real-time WebRTC stream statistics for monitoring connection quality, performance, and diagnostics.

## Getting stats with UIControl

The simplest way to get current statistics:

```javascript theme={"dark"}
const stats = UIControl.getStreamStats();

console.log(stats);
// {
//   "Framerate": 60,
//   "Net RTT (ms)": 12,
//   "Frames Decoded": 15420,
//   "Frames dropped": 3,
//   "Received": 245678,
//   "Packets Lost": 0,
//   "Video codec": "H264 level-asymmetry-allowed=1...",
//   "Audio codec": "opus minptime=10;useinbandfec=1",
//   "Video resolution": "1920x1080",
//   "Video Bitrate (kbps)": 8500,
//   "Audio Bitrate (kbps)": 128,
//   "Duration": "00:05:32",
//   "Controls stream input": true,
//   "Video quantization parameter": 22
// }
```

`getStreamStats()` triggers the stats panel internally, collects the data, and returns a parsed JavaScript object.

## Stats via event listener

For continuous monitoring, listen for the `statsReceived` event:

```javascript theme={"dark"}
pixelStreaming.addEventListener('statsReceived', (e) => {
  const aggregated = e.data.aggregatedStats;

  // Video stats
  const video = aggregated.inboundVideoStats;
  console.log('Bitrate:', video.bitrate);
  console.log('Resolution:', video.frameWidth + 'x' + video.frameHeight);
  console.log('FPS:', video.framesPerSecond);
  console.log('Frames decoded:', video.framesDecoded);
  console.log('Frames dropped:', video.framesDropped);
  console.log('Packets lost:', video.packetsLost);

  // Audio stats
  const audio = aggregated.inboundAudioStats;
  console.log('Audio bitrate:', audio.bitrate);

  // Session stats
  const session = aggregated.sessionStats;
  console.log('RTT (ms):', session.currentRoundTripTime * 1000);
  console.log('Duration (s):', session.duration);

  // Codec info
  const codecs = aggregated.codecs;
  // codecs is a Map<codecId, { mimeType }>
  // Look up video codec: codecs.get(video.codecId)?.mimeType
});
```

## Available stat fields

### From `getStreamStats()` (parsed key-value object)

| Field                          | Type      | Description                                  |
| ------------------------------ | --------- | -------------------------------------------- |
| `Framerate`                    | `number`  | Current video frames per second              |
| `Net RTT (ms)`                 | `number`  | Network round-trip time in milliseconds      |
| `Frames Decoded`               | `number`  | Total video frames decoded                   |
| `Frames dropped`               | `number`  | Total video frames dropped                   |
| `Received`                     | `number`  | Total data received                          |
| `Packets Lost`                 | `number`  | Total packets lost                           |
| `Video codec`                  | `string`  | Video codec and parameters                   |
| `Audio codec`                  | `string`  | Audio codec and parameters                   |
| `Video resolution`             | `string`  | Current video resolution (e.g., "1920x1080") |
| `Video Bitrate (kbps)`         | `number`  | Current video bitrate                        |
| `Audio Bitrate (kbps)`         | `number`  | Current audio bitrate                        |
| `Duration`                     | `string`  | Session duration (HH:MM:SS format)           |
| `Controls stream input`        | `boolean` | Whether this client controls UE input        |
| `Video quantization parameter` | `number`  | Current video QP value                       |

### From `statsReceived` event (aggregated stats object)

| Object              | Field                  | Description                                       |
| ------------------- | ---------------------- | ------------------------------------------------- |
| `inboundVideoStats` | `bitrate`              | Video bitrate (kbps)                              |
|                     | `frameWidth`           | Video frame width                                 |
|                     | `frameHeight`          | Video frame height                                |
|                     | `framesPerSecond`      | FPS                                               |
|                     | `framesDecoded`        | Total frames decoded                              |
|                     | `framesDropped`        | Total frames dropped                              |
|                     | `packetsLost`          | Total packets lost                                |
|                     | `codecId`              | Reference to codec in codecs Map                  |
| `inboundAudioStats` | `bitrate`              | Audio bitrate (kbps)                              |
|                     | `codecId`              | Reference to codec in codecs Map                  |
| `sessionStats`      | `duration`             | Session duration in seconds                       |
|                     | `currentRoundTripTime` | RTT in seconds (multiply by 1000 for ms)          |
| `codecs`            | Map                    | `Map<codecId, { mimeType }>` — lookup codec names |

### Resolving codec names

<Info>
  The `codecs` field is a JavaScript `Map`, not a plain object. Use `.get(codecId)` to look up codec names — bracket notation will not work.
</Info>

The `codecId` in stats is a raw identifier. To get the human-readable name:

```javascript theme={"dark"}
pixelStreaming.addEventListener('statsReceived', (e) => {
  const stats = e.data.aggregatedStats;
  const videoCodecId = stats.inboundVideoStats.codecId;
  const codecInfo = stats.codecs.get(videoCodecId);
  console.log('Video codec:', codecInfo?.mimeType); // e.g., "video/H264"
});
```

## Next steps

<CardGroup cols={2}>
  <Card title="UIControl API" icon="sliders" href="/resources/web-sdk/api-reference/uicontrol">
    Reference for `getStreamStats()` and other helpers.
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/resources/web-sdk/guides/troubleshooting">
    Diagnose connection and codec issues using stats.
  </Card>
</CardGroup>