我被困在第一步，这是屏幕截图捕获过程。 我尝试了使用
capturePage()this.electronService.remote.getCurrentWindow().webContents.capturePage()
.then((img: Electron.NativeImage) => { ... }
desktopCapturer，但这仅捕获我的覆盖窗口（而不捕获桌面屏幕）。这将是一个对我没有用的空白图像。
eption2是使用this.electronService.remote.desktopCapturer.getSources({types: ['screen']}).then(sources => {
for (const source of sources) {
if (source.name === 'Screen 1') {
try {
const mediaDevices = navigator.mediaDevices as any;
mediaDevices.getUserMedia({
audio: false,
video: { // this specification is only available for Chrome -> Electron runs on Chromium browser
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
}).then((stream: MediaStream) => { // stream.getVideoTracks()[0] contains the video track I need
this.handleStream(stream);
});
} catch (e) {
}
}
}
});
：：
MediaStream下一步是对我来说变得模糊的地方。 我该如何处理被收购的
handleStream()从屏幕截图中获取屏幕截图？我看到了很多示例如何在网页上显示此流，但我希望将其发送到我的后端。 this stackoverflow帖子提到了如何做，但我没有使它正常工作。 这就是我实施import * as MediaStreamRecorder from 'msr';
private handleStream(stream: MediaStream): void {
recorder.stop()
const recorder = new MediaStreamRecorder(stream);
recorder.ondataavailable = (blob: Blob) => { // I immediately get a blob, while the linked SO page got an event and had to get a blob through event.data
this.http.post<Result>('http://localhost:5050', blob);
};
// make data available event fire every one second
recorder.start(1000);
}
：
：
blobpython服务器未接受
Blob。 检查
let url = URL.createObjectURL(blob);
window.open(url, '_blank')
byte[]在新窗口中打开斑点。它显示了大概半秒的视频，但我想拥有静态图像。那么如何从中获得特定的快照呢？我也不确定是否只是在邮局中仅发送JavaScript Blob格式，以使Python正确解释它。在Java中，它可以通过简单地发送图像来工作，因此我验证了Python服务器实现如预期的。
使用除了使用desktopCapturer在这里，您可以使用桌面屏幕截图：
const { desktopCapturer } = require('electron')
document.getElementById('screenshot-button').addEventListener('click', () => { // The button which takes the screenshot
desktopCapturer.getSources({ types: ['screen'] })
.then( sources => {
document.getElementById('screenshot-image').src = sources[0].thumbnail.toDataURL() // The image to display the screenshot
})
})
使用``屏幕''将截图整个桌面。 使用“ Windows”将仅对应用程序进行屏幕截图。也请参考以下文档：
Https：//www.electronjs.org/docs/api/desktop-capturer
您可以从这样的视频中获取每个帧：
desktopCapturer.getSources({
types: ['window'], thumbnailSize: {
height: 768,
width: 1366
}
}).then(sources => {
for (let s in sources) {
const content = sources[s].thumbnail.toPNG()
console.log(content)
}
})
desktopCapturer只拍摄视频。因此，您需要从中获得一个帧。您可以为此使用HTML5
canvas。这是一个示例：
https：//ourcodeworld.com/articles/Read/280/creating-screenshots-of-your-app-or-the-screen-in-electron-framework®或使用NPM上可用的一些第三方屏幕快照库。我发现的一个人需要在Linux上安装ImageMagick，但也许还有更多，或者您不需要支持Linux。您需要在主要电子过程中执行此操作，在该过程中，您可以在节点中执行任何操作。
对于那些可能关注的人，这是您使用IPC进行
main过程：
app.whenReady().then(() => {
ipcMain.handle('captureScreenshot', async (e, width, height) => {
const sources = await desktopCapturer.getSources({
types: ['screen'],
thumbnailSize: { width, height }
})
return sources[0].thumbnail.toDataURL()
})
// ...
}
PRELOAD.JS：
contextBridge.exposeInMainWorld('nativeBits', {
captureScreenshot: (width, height) => ipcRenderer.invoke('captureScreenshot', width, height)
})
renderer：或以博客文章的形式（