CaptureController: zoomlevelchange event

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The zoomlevelchange event of the CaptureController interface is fired when the captured display surface's zoom percentage changes.

Specifically, this occurs when:

  • The increaseZoomLevel(), decreaseZoomLevel(), or resetZoomLevel() methods are called on a controller that is actively controlling a captured display surface.
  • The user changes the zoom level in the captured surface.
  • The user changes the captured display surface to another one that has a different zoom level.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js
addEventListener("zoomlevelchange", (event) => { })

onzoomlevelchange = (event) => { }

Event type

A generic Event.

Examples

Basic zoomlevelchange usage

When a captured display surface's zoom level changes, a zoomlevelchange event fires on the controller, which can be used to run an event handler such as the following. This writes the updated zoom percentage to an output element of some kind.

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

// ...

controller.addEventListener(
  "zoomlevelchange",
  () => (outputElem.textContent = `${controller.zoomLevel}%`),
);

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

Specifications

Specification
Captured Surface Control
# dom-capturecontroller-onzoomlevelchange

Browser compatibility

See also