如何使用css,html将视频源置于圆形中心

Question

我认为这个问题已被多次提出过.其中一些可以在Chrome或Firefox上运行.

我尝试了解决方案:

 .rc{
 width: 250px;
 height: 250px;
 border-radius: 100%;
 -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
 -webkit-transform: rotate(0.000001deg); 
 -webkit-border-radius: 100%; 
 -moz-border-radius: 100%;
}

将此添加到div类,并将视频标记的高度更改为

<div class="rc"><video id="localVideoStream" height="250" autoplay muted></video></div>

视频源来自webrtc,使用getusermedia,视频流可以成功地成形为圆圈,并使用rc类立即显示在网页上.

问题是每次,视频源都不会处于圆形的中心,它会保持一点左侧.例如,当我的脸在镜头前时,只有一部分脸部位于圆形的右侧.它不在圆圈的中心.谁知道如何解决这个问题？

谢谢.

Answer 1

问题解决了.对于任何面临同样问题的人,并且发生在使用bootstrap img-circle方法获取口语.请阅读:

我尝试用其他方式圈出我的视频流,使用bootstrap img-circle函数,只需将此属性值添加到您的视频中:

border-radius: 50%;

此行仅在此视频/图像为方形时生成圆形,从getusermedia()返回的视频流为矩形.如果视频/图像是矩形,它将被塑造成椭圆形.经过研究,感谢这个精彩的教程:http://fvsch.com/code/video-background/.将此添加到您的视频中(您还需要将视频宽度和高度设置为相同):

object-fit: cover;

问题解决了!视频现在以圆圈为中心.只需两行即可实现.所以总的来说,上一堂课:

.video-circle {
border-radius: 50%;
object-fit: cover;
}

并将其用作:

<video id="localVideoStream"  class="video-circle" width="200" height="200" autoplay muted></video>

这就对了.