Detect Screen Resolution in Vega

In this article, you’ll implement screen resolution detection for React Native apps that run on Vega OS devices. While the Fire TV Stick 4K Select supports 4K playback, not all TVs do. When a Fire TV Stick 4K Select is connected to a High Definition (HD) TV, your app should request only HD or lower streams to provide the best experience. Requesting an incorrect video stream might cause playback issues such as stuttering, distortion, or failure to play. You have two approaches to detect screen resolution:

decodeInfo() from the W3C standard, recommended for apps using Shaka Player or other web-based players
Vega Graphics API, recommended for custom players that don’t use W3C APIs

Prerequisites

Vega development environment set up
React Native app running on Vega OS
Fire TV Stick 4K Select for testing
@amazon-devices/react-native-w3cmedia package installed (for the decodeInfo() approach)

Define the `decodeInfo()` polyfill

If you use Shaka Player with Amazon’s patches, skip this step. The polyfill is already included. For other players, define the polyfill for decodeInfo(). Reference the polyfill code in the media capabilities documentation. In the Vega Sports Sample App, the build scripts place a file called W3CMediaPolyfill.ts under the <app-root>/w3media/polyfills/ folder. This file includes the implementation of decodeInfo().

Install the polyfill

After defining the polyfill in your app, install it so the app can access media capabilities. In the Vega Sports Sample App, the polyfill is installed during app initialization.

Query resolution support with `decodeInfo()`

If you use Shaka Player or another W3C-based player that calls decodingInfo() directly, skip this step. For custom player code, use decodeInfo() to check which resolutions the connected display supports. The following example demonstrates HD and Ultra High Definition (UHD) decoding support for Advanced Video Coding (AVC) streams.

const contentType = 'video/mp4;codecs=avc1.640028';
const configuration = {
  type: 'media-source',
  video: {
    contentType: contentType,
    width: 1920,
    height: 1080,
    bitrate: 2000,
    framerate: 29.97,
  },
};

const configuration_4k = {
  type: 'media-source',
  video: {
    contentType: contentType,
    width: 3840,
    height: 2160,
    bitrate: 8000,
    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');
  });

When a Fire TV Stick 4K Select is connected to a non-4K display (for example, 1080p or 720p), decodingInfoImpl() returns configuration_4k as not supported, while it returns the lower resolution configuration as supported.

Use the Vega Graphics API as an alternative

The Vega Graphics API provides a way to retrieve information about the Fire TV device and its connected display, including height, width, and features such as High Dynamic Range (HDR). This approach works best for custom players that don’t use W3C APIs. The height value returned reflects the correct resolution for the combination of device and display:

HD TVs connected to the Fire TV Stick 4K Select return 1080
4K TVs connected to the Fire TV Stick 4K Select return 2160

Test the implementation

Build and run your app on a Fire TV device:

Connect the Fire TV Stick 4K Select to an HD (1080p) TV.
Run your app and verify it requests HD streams only.
Connect the Fire TV Stick 4K Select to a 4K TV.
Run your app and verify it requests 4K streams.

​Prerequisites

​Define the decodeInfo() polyfill

​Install the polyfill

​Query resolution support with decodeInfo()

​Use the Vega Graphics API as an alternative

​Test the implementation

​Related content