ElectronJS захватывает экран с низким качеством
Я тестирую захват экрана с помощью ElectronJS. Я могу сделать снимок экрана, но снятое видео имеет более низкое качество, чем исходное.
- Операционная система: Linux Mint 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>
Здесь вы можете увидеть разницу между моим исходным экраном и захваченным видео. Разница хорошо видна, если сфокусировать иконку оперы.
Ответы 1
Спустя много времени, играя в некоторые игры на geforce now, я столкнулся с той же проблемой. Красный цвет размыт. Как вы заметили на изображении, самая большая разница заключается в значке оперы, который также красный. В электронном коде в вопросе нет прямого скриншота. Это обходной путь получения снимка экрана из видеозахвата. Так что это связано со сжатием цифровых изображений, и, скорее всего, это невозможно исправить.
Читать далее: https://obsproject.com/forum/threads/red-color-blurry-when-recording.64851/
Я сам ответил на это. Любая помощь о том, как получить реальный снимок экрана с помощью electronicjs, а не из видеозахвата, по-прежнему приветствуется.