ElectronJS 以低质量捕获屏幕

Question

我正在使用 ElectronJS 测试屏幕捕获。我可以捕获我的屏幕，但捕获的视频质量低于原始视频。

操作系统：LinuxMint 20
电子版：11.1.0

这是我的代码。我选择我的屏幕，然后使用 video 元素在电子应用程序中显示捕获的屏幕。这里的一些代码是无关紧要的，我用注释行标记以使其清楚，但粘贴了整个代码以防您想自己尝试一下。

<!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>

在这里您可以看到我的原始屏幕和捕获的视频之间的区别。如果你专注于歌剧图标，差异清晰可见。

Answer 1

时间久了，现在在geforce上玩一些游戏的时候遇到了同样的问题。红色是模糊的。正如您在图像中注意到的那样，最大的区别在于歌剧图标也是红色的。在电子中，问题中的代码不是直接用于屏幕截图的。这是从视频捕获中获取屏幕截图的解决方法。所以它与数字图像压缩有关，很可能是无法修复的问题。

进一步阅读：https://obsproject.com/forum/threads/red-color-blurry-when-recording.64851/

ElectronJS 以低质量捕获屏幕

ElectronJS captures the screen with low quality

node.js

electron

screenshot

desktop-application