如何将电子窗口附加到应用程序屏幕并动态调整大小

Posted 2023-03-07

【中文标题】如何将电子窗口附加到应用程序屏幕并动态调整大小

【英文标题】：How to attach an Electron window to an application screen and resize dynamically

【发布时间】：2021-03-24 20:06:43

【问题描述】：

我目前正在编写一个程序，它混合使用 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
  )

);

// In React page / RendererProcess

React.useEffect(async () => 
    desktopCapturer
      .getSources(
        types: ["window", "screen"],
      )
      .then((inputSources) => 
        for (let i = 0; i < inputSources.length; i++) 
          let source = inputSources[i];
          const constraints = 
            audio: false,
            video: 
              mandatory: 
                chromeMediaSource: "desktop",
                chromeMediaSourceId: source.id,
              ,
            ,
          ;

          navigator.mediaDevices.getUserMedia(constraints).then((stream) => 
            inputSources[i].stream = stream;
            console.log('stream', stream)
            // When we got all streams, update the state
            if (i == inputSources.length - 1) 
              setSources([...inputSources]);
            
          );
        
      );
  , []);

...

const launchOverlay = (source) => 
  const streamSettings = source.stream.getVideoTracks()[0].getSettings();
  console.log(source)
  console.log(source.stream)
  console.log(streamSettings)
  createOverlayWindow( width: streamSettings.width, height: streamSettings.height )
;

【参考方案1】：

您可以使用electron-overlay-window 包。

Readme 说它支持 Windows 和 Linux

它通过标题跟踪目标窗口，并将您的应用程序窗口保留在其上方。如果您重新启动目标应用程序/游戏，它也会重新连接自己。唯一的缺点 - 它没有很好的记录。但是基本的演示很简单。

// ...
import  overlayWindow as OW  from 'electron-overlay-window'

// ...
const win = new BrowserWindow(
  ...OW.WINDOW_OPTS, // pay attention here
  width: 800,
  height: 600,
  resizable: false,
  webPreferences: 
    nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
  ,
)

// ... when ready
OW.attachTo(window, 'Untitled - Notepad')

// listen for lifecycle events
OW.on('attach', ev =>  console.log('WO: attach', ev) )
OW.on('detach', ev =>  console.log('WO: detach', ev) )
OW.on('blur', ev =>  console.log('WO: blur', ev))
OW.on('focus', ev =>  console.log('WO: focus', ev))
OW.on('fullscreen', ev => console.log('WO: fullscreen', ev))
OW.on('moveresize', ev => console.log('WO: fullscreen', ev))

您可以在此处查找更多示例：

Ender-O for Elite Dangerous用JS写的(demo video) Awaken PoE Trade for Path of ExileTS写的 Simple demo from author 用 TS 写的（我推荐从这个例子开始）