一、初始化项目

可以使用@quick-start/electron创建项目，npm create @quick-start/electron

二、核心原理

首先获取屏幕和窗口资源，根据https://www.electronjs.org/zh/docs/latest/api/desktop-capturer的描述可以知道desktopCapturer.getSources在主进程中使用，然后传递给渲染进程。该方法可以获取当前系统上所有可用的屏幕和窗口资源。desktopCapturer.getSources会返回一个Promise对象，解析后得到一个包含DesktopCapturerSource对象的数组，每个对象代表一个可以捕获的屏幕或窗口

//window代表窗口，screen代表屏幕
const sources = await desktopCapturer.getSources({ types: ['window', 'screen'] })

由于存在基本限制，因此navigator.mediaDevices.getUserMedia 无法在macOS上进行音频捕获，以我本机windows 10为例，sources得到的数组如下：

[
    {
        "name": "整个屏幕",
        "id": "screen:0:0",
        "thumbnail": {
            "isMacTemplateImage": false
        },
        "display_id": "876094370",
        "appIcon": null
    },
    {
        "name": "xx.vue - xxDemo - Visual Studio Code",
        "id": "window:198558:0",
        "thumbnail": {
            "isMacTemplateImage": false
        },
        "display_id": "",
        "appIcon": null
    }
]

展示出来这两个，可以整个的传递给渲染进程，在渲染进程中处理整个对象数组，也可在主进程中处理好之后传递给渲染进程。如果就想录制整个屏幕就只写screen即可

//screen代表整个屏幕
const sources = await desktopCapturer.getSources({ types: ['screen'] })

渲染进程中使用navigator.mediaDevices.getDisplayMedia获取媒体资源，传入相应的配置，大致如下

const mediaStream = await navigator.mediaDevices.getUserMedia({
    audio: true,//同时录制声音
    video: {
      width: 320,
      height: 240,
      frameRate: 30
    }
})

最后利用html5 MediaRecorder api 传入mediaStream和参数进行录制。

三、视频处理

该方法录制的视频格式为webm，进度条不可以拖动，显示的时间也会少些，使用fix-webm-duration、fix-webm-metainfo等插件效果不理想，使用ffmpeg进行了简单处理，秒完成，ffmpeg命令如下：

ffmpeg -i test.webm -vcodec copy -acodec copy test.mp4

处理过后的视频就能正常拖动，时长也正常

四、结束语

这种录屏方式不同于一般的录屏软件可以被某些软件检测到，之后会用在项目中使用ffmpeg对录制的视频进行优化。