截图不清楚，建议用 getUserMedia 而不是 thumbnail 获取截图

WangYuLue commented 4 years ago

packages/react-screenshots/src/electron/app.js

getSource = (e, display) => {
    getSource(display).then(({ thumbnail }) => {
      // 捕捉完桌面后通知主进程
      ipcRenderer.send('SCREENSHOTS::CAPTURED')
      this.setState({ image: thumbnail.toDataURL() })
    })
}

改造成：


  handleStream = (stream, callback) => {
    document.body.style.opacity = '1'
    // 创建隐藏 video 元素
    const video = document.createElement('video')
    video.autoplay = true
    video.style.cssText = 'position:absolute;top:-10000px;left:-10000px;'
    let loaded = false
    video.onplaying = () => {
      if (loaded) return
      loaded = true
      video.style.height = video.videoHeight + 'px'
      video.style.width = video.videoWidth + 'px'

      const canvas = document.createElement('canvas')
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      const ctx = canvas.getContext('2d')
      if (!ctx) return
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

      if (callback) {
        callback(canvas.toDataURL('image/png'))
      }

      video.remove()
      try {
        stream.getTracks()[0].stop()
      } catch (e) {
        console.error('getTracks error')
      }
    }
    // 将流传给 video
    video.srcObject = stream
    document.body.appendChild(video)
  };

  getSource = (e, display) => {
    getSource(display).then((source) => {
      if (!source) {
        console.error('未找到屏幕源')
        return
      }
      const config = {
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: source.id,
            minWidth: 1280,
            minHeight: 720,
            maxWidth: 8000,
            maxHeight: 8000
          }
        }
      }
      navigator.mediaDevices.getUserMedia(config).then((e) => {
        this.handleStream(e, (dataurl) => {
          ipcRenderer.send('SCREENSHOTS::CAPTURED')
          this.setState({ image: dataurl })
        })
      }).catch(e => {
        console.error('屏幕捕获异常', e)
      })
    })
  }

上面的代码没有运行验证，但是思路大概是这样