3

我想这个问题已经被问过很多次了。其中一些可以在 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类可以成功地将视频流塑造成圆形并呈现在网页上。

问题是每次，视频源都不会在圆形的中心，它会停留在左边一点。例如，当我的脸在镜头前时，我的脸只有一部分在圆形的右侧。它不在圆的中心。任何人都知道如何解决这个问题？

谢谢。

4

2 回答 2

9

问题解决了。对于任何面临同样问题的人，并且碰巧使用 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>

这就对了。

于 2016-03-01T14:00:07.977 回答
0

尝试添加...

align= "center"

到这行代码，在视频标签内......

<div class="rc"><video id="localVideoStream" height="250" autoplay muted></video></div>
于 2016-02-29T11:42:04.297 回答