在宽屏上显示高视频时，将webtc视频流内容居中

center webrtc video stream content when displaying tall video on wide screen

本文关键字：视频 webtc 显示 高视频      更新时间：2023-09-26

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

我希望视频显示全屏，我已经使用了以下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参考应用程序。

谢谢。

没有必要做那么多来居中你的视频。只要在显示容器上使用object-fit: cover;(大多数现代浏览器都支持)，所有这些都会自动为您完成。

相关文章：