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。