First of all, you need to be familiar with the desktopCapturer API that Electron provides. According to the official documentation, this API allows you to do the following:

Now, we are going to walk through the basics and introduce the Snip button click event, which has access to the capturing sources:

1. Update the onSnipClick function implementation according to the following code:

      const onSnipClick = async () => {
          const { desktopCapturer, remote } = window.require('electron');
          const screen = remote.screen;
          
          try {
            const sources = await desktopCapturer.getSources({ types: 
                            ['screen'] });
            const entireScreenSource = sources.find(
              source => source.name === 'Entire Screen'
            );
      
            if (entireScreenSource) {
              console.log(entireScreenSource);
            }
          } catch (err) {
            console.error(err);
          }
       };

Please note that your users may be using more than one monitor when they use your application. In such cases, Electron may find multiple different sources. Instead of Entire Screen, you may have Screen 1, Screen 2, and so on.

For the sake of simplicity, let's make use of the first screen.

2. Update the code so that we can take multiple screens into account and check for Screen 1:

      const entireScreenSource = sources.find(
        source => source.name === 'Entire Screen' 
          || source.name === 'Screen 1'
      );

As you can see, if Electron fails to find the Entire screen source, it is going to check for Screen 1 as well.

In a real-world application, you may want to provide some sort of dialog or settings page to allow users to configure these sources. For example, we could present the user with a list of available sources and allow them to make some of them defaults.

Your users may have different types of monitors with various resolutions and aspect ratios. A good example is a MacBook with a Retina display. This is why we need to calculate the primary display size for the resulting thumbnail. Let's see how we can do this.