CaptureController: Methode getSupportedZoomLevels()

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die getSupportedZoomLevels()-Methode der CaptureController-Schnittstelle gibt die verschiedenen Zoomstufen zurück, die die erfasste Anzeigefläche unterstützt.

Syntax

js
getSupportedZoomLevels()

Parameter

Keine.

Rückgabewert

Ein Array von Zahlen, das die verschiedenen Zoomstufen darstellt, die die erfasste Anzeigefläche unterstützt.

Ausnahmen

InvalidStateError DOMException

Der erfasste MediaStream, der durch den ursprünglich aufgerufenen MediaDevices.getDisplayMedia()-Aufruf zurückgegeben wurde, erfasst nicht mehr, z. B. weil die zugehörigen MediaStreamTrack-Objekte durch Aufruf von stop() gestoppt wurden.

NotSupportedError DOMException

Der erfasste Oberflächentyp ist nicht ein Browser-Tab.

Beispiele

Grundlegende Nutzung von getSupportedZoomLevels()

In unserem Live-Demo, gezeigt in Using the Captured Surface Control API, rufen wir die unterstützten Zoomstufen der erfassten Anzeigefläche ab, indem wir getSupportedZoomLevels() ausführen und das resultierende Array in einer Variable namens zoomLevels speichern:

js
const zoomLevels = controller.getSupportedZoomLevels();

Dies wird später in einer Funktion namens updateZoomButtonState() verwendet. Das Problem, das dadurch gelöst wird, ist, dass, wenn Sie versuchen, unter das minimale unterstützte Zoom-Niveau herauszuzoomen oder über das maximale unterstützte Zoom-Niveau hineinzuzoomen, decreaseZoomLevel()/increaseZoomLevel() einen InvalidStateError DOMException auslösen.

Hinweis: Es ist allgemein eine bewährte Praxis, decreaseZoomLevel() und increaseZoomLevel() innerhalb eines try...catch-Blocks aufzurufen, da das Zoom-Niveau asynchron von einer anderen Entität als der Anwendung geändert werden könnte, was zu einem Fehler führen könnte. Beispielsweise könnte der Benutzer direkt mit der erfassten Oberfläche interagieren, um ein- oder herauszuzoomen.

Die updateZoomButtonState()-Funktion vermeidet dieses Problem, indem sie zuerst sicherstellt, dass die "Zoom out" und "Zoom in" Schaltflächen aktiviert sind. Dann führt sie zwei Überprüfungen durch:

  • Wenn das aktuelle Zoom-Niveau dem minimal unterstützten Zoom-Niveau entspricht (das im ersten Wert des zoomLevels-Arrays gespeichert ist), deaktivieren wir die "Zoom out" Schaltfläche, damit der Benutzer nicht weiter herauszoomen kann.
  • Wenn das aktuelle Zoom-Niveau dem maximal unterstützten Zoom-Niveau entspricht (das im letzten Wert des zoomLevels-Arrays gespeichert ist), deaktivieren wir die "Zoom in" Schaltfläche, damit der Benutzer nicht weiter hineinzoomen kann.
js
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;
  }
}

Spezifikationen

Specification
Captured Surface Control
# dom-capturecontroller-getsupportedzoomlevels

Browser-Kompatibilität

Siehe auch