4

I think this question has been asked for many times. And some of them work either on Chrome or on Firefox.

I tried with the solution:

 .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%;
}

add this to div class, and also change the height of video tag to 

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

The video source is coming from webrtc, using getusermedia, and the video stream can be successfully shaped to circle and present on the webpage right now using the rc class.

The problem is each time, the video source will not be in the center of the circle shape, it stays a little left side. For example, when my face is in front of the camera, only a part of my face was on the right side of the circle shape. it is not in the center of the circle. Anyone knows how to solve this?

Thanks.

Pengzhi Zhou
  • 481
  • 1
  • 6
  • 24

2 Answers2

13

Problem solved. For anyone face with the same problem, and happens in get the oral using bootstrap img-circle method. Please read:

I tried with other way to circle my video stream, using the bootstrap img-circle function which simply add this attribute value to your video:

border-radius: 50%;

This line will make circle only when this video/image is in square, video stream coming back from getusermedia() is in rectangle. if video/image is rectangle, it would be shaped to a oval. so after research, and thanks for this wonderful tutorial: http://fvsch.com/code/video-background/. adding this to your video as well (you also need to set the video width and height to the same):

object-fit: cover;

Problem solved! The video is centered in the circle now. Simply two lines would make things happen. So in total, make a class:

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

and use it as: 

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

That is it.

Pengzhi Zhou
  • 481
  • 1
  • 6
  • 24
0

Try to add ...

align= "center"

to this line of code, within the video tags ...

<div class="rc"><video id="localVideoStream" height="250" autoplay muted></video></div>
Shazan
  • 289
  • 1
  • 3
  • 9
  • Thanks for your reply, but it doesn't work, I don't think it is because the video source is not centered, I guess it is because when the div cover the video stream, the div tries to circle the video from left. – Pengzhi Zhou Feb 29 '16 at 11:45