Search code examples
iosobjective-ccocoa-touchuiviewcore-animation

Clear Mask on UIView (actually a video view)


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


Solution

  • 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