Overlay issues with preview display and HTML CANVAS

[Fucntion]

请问可以将display输出到指定的canvas元素吗？

感觉这个问题没有得到很好的回答。
#1229

[naive0817]

我有着同样的需求。
目前我的解决方案是: 单独创建一个B窗口输出obs画面，在A窗口需要显示的地方设置背景透明穿透。

---

translation:

I have the same requirement. My current solution is to create a separate B window to output the OBS screen, and set the background of the A window to be transparent where it needs to be displayed.

[Fucntion]

@naive0817 然后强制B窗口固定显示在A窗口下方吗？
不然得话A窗口的dialog或者其他弹出层内容，是无法显示在B窗口之上的。

[naive0817]

@naive0817 然后强制B窗口固定显示在A窗口下方吗？ 不然得话A窗口的dialog或者其他弹出层内容，是无法显示在B窗口之上的。

是的, 我利用了子窗口一定会位于父窗口上方的特性. 以下是代码片段:

const mainWindow = new BrowserWindow({
    autoHideMenuBar: true,
    titleBarOverlay: {
      height: 30,
    },
    ...
  });

const childWindow = new BrowserWindow({
    parent: mainWindow,
    transparent: true,
    frame: false,
    ...
  });


combineMainAndChildWindow(mainWindow, childWindow)
app.obs.bind(mainWindow)

// 将主窗口和子窗口绑定在一起, 实现同步移动和缩放
function combineMainAndChildWindow(mainWindow: BrowserWindow, childWindow: BrowserWindow) {
  function resize() {
    const [width, height] = mainWindow.getContentSize();
    childWindow.setContentSize(width, height);
  }

  function move() {
    const yOffset = 30;
    const [x, y] = mainWindow.getPosition();
    childWindow.setPosition(x + 8, y + yOffset);
  }

  mainWindow.on('resize', () => {
    if (mainWindow.isMinimized()) {
      return;
    }
    resize();
    // move();
  });

  // 监听主窗口的move事件
  mainWindow.on('move', () => {
    if (mainWindow.isMinimized()) {
      return;
    }
    resize();
    move();
  });


  mainWindow.on('moved', () => {
    if (mainWindow.isMinimized()) {
      return;
    }
    move();
  });

  mainWindow.on('maximize', () => {
    resize();
    move();
  });

  mainWindow.on('unmaximize', () => {
    resize();
    move();
  });

  mainWindow.on('minimize', () => {
    childWindow.minimize();
  });

  mainWindow.on('restore', () => {
    childWindow.restore();
    resize();
    move();
  });

  childWindow.on('restore', () => {
    mainWindow.restore();
    resize();
    move();
  });

  // 失去焦点时重定位(解决多屏幕下, 点击B屏幕时, A屏幕的窗口消失问题)
  childWindow.on('blur', () => {
    if (!BrowserWindow.getFocusedWindow()) {
      move();
      resize();
    }
  });

  return [resize, move];
}

[ftaabc]

你们浏览器源有试过吗？怎么实现鼠标键盘交互呢？