Detecting Screen Resolution for Media Playback in Vega

Vega Open Beta Knowledge Base
1

This guide covers how to detect the correct video playback resolution for React Native applications on Vega OS (Fire TV Stick 4K Select). Requesting the wrong video stream can cause playback failures, stuttering, or distortion — so we recommend implementing resolution checks as part of your media playback setup.

The Fire TV Stick 4K Select supports 4K playback, but not all connected TVs do. When connected to an HD TV (1920x1080), your app should request only HD or lower streams.

There are two approaches to detect the connected display’s resolution:

  • decodingInfo() (W3C standard) — recommended for apps using Shaka Player or other web-based players. Some players (including Shaka) already use decodingInfo() internally and just need a polyfill installed.

  • Vega Graphics API — a good alternative for custom players that don’t use W3C APIs.

Both APIs also expose additional display capabilities like HDR and Dolby Vision.

Note: If you’re using the @amazon-devices/react-native-w3cmedia package (version ~2.1.0) for media playback, the resolution detection described below can be used alongside your player setup to ensure you request the correct stream quality for the connected display.

The decodeInfo() approach

Navigator doesn’t natively exist in React Native, but web-based players like Shaka rely on it. A polyfill bridges this gap, letting your React Native app expose media capabilities through Navigator so that decodingInfo() works as expected.

Here’s how to set this up using the Vega Sports Sample app as a reference:

  1. Define the polyfill — See the W3C Media Capabilities docs for the polyfill code. In the Vega Sports app, the build scripts create W3CMediaPolyfill.ts under <app-root>/w3media/polyfills/ using a polyfill from the Shaka Player setup guide. Skip this step if you use Shaka Player with Amazon’s patches.

  2. Install the polyfill — Import and install it in your player setup. See the Vega Sports example for reference.

  3. Use decodingInfo() in your player code — Skip this step if your player (e.g. Shaka) calls decodingInfo() internally.

You can utilize the sample below to make use of decodeInfo() from your application player code. This example demonstrates HD/UHD decoding support for AVC streams:

const contentType = 'video/mp4;codecs=avc1.640028';
const configuration = {
  type: 'media-source',
  video: {
    contentType: contentType,
    width: 1920,
    height: 1080,
    bitrate: 2000000, // in bps
    framerate: 29.97,
  },
};
const configuration_4k = {
  type: 'media-source',
  video: {
    contentType: contentType,
    width: 3840,
    height: 2160,
    bitrate: 8000000, // in bps
    framerate: 29.97,
  },
};
decodingInfoImpl(configuration)
  .then((result) => {
    console.log(
      'Decoding of ' +
        contentType +
        ' at height ' +
        configuration.video.height +
        ' and bitrate ' +
        configuration.video.bitrate +
        ' at framerate ' +
        configuration.video.framerate +
        ' is' +
        (result.supported ? '' : ' NOT') +
        ' supported,',
    );
  })
  .catch((err) => {
    console.error(err, ' caused decodingInfo to reject');
  });
decodingInfoImpl(configuration_4k)
  .then((result) => {
    console.log(
      'Decoding of ' +
        contentType +
        ' at height ' +
        configuration_4k.video.height +
        ' and bitrate ' +
        configuration_4k.video.bitrate +
        ' at framerate ' +
        configuration_4k.video.framerate +
        ' is' +
        (result.supported ? '' : ' NOT') +
        ' supported,',
    );
  })
  .catch((err) => {
    console.error(err, ' caused decodingInfo to reject');
  });

This sample cannot be found in the Vega Sports sample app because Shaka directly utilizes decodingInfo(), so custom code in the application is not required.

If your Fire TV Stick 4K Select is connected to a non-4K display (e.g. 1080p or 720p), the configuration_4k will return as not supported, but the lower resolution video (configuration) will return as supported.

Vega Graphics API Approach

The documentation can be found here for Vega Graphics API. Vega Graphics provides a simple API for retrieving information about the Fire TV device and its connected TV including height/width as well as other features such as HDR. This API typically works best for custom players that do not use W3C APIs.

The height referenced here will return the correct value for the combination of device (Fire TV stick) and display (typically a television), so for example:

  • HD TVs connected to Fire TV Stick 4K Select will return 1080
  • 4K TVs connected to Fire TV Stick 4K Select will return 2160
  • etc

Last updated: Mar 10, 2026

Webview 4k support check