Electron DesktopCapturer API 无法获取窗口详情的限制:访问主窗口之外的选项卡

huangapple go评论84阅读模式
英文:

Limitations in Obtaining Window Details for Electron DesktopCapturer API: Accessing Tabs Beyond the Main Window

问题

我目前正在开发一个Electron应用程序,并使用desktopCapturer API来获取有关打开窗口的详细信息,包括选项卡,以进行屏幕录制。
尽管我已成功检索到主窗口的详细信息,但在尝试捕获不属于主窗口的选项卡时出现问题。desktopCapturer API似乎只提供有关主窗口的信息,不包括应用程序内其他选项卡或子窗口的详细信息。

以下是获取窗口和屏幕详细信息的代码:

ipcMain.on("get-current-webcontents-id", async (event) => {
  const webContents = BrowserWindow.fromId(event.sender.id).webContents;
  console.log("webContents: ", webContents.getTitle());
  const sources = await desktopCapturer.getSources({
    types: ["window", "screen"],
  });
  console.log("sources: ", sources);
  const currentSource = sources.find(
    (source) => source.name === webContents.getTitle()
  );
  console.log("currentSource: ", currentSource);
  event.returnValue = currentSource.id;
});

然后使用该选项卡ID来获取mediaStream,如下所示:

const recordingStream = async () => {
  // const tabId = ipcRenderer.sendSync("get-current-webcontents-id");
  const tabId = ipcRenderer.sendSync("get-current-webcontents-id");
  return await navigator.mediaDevices.getUserMedia({
    audio: {
      mandatory: {
        chromeMediaSource: "desktop",
        chromeMediaSourceId: tabId,
      },
    },
    video: {
      mandatory: {
        chromeMediaSource: "desktop",
        chromeMediaSourceId: tabId,
      },
    },
  });
};

const startRecording = () => {
  recordingStream().then((stream) => {
    console.log("stream: ", stream);
    // const remoteVideo = document.getElementById("remoteVideo");
    // localVideo.srcObject = stream;
    // localVideo.play();
    remoteVideo.srcObject = stream;
    remoteVideo.play();
    const mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm" });
    const chunks = [];

    mediaRecorder.ondataavailable = (e) => {
      console.log("data available: ", e);
      if (e.data.size > 0) {
        chunks.push(e.data);
      }
    };

    mediaRecorder.onstop = async () => {
      const blob = new Blob(chunks, { type: "video/webm" });
      const bufferArray = await blob.arrayBuffer();
      ipcRenderer.send("recording", bufferArray);
    };

    mediaRecorder.start();

    // 在10秒后停止录制(根据需要进行调整)
    setTimeout(() => {
      mediaRecorder.stop();
    }, 30000);
  });
};
startRecording();

我将非常感谢任何关于如何访问主窗口之外的选项卡详细信息的见解、建议或替代方法。是否有一种方法可以检索Electron应用程序中所有打开的选项卡的信息?

英文:

I'm currently working on an Electron application and using the desktopCapturer API to obtain details about open windows, including tabs, for screen recording purposes.
While I've been successful in retrieving the details of the main window.
The issue arises when trying to capture tabs that are not part of the main window. The desktopCapturer API seems to provide information only about the main window, excluding details about other tabs or child windows within the application.

here is my code to get the window and screen details:

ipcMain.on("get-current-webcontents-id", async (event) => {
  const webContents = BrowserWindow.fromId(event.sender.id).webContents;
  console.log("webContents: ", webContents.getTitle());
  const sources = await desktopCapturer.getSources({
    types: ["window", "screen"],
  });
  console.log("sources: ", sources);
  const currentSource = sources.find(
    (source) => source.name === webContents.getTitle()
  );
  console.log("currentSource: ", currentSource);
  event.returnValue = currentSource.id;
});

and then using that tab id to get the mediaStream like

const recordingStream = async () => {
  // const tabId = ipcRenderer.sendSync("get-current-webcontents-id");
  const tabId = ipcRenderer.sendSync("get-current-webcontents-id");
  return await navigator.mediaDevices.getUserMedia({
    audio: {
      mandatory: {
        chromeMediaSource: "desktop",
        chromeMediaSourceId: tabId,
      },
    },
    video: {
      mandatory: {
        chromeMediaSource: "desktop",
        chromeMediaSourceId: tabId,
      },
    },
  });
};

const startRecording = () => {
  recordingStream().then((stream) => {
    console.log("stream: ", stream);
    // const remoteVideo = document.getElementById("remoteVideo");
    // localVideo.srcObject = stream;
    // localVideo.play();
    remoteVideo.srcObject = stream;
    remoteVideo.play();
    const mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm" });
    const chunks = [];

    mediaRecorder.ondataavailable = (e) => {
      console.log("data available: ", e);
      if (e.data.size > 0) {
        chunks.push(e.data);
      }
    };

    mediaRecorder.onstop = async () => {
      const blob = new Blob(chunks, { type: "video/webm" });
      const bufferArray = await blob.arrayBuffer();
      ipcRenderer.send("recording", bufferArray);
    };

    mediaRecorder.start();

    // Stop recording after 10 seconds (adjust as needed)
    setTimeout(() => {
      mediaRecorder.stop();
    }, 30000);
  });
};
startRecording();

I would greatly appreciate any insights, suggestions, or alternative approaches that could help me access the details of tabs beyond the main window. Is there a way to retrieve information about all open tabs within the electron application?

答案1

得分: 1

请确保在尝试获取标签页 ID 之前,您的选项卡可见。

// 不要在这里调用
startRecording();
// 在主进程中调用类似这样的内容
window.webContents.on("did-finish-load", () => {
  window.webContents.send("start-recording");
})

在渲染进程中监听此事件,然后执行以下操作。
要监听,您可以使用预加载脚本将 ipcRenderer 暴露在录制选项卡中。

英文:

Please make sure that your tab is visible before trying to get the tab id

// insted of calling here
startRecording();
// call something like this in main process
window.webContents.on("did-finish-load", () => {
window.webContents.send("start-recording")
})

listen of this event in renderer process and then execute
to listen you can use preload scripts to expose the ipcRenderer in recording tab

huangapple
  • 本文由 发表于 2023年6月12日 10:35:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76453336.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定