使用 Electron 记录桌面答案

【问题标题】：Record the desktop using Electron使用 Electron 记录桌面
【发布时间】：2018-12-02 23:51:29
【问题描述】：

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

从 api 官方页面（以及此示例应用程序：https://github.com/hokein/electron-sample-apps/tree/master/desktop-capture）我看到desktopCapturer 只给了我来源的 ID，而不是视频流本身。为此，我应该使用navigator.mediaDevices.getUserMedia()。但是约束对象不再具有mandatory 属性，并且因为我使用的是打字稿，所以如果我尝试使用它会出现错误。

我尝试改用 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 中那样弹出选择源的提示。我应该怎么做才能让它工作？提前致谢！

【问题讨论】：

标签： javascript typescript electron

【解决方案1】：

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

【讨论】：