canvas - 到查看器的 canvas.captureStream 突然从原始大小缩小 [webrtc]

Question

我有两台具有扩展模式的显示器，在电子中使用 desktopcapturer。这两个屏幕通过 canvas.captureStream() 合并到一个画布上，分辨率为 3840x1080。接收器收到流媒体并开始播放视频后。在几分钟内，视频的分辨率会从原始分辨率降低。我尝试在查看器中使用 vp8 和 h264 模式，但视频分辨率与原始尺寸不同。但是所有者的视频大小很好。

我该如何解决这个问题？

function onGettingStream(stream) {
  var framerate = 60
  var canvas = document.createElement("canvas")
  var ctx = canvas.getContext('2d')
  canvas.width = stream[0].width * stream.length
  canvas.height = stream[0].height
  stream.forEach(function(monitor, index){
    var video = document.createElement('video')
    video.muted = true
    video.volume = 0
    try {
      video.setAttributeNode(document.createAttribute('autoplay'))
      video.setAttributeNode(document.createAttribute('playsinline'))
      video.setAttributeNode(document.createAttribute('controls'))
    } catch (e) {
      video.setAttribute('autoplay', true)
      video.setAttribute('playsinline', true)
      video.setAttribute('controls', true)
    }
    video.srcObject = monitor
    video.addEventListener('play', function() {
      var $this = this
      (function loop() {
        if (!$this.paused && !$this.ended) {
          ctx.imageSmoothingEnabled = false
          ctx.imageSmoothingQuality = 'high'
          ctx.drawImage($this, monitor.left, 0, monitor.width, monitor.height)
          setTimeout(loop, 1000 / framerate) // drawing at 30fps
        }
      })();
    }, 0);
  })
  setInterval(function(){
    console.log(canvas.width + " x " + canvas.height)
  },5000)
  videosContainer.insertBefore(canvas, videosContainer.firstChild)
  var canvasStream = canvas.captureStream()

  config.attachStream = canvasStream
  callback && callback()
}

desktopCapturer.getSources({
    types: ['screen']
  }).then(sources => {
    var streamObj = []
    var srclength = sources.length
    var screenWidth = screen.width
    var screenHeight = screen.height

    sources.forEach(async function(source, index) {
      var screenname = source.name
      screenname = screenname.substring(0, 6)
      if (screenname == 'Screen' || source.name == 'Entire Screen') {
        try {
          const stream = await navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
              mandatory: {
                chromeMediaSource: 'desktop',
                chromeMediaSourceId: source.id,
                minWidth: screenWidth,
                minHeight: screenHeight,
              }
            }
          })
          if (source.id == 'screen:0:0') {
            stream.width = screenWidth
            stream.height = screenHeight
            stream.left = 0
            streamObj.push(stream)
          } else {
            stream.width = screenWidth
            stream.height = screenHeight
            stream.left = screenWidth
            streamObj.push(stream)
          }
        } catch (e) {
          getDisplayMediaError(e)
        }
      }
      if (index === srclength - 1) {
        onGettingSteam(streamObj)
        return
      }
    })
  })

标签： canvaselectronwebrtc