javascript - 使用 Electron 记录桌面

Question

我正在构建一个需要 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 中那样弹出选择源的提示。我应该怎么做才能让它工作？提前致谢!

Answer 1

我找到了解决方案，至少对于新的解决方案，因为 WebRTC 尚未标准化。将导航器对象复制到变量中并强制转换为 any允许使用 mandatory约束对象上的属性，因为 typescript 不再检查类型兼容性