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

当我在下面的代码示例中更改帧速率时，我的网络摄像头的纵横比会在视频元素上发生更改（请参见下面的代码和附加图像）。例如，它可以从800x600更改为1280x720。我还尝试将图像绘制到画布元素上，得到了相同的结果

…对这一个

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

---

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

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

在设置视频捕获的约束条件时，您不能真正保证能够得到您想要的。它们本质上是关于你想要什么的建议。浏览器将尝试以您要求的帧速率和分辨率进行捕获。如果它不能精确匹配（如果您没有指定

精确

），它将尽其所能。在您的情况下，与您要求的相机帧速率最接近的帧速率必须是不同的分辨率

您需要做的是使用显示视频的视频元素及其属性

---

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

resize

事件将启动。

您好-谢谢。但是为什么帧速率的变化会导致高度/宽度的变化呢？@swabygw正如我提到的，这取决于你的相机支持什么。例如，您的相机可能支持640x480@60 FPS和1280x720@30 FPS。如果你以每秒60帧的速度请求，你会得到640x480帧。如果你要求每秒30帧，你可能会得到1280x720。啊-我明白你现在的意思了。谢谢你的例子。

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