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

Question

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

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

...相对于这个...

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

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

标签： htmlhtml5-canvashtml5-videoframe-rategetusermedia

Answer 1

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

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

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

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