0

I'm using OpenTok which is a webRTC framework. What I need to do is take the displayed video view and crop it to a circle. Problem is, since this video avatar view will be placed in a view with a clear background, I can't just use a mask as shown in this S.O. question:

Cut Out Shape with Animation

I've also tried to use layer.radius in a UIView category:

-(void)setRoundedViewToDiameter:(float)newSize;
{
    CGPoint saveCenter = self.center;
    CGRect newFrame = CGRectMake(self.frame.origin.x, self.frame.origin.y, newSize, newSize);
    self.frame = newFrame;
    self.layer.cornerRadius = newSize / 2.0;
    self.center = saveCenter;
}

And then applied like so:

- (void) setUserVideoView:(UIView *)view {

    [view setRoundedViewToDiameter:[WSUserView dimForUserAvatar:_sizeIndex]];
    self.userVideo = view;
    [self.userVideo setRoundedViewToDiameter:[WSUserView dimForUserAvatar:_sizeIndex]];
    [self addSubview:self.userVideo];
    [self sendSubviewToBack:self.userVideo];

    [self layoutSubviews];

}

But it's still an uncropped rectangle. Here's the portion of the video view. I'm showing user image avatars at first, but then when a video stream connects I want to replace the image with the video view, but as a circle. The left image is the stream view that I need make a circle.

enter image description here

Also, here's the inspector view of the video view I'm trying to crop. As you can see, it's a OTGLKVideoView class.

enter image description here

Community
  • 1
  • 1
OdieO
  • 6,836
  • 7
  • 56
  • 88
  • 1
    You should set `self.layer.masksToBounds = YES` because this ensures that the layer's sublayers are clipped with the corner radius too. I'm assuming that the problem is arising because the ever-changing sublayer that is updated whenever the video's frame changes is thereby ignoring the corner radius. More details: http://stackoverflow.com/a/11325605/556479 – max_ Dec 20 '14 at 19:30
  • You might want to make sure to use clipsToBounds, too. – Johnny Dec 20 '14 at 20:03
  • @max_ We have a winner! – OdieO Dec 20 '14 at 20:14

1 Answers1

0

Migrated from my comment:

You should set self.layer.masksToBounds = YES because this ensures that the layer's sublayers are clipped with the corner radius too. I'm assuming that the problem is arising because the ever-changing sublayer that is updated whenever the video's frame changes is thereby ignoring the corner radius.

More details can be found through this answer which solves a similar problem: https://stackoverflow.com/a/11325605/556479

Community
  • 1
  • 1
max_
  • 24,076
  • 39
  • 122
  • 211