Resolution and bitrate capping

The CONNECT Player React Native SDK can apply resolution and bitrate caps to DASH streams.

The following describes how to manage bandwidth consumption when playing back streams. It assumes integration into an existing project; see the React Native SDK Integration Guide for details. To view this feature in a standalone project, see the readme in the examples.zip archive in the release files.

A cap on the resolution can be set by an explicit cap of x and y pixels, this can also be done for bitrate capping with a cap of z bits per second (bps).

Example code

Our example below builds a list of typical resolution thresholds that can be applied to see Resolution Capping in action. The example also uses the onBitratesAvailable listener to build a list of bitrates that can be applied as thresholds to see Bitrate Capping in action.

Resolution caps will be applied when you call maxResolution() and pass the value of your chosen Resolution . To remove caps, a value of Infinity should be used.

Bitrate caps will be applied when you call selectMaxBitrate() and pass the chosen bitrate index within the available bitrates list. To remove caps, index of -1 should be used to designate the selection being not in the list of available bitrates.

Click here to see a minimal implementation of bandwidth management

JS

let bitratesArr;
let selectedMaxBitrateIndex: number = Infinity;
let selectedResolutionIndex: number = Infinity;

function App() {
    const [selectedBitrate, setSelectedBitrate] = useState(0);

    const [maxBitrate, setMaxBitrate] = useState(null);
    const [availableBitrates, setAvailableBitrates] = useState([]);

    const availableResolution = [
      { resolution: "360p", width: 640, height: 360 },
      { resolution: "720p", width: 1280, height: 720 },
      { resolution: "1080p", width: 1920, height: 1080 },
      { resolution: "1440p", width: 2560, height: 1440 },
      { resolution: "4K", width: 3840, height: 2160 },
    ];

    const [selectedResolution, setSelectedResolution] = useState({
      width: Infinity,
      height: Infinity,
    });

    const [currentResolution, setCurrentResolution] = useState({
      width: Infinity,
      height: Infinity,
    });

    <OTVPlayer ref={otvplayer => this.otvplayer.ref = otvplayer}
        ...

        maxResolution={selectedResolution}
        onBitratesAvailable={(event: OnBitratesAvailableParam) => {
          bitratesArr = event && event.bitrates;
          setMessage(
            "onBitratesAvailable received with bitrates: " + bitratesArr
          );
          setAvailableBitrates(bitratesArr);
        }}
        onMaxBitrateSelected={(index: number) => {
          setMessage(
            "onMaxBitrateSelected received with bitrate index: " + index
          );
          setMaxBitrate(bitratesArr[index]);
        }}
        onBitrateChanged={(event: OnBitrateChangedParam) => {
          setMessage(
            "onBitrateChanged received with bitrate: " +
              event.bitrate / 1000 +
              "kbps"
          );
          setSelectedBitrate(event.bitrate);
        }}
        onResolutionChanged={(event: OnResolutionChangedParam) => {
          console.log(
            "onResolutionChanged event recevied with event " +
              +"width: " +
              event.width +
              " X " +
              "height: " +
              event.height
          );
          setMessage(
            "onResolutionChanged received with resolution " +
              +"width: " +
              event.width +
              " X " +
              "height: " +
              event.height
          );
          setCurrentResolution({ width: event.width, height: event.height });
        ... 
    >
    </OTVPlayer>