Chrome <video> 在全屏模式下被挤压答案

【问题标题】：Chrome <video> squished while in fullscreen modeChrome <video> 在全屏模式下被挤压
【发布时间】：2021-12-23 12:01:15
【问题描述】：

我收到了一个网络摄像头源，我们正在使用以下限制选项：

const maxSize = 1920;
stream.getTracks()[0].getTracks()[0].applyConstraints({
    width: {
        exact: maxSize,
    },
    height: {
        exact: maxSize,
    },
    aspectRatio: {
        exact: 1.0,
    }
});

如果我之后检查以确保约束已应用：

const settings = this.stream.getTracks()[0].getSettings();
console.log('video settings: ', settings);

我可以看到宽度和高度都是 1920，纵横比是 1.0。网络摄像头可以达到 4000x3000 左右。

然后我将其流式传输到一个高度和宽度为 1920 像素的视频标签。

<div class='container'>
  <video id="selfie-video" width="1920" height="1920" />
</div>

.container {
  width: 1080px;
  height: 1920px;
  overflow: hidden;
}
#selfie-video {
  margin: 0;
  padding: 0;
  object-fit: cover;
  width: 1920px;
  height: 1920px;
  left: -420px;
  position: absolute;
  top: 0;
}

我在设置为纵向模式 1080x1920 的屏幕上显示此内容。当我在 Chrome 中测试它时，我完全没有问题，除非你按 F11 并将 Chrome 置于全屏模式，或者如果你在电子中打开它。一旦 Chrome 进入全屏模式或您在电子中打开它，宽度就会被限制为 1080 像素。它允许宽度小于 1080 像素，但不能超过。我可以将它设置为像 4000px 宽度这样疯狂的东西，它完全被忽略了。高度也是如此，您可以将高度设置为最高 1920 像素，但如果您超过该高度，它将被忽略。

这导致图像被压扁，因为 1920 像素宽被压缩成 1080 像素。

我们之所以做 1920x1920 是因为我们让人们旋转图像，所以我们使用 css 做一个transform: rotate(90deg);，所以它需要两个尺寸都是 1920px。

我找不到任何文档或解释说明为什么会发生这种情况。除了 <video> 之外，任何其他类型的元素都没有溢出问题。

【问题讨论】：

能否请您发布 DOM 中元素的屏幕截图和它的盒子模型以帮助澄清？还想知道left: -420 在您的设计环境中完成了什么，当我在尝试中删除它时，它似乎回到了 1:1 方面，但我可能缺乏正确的设置。经过一些尝试后，我无法重现，但如果您能够在 codepen 或 stackblitz 内进行也可以帮助进行故障排除。
您的容器 CSS 将视频限制为 1080 宽。为什么不将该宽度设置为 1920？
我会在早上得到一个截图。 left: -420px 的原因是将视频在父容器中居中。就像我说的，当您没有全屏模式下的 chrome 时，一切正常。这很奇怪，仅在该模式下才适用。

标签： javascript html html5-video chromium webcam

【解决方案1】：

所以我们想出了如何诱骗它正确显示。我们必须添加一个top: 5px; position: fixed; 我猜它会欺骗 Chrome 认为视频不是全屏的。它并不完美，因为我们在视频上方有一个小栏，但它会起作用。我附上了 3 张截图，一张让你可以看到它在工作并且视频没有被压扁，然后两张禁用了这 2 个 css 规则。

【讨论】：