Important limitations of the tab and window display surfaces
The same display area does not look the same when captured as monitor, window or browser using the Screen Capture API
The browser allows users to convert contents of their screen into a video stream that can be recorded and saved as a video files or shared over the network in video calls. The same API is used for taking screenshots.
It is amazing how simple it is to capture screen contents with the Screen Capture API. It is enough to call navigator.mediaDevices.getDisplayMedia() and then do something with the returned MediaStream. The simplest thing that can be done to the stream is visualising it as is in a video HTML element. This short code is sufficient to display a selected area live as a video:
<video autoplay id="video"></video>
<button id="button">Start</button>
<script>
button.addEventListener('click', async () =>
video.srcObject = await navigator.mediaDevices.getDisplayMedia());
</script>Meaningful element ids is the best way to reference HTML elements.
You can try out this tiny but working code https://marianc000.github.io/displaySurfaces/getMediaStreamExample/index.html.
