ElectronJS 以低质量捕获屏幕
ElectronJS captures the screen with low quality
我正在使用 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>
在这里您可以看到我的原始屏幕和捕获的视频之间的区别。如果你专注于歌剧图标,差异清晰可见。
时间久了,现在在geforce上玩一些游戏的时候遇到了同样的问题。红色是模糊的。正如您在图像中注意到的那样,最大的区别在于歌剧图标也是红色的。在电子中,问题中的代码不是直接用于屏幕截图的。这是从视频捕获中获取屏幕截图的解决方法。所以它与数字图像压缩有关,很可能是无法修复的问题。
进一步阅读:https://obsproject.com/forum/threads/red-color-blurry-when-recording.64851/
我正在使用 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>
在这里您可以看到我的原始屏幕和捕获的视频之间的区别。如果你专注于歌剧图标,差异清晰可见。
时间久了,现在在geforce上玩一些游戏的时候遇到了同样的问题。红色是模糊的。正如您在图像中注意到的那样,最大的区别在于歌剧图标也是红色的。在电子中,问题中的代码不是直接用于屏幕截图的。这是从视频捕获中获取屏幕截图的解决方法。所以它与数字图像压缩有关,很可能是无法修复的问题。
进一步阅读:https://obsproject.com/forum/threads/red-color-blurry-when-recording.64851/