电子js在desktopCapture外使用main.js

Question

我有一个应用程序，我需要捕捉按钮点击桌面。所有关于YouTube的相关教程都有1-2年的历史.desktopCapturer模块仅在主组件中可用，我不知道如何使用它来捕获按钮单击并开始录制。正如我之前听说的，desktopCapturer模块在呈现组件中也是可用的，但现在它只在主组件上可用。

Answer 1

看看这个：https://www.electronjs.org/docs/latest/api/desktop-capturer

您可以通过将ipc消息从呈现程序进程(使用调用/异步发送和事件)发送到主进程来触发桌面捕获。

下面的示例将捕获电子应用程序窗口：

您的主要流程中的

1. ：

ipcMain.handle('get-sources', () => {
 return desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
   for (const source of sources) {
     if (source.name === 'YOUR ELECTRON APP NAME' && mainWindow) {
       return source.id;
     }
   }
 })
});

web应用程序中的

1. (呈现程序)：

  const handleStream = (stream: any) => {
      const video = document.querySelector('video')
      video!.srcObject = stream
      video!.onloadedmetadata = () => video!.play()
    }

    const handleError = (e: any) => {
      console.log(e)
    }

    const getResource = async () => {
      const sourceId = await window.electron.getSources();
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: 'desktop',
              chromeMediaSourceId: sourceId,
              minWidth: 1280,
              maxWidth: 1280,
              minHeight: 720,
              maxHeight: 720
            }
          }
        })
        handleStream(stream)
      } catch (e) {
        handleError(e)
      }
    }

    getResource();

1. 确保您的DOM:

中有一个视频html标记

      <video width="750" height="500" controls >
        <source src="" type="video/mp4"/>
      </video>

1. 不要忘记在你的电子和网络应用程序中更新你的预加载文件。例如：

declare global {
  interface Window {
    electron: {
      getSources: () => Promise<string>,
    };
  }
}

和电子

contextBridge.exposeInMainWorld('electron', {
  getSources: () => ipcRenderer.invoke('get-sources'),
});