# How to programmatically detect video track qualities on Web

This article describes how you can use the VideoTrack API, a sub-API of the MediaTrack API, to detect video track qualities. Implementing this functionality is a common use-case for developers who want to build their own UI to visualize the available video track qualities.

## Usage

The [`qualities`](https://docs-preview.optiview.dolby.com/pr-861/theoplayer/v11/api-reference/web/interfaces/MediaTrack#qualities) of a video track are available as soon as the track is added to [`player.videoTracks`](https://docs-preview.optiview.dolby.com/pr-861/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#videotracks).

```js
function handleAddTrackEvent(addTrackEvent) {
  const videoTrackQualities = addTrackEvent.track.qualities;
}
player.videoTracks.addEventListener('addtrack', handleAddTrackEvent);
```

## Related articles

* [How to programmatically select a video track quality](https://docs-preview.optiview.dolby.com/pr-861/theoplayer/how-to-guides/web/media-tracks/select-video-track-quality.md)
* [How to programmatically detect video track quality changes](https://docs-preview.optiview.dolby.com/pr-861/theoplayer/how-to-guides/web/media-tracks/detect-video-track-quality-changes.md)
* [How to programmatically detect audio tracks](https://docs-preview.optiview.dolby.com/pr-861/theoplayer/how-to-guides/web/media-tracks/detect-audio-tracks.md)
* [How to build a chromeless UI](https://docs-preview.optiview.dolby.com/pr-861/theoplayer/how-to-guides/web/ui/build-chromeless-ui.md)