ElectronJS抓屏质量不高 [英] ElectronJS captures the screen with low quality
本文介绍了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>
在这里您可以看到我的原始屏幕和捕获的视频之间的区别。如果你聚焦歌剧图标，差异就会清晰可见。
推荐答案
过了很长时间，现在在GeForce上玩一些游戏时，我遇到了同样的问题。红色是模糊的。正如你在图像中注意到的，最大的区别是歌剧图标也是红色的。在电子中，问题中的代码不是直接用于截图的。这是一种从视频截图中获取屏幕截图的解决方法。因此，它与数字图像压缩有关，而且很可能是无法修复的。
进一步阅读：https://obsproject.com/forum/threads/red-color-blurry-when-recording.64851/
这篇关于ElectronJS抓屏质量不高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
