canvas.captureStream для зрителя внезапно сжимается от исходного размера [webrtc] - PullRequest
Новая
       41

canvas.captureStream для зрителя внезапно сжимается от исходного размера [webrtc]

0 голосов
/ 18 января 2020

У меня есть два монитора с расширенным режимом с использованием 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
      }
    })
  })
...