在宽屏上显示高视频时居中 webrtc 视频流内容

Question

我正在手机和笔记本电脑之间进行webrtc视频通话，手机处于纵向模式，因此它发送高度大于宽度的流，而笔记本电脑发送具有相反纵横比的流。

我希望视频全屏显示，为此我使用了以下 css：

position:fixed;
left:0;
top:0;
right:0;
bottom:0;
object-fit:contain;
object-position:50% 50%;
minHeight:100%;
minWidth:100%;
height:100%;
width:100%;

这使视频全屏显示，但视频只显示流的顶部，其余部分被截断，js 中有什么方法吗，css视频显示流的中心部分并切掉边缘， 就像它在 Apprtc 参考应用程序中出现的那样。

谢谢。

Answer 1

无需为视频居中做太多事情。只需在显示容器上使用 object-fit: cover;（大多数现代浏览器都支持），所有操作都会自动为您完成。