Javascript navigator.mediaDevices.getUserMedia 在源中获取宽度和高度

Question

我正在使用 this code ，但是当它获取源时，高度和宽度由下面代码块中的约束设置，但我想获取视频的实际大小。

  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: desktop_id,
        minWidth: 990,
        maxWidth: 990,
        minHeight: 770,
        maxHeight: 770
      }
    }
  }).then(gotStream).catch(getUserMediaError);

生成的捕获图像当然是 990x770，但这会导致图像周围有黑色边框。来源的真实视频是 995x744，但由于给定的限制，它获得了带有黑色边框的新尺寸。如果我没有设置任何约束，则会抛出一个错误，指出宽度为 0，因此需要设置某种宽度。

即使手动将 995x744 的视频源大小输入到约束中也不起作用，因为它似乎需要比源更大的区域来捕获它。不确定为什么不能按原样捕获它？也许我做错了什么可以解决这个问题？

如何在捕获视频时获取视频的大小，以便将约束设置为视频的实际大小？因此捕获的图像与源视频的大小完全相同，没有黑边等。

Answer 1

答案很简单。

在一个简单的数学运算中你可以看到:

990 / 770 = 1.28
995 / 744 = 1.33

因此 - 当您要求 1.28 的强制 比率时 - 当然您会得到黑色边框。您违反了相机支持的 ​​1.33 的真实纵横比。

避免黑边的唯一方法是要求 width 和 height 的宽高比为 1.33。

希望这对您有所帮助。