Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The CaptureController interface's decreaseZoomLevel() method decreases the captured display surface's zoom level by one increment.
The decreaseZoomLevel() method must be invoked via transient activation. In addition, the user is asked for permission to share tabs when screen capture is first attempted; if the user denies permission the zoom level cannot be changed even with transient activation.
decreaseZoomLevel()
None.
A Promise that fulfills with undefined.
InvalidStateError DOMException
Thrown when:
decreaseZoomLevel() without transient activation.NotAllowedError DOMException
Thrown when:
captured-surface-control Permissions Policy does not permit the page to use the Captured Surface Control API.decreaseZoomLevel() usageThe 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 {
await 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.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
decreaseZoomLevel |
136 | 136 | No | 121 | No | No | No | No | No | No | No | No |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CaptureController/decreaseZoomLevel