1

我们目前有我们的 webRTC 视频聊天处于测试阶段，我们注意到一个奇怪的问题，即视频的纵横比发生了变化。

当我们使用以下请求视频时。

navigator.mediaDevices.getUserMedia({video: { deviceId: { exact: deviceId }, height: 300, width: 400 }})

一切开始都很好，但我们收到的反馈是用户看到视频“拉伸”了几秒钟，然后才恢复正常。我们设法通过暂停视频源在本地复制了这一点，通过检查视频，纵横比似乎从 400x300 变为 300x150（这与此处的内在值一致https://www.w3.org/TR/2011/ WD-html5-20110113/video.html#video）。

谁能想到为什么会发生这种情况？

4

1 回答 1

2

您的应用程序应处理任何宽高比和分辨率的视频。

对于初学者，您获得的流getUserMedia可能不是您要求的大小。 400x300不是正常的分辨率，并不是所有的浏览器都会裁剪或缩放从网络摄像头获得的内容以适应您的应用程序。即使您确实使用了更常见的东西640x480，例如 ，相机仍然有可能不支持它并且会以不同的分辨率发送视频。

接下来，尤其是在移动设备上，可能会发生旋转，因此原本 4:3 宽高比的视频现在可以变为 3:4。这些分辨率更改发生在中游，没有任何警告。

最后，由于带宽或 CPU 条件的变化，浏览器可以随时选择缩放视频。可能其中一个设备开始过热或电池电量不足。这可能会导致零星的视频缩放。发生这种情况时，我从未见过它会改变纵横比，但这听起来很合理，尤其是在使用奇怪的视频尺寸时。

考虑在您正在播放视频的视频元素上设置以下 CSS：

object-fit: cover;

如果您需要实际获取高度/宽度，请使用视频元素的videoHeight和videoWidth属性。

于 2020-05-14T14:12:06.117 回答