我正在构建一个需要 desktopCapturer
的 Electron 。 api,但我不完全了解如何使用它。
从 api 官方页面(和这个示例应用程序: https://github.com/hokein/electron-sample-apps/tree/master/desktop-capture )我看到 desktopCapturer
只给我来源的 id,而不是视频流本身。为此,我应该使用 navigator.mediaDevices.getUserMedia()
.但是约束对象不再具有 mandatory
属性,并且因为我使用的是 typescript ,所以如果我尝试使用它,我会收到错误消息。
我尝试使用 deviceId
属性,但我收到此错误:Uncaught (in promise) DOMException: Requested device not found
(在带有网络摄像头的设备上,我会得到网络摄像头流而不是那个错误)。这是我的代码:
import { desktopCapturer, DesktopCapturerSource } from "electron";
function onLoad(){
desktopCapturer.getSources({
thumbnailSize: {
width: 256,
height: 256,
},
types: ["screen", "window"]
}, (error: Error, srcs: DesktopCapturerSource[]) => {
if (error)
throw error;
let video: HTMLVideoElement | null = document.querySelector("video");
for (let src of srcs)
navigator.mediaDevices.getUserMedia({
video:{
deviceId : src.id
}
}).then((stream:MediaStream)=>{
if(video){
video.srcObject = stream;
video.play();
}
})
})
}
document.addEventListener("DOMContentLoaded", onLoad);
我也尝试使用
navigator.getDisplayMedia()
,但我不会像在 Chrome 中那样弹出选择源的提示。我应该怎么做才能让它工作?提前致谢!
最佳答案
我找到了解决方案,至少对于新的解决方案,因为 WebRTC 尚未标准化。将导航器对象复制到变量中并强制转换为 any
允许使用 mandatory
约束对象上的属性,因为 typescript 不再检查类型兼容性
关于javascript - 使用 Electron 记录桌面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53562401/