帧速率如何以及为什么会改变 HTML5 视频或 canvas 的纵横比？
How and why does frame rate change the aspect ratio of a HTML5 video or canvas?
当我在下面的代码示例中更改 frameRate 时，我的网络摄像头的宽高比会在视频元素上发生变化（请参见下面的代码和附加的图像）。例如，它可以从 800x600 更改为 1280x720。我也试过将图像绘制到 Canvas 元素上，结果相同。
const constraints = {
audio: true, video: {frameRate:{max:1}}
};
...相对于这个...
const constraints = {
audio: true, video: {frameRate:{max:15}}
};
为什么仅通过更改帧速率会发生这种情况？我认为帧速率与尺寸无关。有没有办法anticipate/calculate宽高比的变化是多少？
这取决于您的相机支持的分辨率和帧速率。
在为视频捕获设置限制条件时，您无法真正保证您会得到您所要求的。它们本质上是关于您想要什么的建议。浏览器将尝试以您要求的帧速率和分辨率进行捕获。如果它不能完全匹配（如果你没有指定 exact），它会尽力而为。在您的情况下，最接近您在相机上要求的帧速率的分辨率必须不同。
您需要做的是使用显示视频的视频元素的 .videoHeight and .videoWidth 属性。
处理此问题的最佳方法是侦听 resize 事件。这很重要，因为 width/height 实际上可以随时更改！有时，如果系统跟不上大视频，视频可能会在中途变小。一个更实际的例子是当您旋转 phone 时，视频会随之旋转。 resize 事件将触发。
当我在下面的代码示例中更改 frameRate 时，我的网络摄像头的宽高比会在视频元素上发生变化（请参见下面的代码和附加的图像）。例如，它可以从 800x600 更改为 1280x720。我也试过将图像绘制到 Canvas 元素上，结果相同。
const constraints = {
audio: true, video: {frameRate:{max:1}}
};
...相对于这个...
const constraints = {
audio: true, video: {frameRate:{max:15}}
};
为什么仅通过更改帧速率会发生这种情况？我认为帧速率与尺寸无关。有没有办法anticipate/calculate宽高比的变化是多少？
这取决于您的相机支持的分辨率和帧速率。
在为视频捕获设置限制条件时，您无法真正保证您会得到您所要求的。它们本质上是关于您想要什么的建议。浏览器将尝试以您要求的帧速率和分辨率进行捕获。如果它不能完全匹配（如果你没有指定 exact），它会尽力而为。在您的情况下，最接近您在相机上要求的帧速率的分辨率必须不同。
您需要做的是使用显示视频的视频元素的 .videoHeight and .videoWidth 属性。
处理此问题的最佳方法是侦听 resize 事件。这很重要，因为 width/height 实际上可以随时更改！有时，如果系统跟不上大视频，视频可能会在中途变小。一个更实际的例子是当您旋转 phone 时，视频会随之旋转。 resize 事件将触发。