CaptureController: getSupportedZoomLevels() 方法

语法

getSupportedZoomLevels()

参数

无。

返回值

一个数字数组，表示捕获的显示表面支持的不同缩放级别。

异常

InvalidStateError DOMException

源自 MediaDevices.getDisplayMedia() 调用的捕获的 MediaStream 不再进行捕获，例如，因为相关的 MediaStreamTrack 对象已调用 stop() 方法。

NotSupportedError DOMException

正在捕获的表面类型不是浏览器标签页。

示例

基本的 getSupportedZoomLevels() 用法

在我们通过 使用捕获表面控制 API 展示的实时演示中，我们通过运行 getSupportedZoomLevels() 来获取捕获显示表面的支持的缩放级别，并将结果数组存储在一个名为 zoomLevels 的变量中。

const zoomLevels = controller.getSupportedZoomLevels();

这之后用于一个名为 updateZoomButtonState() 的函数。这个函数解决的问题是，如果您尝试将缩放级别降低到低于支持的最低缩放级别，或者放大到高于支持的最高缩放级别，decreaseZoomLevel() / increaseZoomLevel() 将会抛出一个 InvalidStateError DOMException。

updateZoomButtonState() 函数通过首先确保“缩小”和“放大”按钮都已启用来避免此问题。然后它进行两次检查：

• 如果当前缩放级别等于支持的最低缩放级别（存储在 zoomLevels 数组的第一个值中），我们将禁用“缩小”按钮，这样用户就无法进一步缩小了。
• 如果当前缩放级别等于支持的最高缩放级别（存储在 zoomLevels 数组的最后一个值中），我们将禁用“放大”按钮，这样用户就无法进一步放大了。

function updateZoomButtonState() {
  decBtn.disabled = false;
  incBtn.disabled = false;
  if (controller.zoomLevel === zoomLevels[0]) {
    decBtn.disabled = true;
  } else if (controller.zoomLevel === zoomLevels[zoomLevels.length - 1]) {
    incBtn.disabled = true;
  }
}

规范

浏览器兼容性

另见

• Screen Capture API
• MediaDevices.getDisplayMedia()
• 使用 Captured Surface Control API