iOS make video background blur

Question

I am making a video app and I am trying to add blur background of the video like that and control the blur effect depending upon the slide value. I am using Objectivc-C for my coding. Can any one please help me how should I do that?

Answer 1

You just need a mask blur view, try to use this code:

@interface ViewController ()

@property UISlider *slider;
@property UIVisualEffectView *visualEffectView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    //VisableRect = 100,100,200,200

    //Add a backgroun picture
    UIImageView* imageV = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 100)];
    imageV.image = [UIImage imageNamed:@"test"];
    [self.view addSubview:imageV];

    _visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
    _visualEffectView.frame = imageV.frame;
    _visualEffectView.alpha = 1.0;
    [self.view addSubview:_visualEffectView];

    //create path
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRect:imageV.bounds];
    UIBezierPath *otherPath = [[UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 200, 200)] bezierPathByReversingPath];
    [maskPath appendPath:otherPath];

    //set mask
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = maskPath.CGPath;
    [_visualEffectView.layer setMask:maskLayer];

    _slider = [[UISlider alloc] initWithFrame:CGRectMake(0, imageV.frame.size.height, 200, 20)];
    _slider.minimumValue = 0;
    _slider.maximumValue = 1;
    _slider.value = 1;
    [_slider addTarget:self action:@selector(updateValue:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:_slider];
}

-(IBAction)updateValue:(id)sender{
    float sVaLue = _slider.value;
    _visualEffectView.alpha = sVaLue;
}

and the effect is like this picture:

You can change the mask layer's path to any shape you want, and if you need to blur a video, just change the imageV to the view you want.

Hope it can help you.