CaptureController: zoomlevelchange 事件

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

CaptureController 接口的 zoomlevelchange 事件在捕获的显示表面的缩放级别发生变化时触发。

具体来说，当以下情况发生时会触发：

在积极控制捕获的显示表面的控制器上调用了 increaseZoomLevel()、decreaseZoomLevel() 或 resetZoomLevel() 方法。
用户更改了捕获表面的缩放级别。
用户将捕获的显示表面更改为另一个具有不同缩放级别的表面。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

onzoomlevelchange = (event) => { }

事件类型

一个通用的 Event。

示例

基本的 `zoomlevelchange` 用法

当捕获的显示表面的缩放级别发生变化时，会在控制器上触发 zoomlevelchange 事件，可以使用该事件来运行事件处理程序，例如以下代码。该代码会将更新后的缩放级别写入某个输出元素。

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

// ...

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

有关完整的可运行示例，请参阅使用 Captured Surface Control API。