在 Firefox 网络浏览器上视频宽高比会自动更改

Question

我正在开发一个项目，我正在使用 javascript 访问相机，并且相机的长宽比在 CHROME 上工作正常，但当我在 Firefox 浏览器上测试它时，它会自动更改长宽比

这是 Chrome 结果

和 FIREFOX 结果

和我的代码

<video id="video" width="280px" height="480px"></video>

const videoElement = document.getElementById("video");
const camera = new Camera(videoElement, {
  onFrame: async () => {
    await model.send({ image: videoElement });
  },
  width: 280,
  height: 480,
});
camera.start();

如果有人可以帮忙，请告诉我

Answer 1

您是否尝试过设置CSS宽高比属性？不确定这对你的情况是否有意义，只是一个想法。 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Answer 2

更新

-我在我的视频 ID 中得到了答案，我只需要添加此 CSS 属性

object-fit: cover

Answer 3

可能来不及回答，但如果有人遇到，请提供 2 美分。

不同的浏览器对相机的处理方式不同。 Chrome 因在相机上添加另一层而闻名，并且仅提供与非标准约束紧密匹配的视口。 Firefox 没有任何问题，因为它正在按照规范进行操作。

解决方法/修复：

1. 尝试使用标准的、广泛使用的相机分辨率和宽高比。知道它不是标准的 Web 开发指南，因为浏览器的数量几乎是无限的（由于活动版本）
2. 要每次获得相同的分辨率，请尝试此操作 - 要求最高分辨率的相机。将流渲染到隐藏的元素。使用 requestAnimation 帧循环并将视频元素渲染到 .在此步骤中，仅从视频帧中选择所需的矩形 - 请参阅 drawImage 参数执行相同操作。