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 level changes.
Specifically, this occurs when:
- The
increaseZoomLevel(),decreaseZoomLevel(), orresetZoomLevel()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.
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 level to an output element of some kind.
// 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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
zoomlevelchange event
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.