我目前正在编写一个程序,它混合使用 Electron 和 React-Redux 在屏幕/应用程序之上创建一个覆盖窗口。我成功地创建了透明覆盖窗口并列出了所有有效的媒体流。但我不知道如何让这个新的覆盖窗口匹配所选流的大小/位置并动态调整大小。最重要的是,我希望叠加层单独位于所选流的顶部。
欢迎任何提示:)
// In MainProcess
ipcMain.on(ELECTRON_CREATE_OVERLAY_WINDOW, (event, windowSettings) => {
if (overlayWindow !== null) {
console.error('Trying to create an Overlay window when there is already one!')
return
}
console.log('Creating the Overlay window')
overlayWindow = new BrowserWindow({
width: windowSettings.width,
height: windowSettings.height,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
transparent: true,
frame: false,
alwaysOnTop: true,
});
overlayWindow.setIgnoreMouseEvents(true);
overlayWindow.loadURL("http://localhost:3000/overlay");
overlayWindow.on('closed', () => {
console.log('Overlay window closed')
overlayWindow = null
})
});
Run Code Online (Sandbox Code Playgroud)
// In React page / RendererProcess
React.useEffect(async () …Run Code Online (Sandbox Code Playgroud)