Electron 截图踩坑和优化集合

上一篇文章《从零开始用 electron 手撸一个截屏工具》发布之后发现阅读的朋友还不少，不过工具真正使用的时候就发现了问题，所以为了让我们的截图工具更好用，就又做了很多优化，当然了也遇到了很多坑。

截屏效果图:

项目修改后的完整代码依然是之前的地址： github.com/chrisbing/e… 欢迎大家关注

接下来就列举一下解决的问题和具体做法

---

1. 截图一瞬间卡顿问题

先放上一版截图代码

console.time('capture')
desktopCapturer.getSources({
    types: ['screen'],
    thumbnailSize: {
        width: width * scaleFactor,
        height: height * scaleFactor,
    }
}, (error, sources) => {
    console.timeEnd('capture')
    let imgSrc = sources[0].thumbnail.toDataURL()
    let capture = new CaptureRenderer($canvas, $bg, imgSrc, scaleFactor)
})
复制代码

desktopCapturer.getSources 会导致整个程序挂起，挂起时间与屏幕分辨率、屏幕数量和电脑性能有关。 在自用的 Macbook Pro 外接2K 显示器的情况下截图可以卡住2秒以上，而且鼠标还会出现等待的样式，这个体验是相当差了

所以就需要寻求替代方案了，参考 github.com/electron/el… 和 github.com/electron/el… 这两个 Issue，替代方案有两种，第一种用第三方原生的一些截屏程序，第二种是利用getUserMedia

我选了第二种方法，主要是觉得简单吧。第一种方法大家可以尝试一下，也欢迎反馈结果。

下面附上修改后的代码

    const handleStream = (stream) => {
        document.body.style.cursor = oldCursor
        document.body.style.opacity = '1'
        // Create hidden video tag
        let video = document.createElement('video')
        video.style.cssText = 'position:absolute;top:-10000px;left:-10000px;'
        // Event connected to stream

        let loaded = false
        video.onloadedmetadata = () => {
            if (loaded) {
                return
            }
            lo