Screenshot feature limitations

[annehaley]

Currently, we use html2canvas for our screenshot tool. This mostly works well, but it has some limitations:

1. The screenshot tool does not work with the map comparison mode. html2canvas does not support the CSS clip-path functionality that the vue-maplibre-compare uses. (Add support for clip-path niklasvh/html2canvas#2016)
2. When panels are undocked from their sidebar and the sidebar is collapsed, the screenshot tool does not capture the floating panels. This is because html2canvas does not include children of elements with visibility:hidden even if the children have visibility:visible. (Canvas not rendering visible children of hidden element niklasvh/html2canvas#2171)

@BryonLewis suggested that we could try getDisplayMedia for our screenshots instead: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia.

[annehaley]

Upon further reading, the MDN docs state that the getDisplayMedia API will prompt the user to share their screen. This prompt is a mandatory security feature, but it may be unwanted friction for the user in the case of the screenshot feature. The prompt is the same browser prompt one sees to share screen on a meeting, so this may alarm users and give the impression that their screen will be shared with someone else.