Search code examples
node.jselectronscreenshotdesktop-application

ElectronJS captures the screen with low quality

I am testing screen capture with ElectronJS. I can capture my screen but captured video has low quality than original.

  • Operating system: Linux Mint 20
  • Electron version: 11.1.0

Here is my code. I choose my screen and I display the captured screen in electron app by using video element. Some code here is irrelevant i marked with comment lines to make it clear but pasted the whole code in case you want to give it a try yourself.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    #vd {
      position: absolute;
      bottom: 300px;
    }
  </style>
</head>
<body style="background: white;">
  <video id="vd"></video>
  <button id="videoSelectBtn" class="button is-text">
    Choose a Video Source
  </button>
  <footer>
    <script>
      const { desktopCapturer, remote } = require('electron');
      const { Menu } = remote;

      // This part is not important. Just ignore the code here. It is not related with our problem. It just allows me to select my screen.

      const videoSelectBtn = document.getElementById('videoSelectBtn');
      videoSelectBtn.onclick = async () => {
        const inputSources = await desktopCapturer.getSources({
          types: ['screen']
        });

        const videoOptionsMenu = Menu.buildFromTemplate(
          inputSources.map(source => {
            return {
              label: source.name,
              click: () => selectSource(source)
            };
          })
        );

        videoOptionsMenu.popup();
      };

      // Important part starts here

      async function selectSource(source) {
        const stream = await navigator.mediaDevices
          .getUserMedia({
            audio: false,
            video: {
              mandatory: {
                chromeMediaSource: 'desktop',
                chromeMediaSourceId: source.id,
                minWidth: 1920,
                maxWidth: 1920,
                minHeight: 1080,
                maxHeight: 1080
              },
            }
          });

        const videoElement = document.getElementById('vd')

        videoElement.srcObject = stream;
        videoElement.play();
      }
    </script>
  </footer>
</body>
</html>

Here you can see the difference between my original screen and captured video. Difference is clearly visible if you focus opera icon.

difference between original and captured

Solution

  • After a lot of time, when playing some games on geforce now I encountered the same problem. Red color is blurry. As you notice in the image, the biggest difference is in the opera icon which is also red. In electron the code in the question is not directly for screenshot. It's a workaround of getting screenshot from a video capture. So it's related with digital image compression and it's most probably something that cannot be fixed.

    Read further: https://obsproject.com/forum/threads/red-color-blurry-when-recording.64851/