英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论