0

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?

user190245
  • 1,027
  • 1
  • 15
  • 31
bs01
  • 56
  • 7

1 Answers1

1

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

inservice
  • 26
  • 2
  • hi @inservice, Could you please look into my question and provide me some directions ? https://stackoverflow.com/questions/76679712/get-detailed-information-about-sources-optained-through-desktopcapturer-in-elect – Maninder Singh Jul 14 '23 at 11:32