目前我们的webRTC视频聊天处于测试阶段，我们注意到一个奇怪的问题，视频的纵横比发生了变化。
当我们使用以下方式请求视频时。
navigator.mediaDevices.getUserMedia({video: { deviceId: { exact: deviceId }, height: 300, width: 400 }})
一切开始都很好，但我们收到的反馈是，用户看到视频 "拉伸 "了几秒钟才恢复正常。我们已经设法通过暂停视频源在本地复制这个问题，通过检查视频，似乎长宽比从400x300变为300x150（这与这里的固有值相吻合）。https:/www.w3.orgTR2011WD-html5-20110113video.html#video).
有人能想到为什么会发生这种情况吗？
您的应用程序有望处理任何纵横比和分辨率的视频。
首先，您获得的流媒体与 getUserMedia 可能不是您要求的尺寸。 400x300 不是一个正常的分辨率，而且不是所有的浏览器都会裁剪或缩放他们从网络摄像头得到的东西来适应你的应用程序。 即使你使用更常见的东西，如 640x480但仍有可能是相机不支持，会以不同的分辨率发送视频。
其次，特别是移动设备，可能会发生旋转，所以你的视频，原来是4:3的纵横比，现在可能是3:4。 这些分辨率的变化会在没有任何警告的情况下在中途发生。
最后，由于带宽或CPU条件的变化，浏览器可以随时选择缩放视频。 也许其中一台设备开始过热或电池电量不足。 这可能会导致零星的视频缩放。 我从未见过它在发生这种情况时改变纵横比，但这听起来很有道理，尤其是在使用奇葩视频尺寸时。
考虑在你正在播放视频的视频元素上设置以下CSS。
object-fit: cover;
如果你需要实际获得高度宽度，使用以下的CSS videoHeight 和 videoWidth 视频元素的属性。