使用Electron录制桌面

Question

我正在构建一个需要desktopCapturer应用程序接口的电子，但我不完全了解如何使用它。

从api官方页面(和这个示例应用程序：https://github.com/hokein/electron-sample-apps/tree/master/desktop-capture)，我看到desktopCapturer只给了我源的id，而不是视频流本身。为此，我应该使用navigator.mediaDevices.getUserMedia()。但是constraints对象不再有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允许在constraints对象上使用mandatory属性，因为typescript不再检查类型兼容性