In our live demo, shown in Using the Captured Surface Control API, we grab the supported zoom levels of the captured display surface by running getSupportedZoomLevels(), storing the resulting array in a variable called zoomLevels:
const zoomLevels = controller.getSupportedZoomLevels();
This is later used in a function called updateZoomButtonState(). The problem this solves is that, if you try to zoom out below the minimum supported zoom level, or zoom in above the maximum supported zoom level, decreaseZoomLevel()/increaseZoomLevel() will throw an InvalidStateError DOMException.
Note: It is generally a best practice to call decreaseZoomLevel() and increaseZoomLevel() from within a try...catch block because the zoom level could be changed asynchronously by an entity other than the application, which might lead to an error being thrown. For example, the user might directly interact with the captured surface to zoom in or out.
The updateZoomButtonState() function avoids this issue by first making sure both the "Zoom out" and "Zoom in" buttons are enabled. It then does two checks:
zoomLevels array), we disable the "Zoom out" button so the user can't zoom out any further.zoomLevels array), we disable the "Zoom in" button so the user can't zoom in any further.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;
}
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4