CaptureController: getSupportedZoomLevels() method

Limited availabilitySecure context

The CaptureController interface’s getSupportedZoomLevels() method returns the different zoom levels that the captured display surface supports.

Syntax

getSupportedZoomLevels()

Parameters

None.

Return value

An array of numbers representing the different zoom levels that the captured display surface supports.

Exceptions

• InvalidStateError DOMException
  • : The capturing MediaStream returned by the originating getDisplayMedia() call is no longer capturing, for example because the associated MediaStreamTrack objects have had stop() called on them.
• NotSupportedError DOMException
  • : The surface type being captured is not a browser tab.

Examples

Basic getSupportedZoomLevels() usage

In our live demo, shown in Using the Captured Surface Control API, we grab the supported zoom levels of the captured display surface by running getSupportedZoomLevels(), storing the resulting array in a variable called zoomLevels:

const zoomLevels = controller.getSupportedZoomLevels();

This is later used in a function called updateZoomButtonState(). The problem this solves is that, if you try to zoom out below the minimum supported zoom level, or zoom in above the maximum supported zoom level, decreaseZoomLevel()/increaseZoomLevel() will throw an InvalidStateError DOMException.

[!NOTE] It is generally a best practice to call decreaseZoomLevel() and increaseZoomLevel() from within a try...catch block because the zoom level could be changed asynchronously by an entity other than the application, which might lead to an error being thrown. For example, the user might directly interact with the captured surface to zoom in or out.

The updateZoomButtonState() function avoids this issue by first making sure both the “Zoom out” and “Zoom in” buttons are enabled. It then does two checks:

• If the current zoom level is equal to the minimum supported zoom level (stored in the first value of the zoomLevels array), we disable the “Zoom out” button so the user can’t zoom out any further.
• If the current zoom level is equal to the maximum supported zoom level (stored in the last value of the zoomLevels array), we disable the “Zoom in” button so the user can’t zoom in any further.

function updateZoomButtonState() {
  decBtn.disabled = false;
  incBtn.disabled = false;
  if (controller.zoomLevel === zoomLevels[0]) {
    decBtn.disabled = true;
  } else if (controller.zoomLevel === zoomLevels[zoomLevels.length - 1]) {
    incBtn.disabled = true;
  }
}

Specifications

Browser compatibility

See also

• Screen Capture API
• getDisplayMedia()
• Using the Captured Surface Control API