Here, we are requesting a screen source for capturing. Since more than one result is possible, we will select the capturing source named Entire Screen. This is one of the ways we can get access to the current screen content so that we can record a video, audio, or an image thumbnail.
In our initial implementation, we retrieved the Entire Screen source and logged it to the browser console to show you its structure:
One of the convenient features that the screen capturing source object provides is Thumbnail generation. You can generate a preview thumbnail from the source with custom parameters. The Source object is going to generate a NativeImage instance that we can manipulate further. This is what we are going to reuse for our tool.
Also, the Electron framework allows you to access the screen's details. When working with multi-display...