Блог

Главная - Вопросы по программированию - ElectronJS захватывает экран с низким качеством

ElectronJS захватывает экран с низким качеством

#node.js #electron #screenshot #desktop-application

#node.js #electron #скриншот #desktop-приложение

Вопрос:

Я тестирую захват экрана с помощью ElectronJS. Я могу захватить свой экран, но захваченное видео имеет низкое качество, чем оригинал.

  • Операционная система: Linux Mint 20
  • Версия Electron: 11.1.0

Вот мой код. Я выбираю свой экран и отображаю захваченный экран в приложении electron с помощью video element. Некоторый код здесь не имеет значения, я пометил строки комментариев, чтобы было понятно, но вставил весь код на случай, если вы захотите попробовать сами.

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

Здесь вы можете увидеть разницу между моим оригинальным экраном и захваченным видео. Разница хорошо видна, если сфокусировать значок opera.

разница между оригиналом и захваченным

Комментарии:

1. Я сам ответил на это. Любая помощь о том, как получить реальный скриншот с помощью electronjs, а не из видеозаписи, по-прежнему приветствуется.

Ответ №1:

Спустя много времени, играя в некоторые игры на geforce now, я столкнулся с той же проблемой. Красный цвет размыт. Как вы заметили на изображении, самая большая разница заключается в значке opera, который также красный. В electron код в вопросе не предназначен непосредственно для скриншота. Это обходной путь получения скриншота из видеозаписи. Так что это связано со сжатием цифрового изображения, и, скорее всего, это то, что нельзя исправить.

Читайте дальше: https://obsproject.com/forum/threads/red-color-blurry-when-recording.64851 /