CaptureController: decreaseZoomLevel() method

None.

A Promise that fulfills with undefined.

InvalidStateError DOMException

The captured display surface is already at its minimum supported zoom level.

NotAllowedError DOMException

The operation is disallowed by a captured-surface-control Permissions Policy.

The following snippet adds an event listener to a button so that when it is clicked, the decreaseZoom() function is called. This in turn calls the decreaseZoomLevel() method, zooming the captured surface out.

// Create controller and start capture
const controller = new CaptureController();
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia({
  controller,
});

// ...

decBtn.addEventListener("click", decreaseZoom);

async function decreaseZoom() {
  try {
    controller.decreaseZoomLevel();
  } catch (e) {
    console.log(e);
  }
}

It is generally a best practice to call decreaseZoomLevel() 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.

See Using the Captured Surface Control API for a full working example.

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