Detecting Screen Resolution for Media Playback in React Native Applications on Vega OS

Vega Open Beta Knowledge Base
1

The post below provides specific help on how to properly let the player select the correct video playback resolution for React Native applications on Vega OS powered devices (FireTV Stick 4K Select). We’ve seen a number of field issues and bugs/issues in internal testing where apps are requesting the incorrect video stream, which can cause playback issues (not playing, stuttering, distortion, etc). To proactively remedy this, we recommend that app developers implement checks for video resolution as part of the setup for media playback.

While the FireTV Stick 4K Select supports 4K playback, not all TVs do. Most TVs today support either 4K (3840x2160) or HD (1920x1080). When a FireTV Stick 4K Select is connected to an HD TV, it should request only HD or lower streams to provide the best experience for the end customer.

This can be done in two ways; either through decodeInfo() from the W3C standard or via the Vega Graphics API. For applications using Shaka player or other open source web players, the decodeInfo() solution is typically recommended. Some players (including Shaka) already define the implementation and just require a polyfill to be installed. For custom players that do not use typical web APIs, the Vega Graphics API is a supported alternative. Both APIs also provide additional media display capabilities (such as HDR and Dolby Vision) and you can follow the same APIs for taking advantage of such features.

The decodeInfo() approach

Background: Web players and other web technologies often rely on settings in the Navigator. Navigator is a web concept and does not natively exist in a React Native context. This approach allows you to take advantage of APIs built into players like Shaka that read Navigator properties by default. Utilizing the Polyfill allows your React Native application to define settings in the Navigator, which is how this approach works.

Let’s walk through how to do this using a W3C player (e.g. Shaka) using the Vega Sports Sample app with the following steps:

  1. Define the Polyfill for decodeInfo()

Note: Skip step 1 if you use Shaka Player with Amazon’s patches.

You can find the reference to the code for the polyfill in our documentation here: W3C Media Capabilities | Design and Develop Vega Apps . For implementation in the Vega Sports app, this is included in the app as part of the initial build process by copying a polyfill included in the zip file downloaded from this document. Once you build the app the first time, there will be a directory created by the build/setup scripts that place a file called W3CMediaPolyfill.ts under the <app-root>/w3media/polyfills/ folder. The W3MediaPolyfill includes the implementation of decodeInfo

  1. Install the Polyfill

Once the Polyfill is defined in your application, it needs to be installed into the application. Following the Vega Sports example, the Polyfill is installed here. This line enables the application to access the Polyfill and hence can access media capabilities.

  1. Utilize the Polyfill in your application

Note: This step is not needed if using Shaka Player or any other W3C based player that makes use of decodingInfo() directly from the player.

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: 2000, // should be in bps
    framerate: 29.97,
  },
};

const configuration_4k = {
  type: 'media-source',
  video: {
    contentType: contentType,
    width: 3840,
    height: 2160,
    bitrate: 8000, // should be 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 FireTV 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 FireTV device and its connected TV including heigh/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 (FireTV stick) and display (typically a television), so for example:

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