html - 帧速率如何以及为什么会改变 HTML5 视频或 Canvas 的纵横比？

Question

当我在下面的代码示例中更改 frameRate 时，我的网络摄像头的宽高比会在 Video 元素上发生变化(请参见下面的代码和附加的图像)。例如，它可以从 800x600 更改为 1280x720。我还尝试将图像绘制到 Canvas 元素上，结果相同。

const constraints = {
  audio: true, video: {frameRate:{max:1}}
};

...相对于这个...

const constraints = {
  audio: true, video: {frameRate:{max:15}}
};

为什么仅通过更改帧速率会发生这种情况？我认为帧速率与尺寸无关。有没有办法预测/计算纵横比的变化？

Answer 1

这取决于您的相机支持的分辨率和帧速率。

在为视频捕获设置限制条件时，您无法真正保证会得到您要求的内容。它们本质上是关于您想要什么的建议。浏览器将尝试以您要求的帧速率和分辨率进行捕获。如果它不能完全匹配(并且如果您没有指定 exact)，它将尽力而为。在您的情况下，最接近您在相机上要求的帧速率的分辨率必须不同。

您需要做的是使用 .videoHeight和 .videoWidth您在其中显示视频的视频元素的属性。

处理此问题的最佳方法是监听 resize事件。这很重要，因为宽度/高度实际上可以随时更改!有时，如果系统跟不上大视频，视频可能会在中途变小。一个更实际的例子是当您旋转手机时，视频也会随之旋转。 resize 事件将触发。