I am testing screen capture with ElectronJS. I can capture my screen but captured video has low quality than original.
- Operating system: Linux Mint 20
- Electron version: 11.1.0
Here is my code. I choose my screen and I display the captured screen in electron app by using video element. Some code here is irrelevant i marked with comment lines to make it clear but pasted the whole code in case you want to give it a try yourself.
<!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>
Here you can see the difference between my original screen and captured video. Difference is clearly visible if you focus opera icon.
