electron提供了获取屏幕流的功能desktopCapturer
官网地址:desktopCapturer | Electron
import {desktopCapturer, screen, BrowserWindow} from 'electron';
const screenCapture = () => {
//定义屏幕大小
const getSize = () => {
const { size, scaleFactor } = screen.getPrimaryDisplay();
return {
width: size.width * scaleFactor,
height: size.height * scaleFactor
}
}
const sizeInfo = getSize();
desktopCapturer.getSources({
types: ['window','screen'], // 设定需要捕获的是"屏幕",还是"窗口"
thumbnailSize: sizeInfo
}).then(async sources => {
//获取第一个屏幕
let imageData = sources[0].thumbnail.toDataURL("image/png");
//将base64 流发送到渲染进程
BrowserWindow.getFocusedWindow().webContents.send("source", imageData);
})
}
export {
screenCapture
}
渲染进程
<p>
<img id="image" width="800" height="800" />
</p>
import {ipcRenderer} from 'electron';
setInterval(()=>{
//通知主进程截屏
ipcRenderer.send('screenCapture');
},3000)
ipcRenderer.on('source',(event,image)=>{
$('#image').attr("src",image)
console.log(image)
})
主进程监听是否需要截图
//屏幕截图功能
ipcMain.on("screenCapture",()=>{
screenCapture()
})