Custom shaped MPMoviePlayerController - ios

Question

How can I achieve custom shaped movie in IOS?
I have a UIBezierPath and CAShapeLayer. I would like to display movie in that shape.
I'm looking for the effect like skew - http://i57.tinypic.com/16020ps.jpg
I'm using QR code reader and there I get the boundaries(UIBezierPath) of the found qr code. I want to be able to display the video over the qr code to achieve AR effect.
Thanks for the help!

Answer 1

You can do this by creating a mask layer on top of the MPMoviePlayerController view.
I just tested this by creating a simple single view project. I added the QuartzCore and MediaPlayer frameworks.
This is the code from ViewController.m:
#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
#import <MediaPlayer/MediaPlayer.h>
#interface ViewController ()
#property (nonatomic, strong) MPMoviePlayerController *movieController;
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
NSString *moviePath = [[NSBundle mainBundle] pathForResource:#"myMovie" ofType:#"mov"];
NSURL *url = nil;
if (moviePath != nil) {
url = [NSURL fileURLWithPath:moviePath];
}
self.movieController = [[MPMoviePlayerController alloc] initWithContentURL:url];
self.movieController.view.frame = CGRectMake(50, 50, 400, 400);
[self.view addSubview:self.movieController.view];
[self.movieController play];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.movieController.view.bounds;
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(118.81, 189.76)];
[bezierPath addCurveToPoint: CGPointMake(188.77, 37.51) controlPoint1: CGPointMake(118.81, 189.76) controlPoint2: CGPointMake(138.99, 36.06)];
[bezierPath addCurveToPoint: CGPointMake(255.06, 158.26) controlPoint1: CGPointMake(238.56, 38.96) controlPoint2: CGPointMake(226.1, 78.56)];
[bezierPath addCurveToPoint: CGPointMake(369.21, 200.26) controlPoint1: CGPointMake(284.02, 237.96) controlPoint2: CGPointMake(314.4, 134.08)];
[bezierPath addCurveToPoint: CGPointMake(269.79, 300.02) controlPoint1: CGPointMake(424.02, 266.44) controlPoint2: CGPointMake(319.71, 329.77)];
[bezierPath addCurveToPoint: CGPointMake(151.95, 300.02) controlPoint1: CGPointMake(219.86, 270.26) controlPoint2: CGPointMake(202.68, 327.08)];
[bezierPath addCurveToPoint: CGPointMake(15.71, 284.27) controlPoint1: CGPointMake(101.22, 272.95) controlPoint2: CGPointMake(-0.1, 369.78)];
[bezierPath addCurveToPoint: CGPointMake(118.81, 189.76) controlPoint1: CGPointMake(31.51, 198.75) controlPoint2: CGPointMake(118.81, 189.76)];
[bezierPath closePath];
maskLayer.fillColor = [[UIColor whiteColor] CGColor];
maskLayer.backgroundColor = [[UIColor clearColor] CGColor];
maskLayer.path = [bezierPath CGPath];
self.movieController.view.layer.mask = maskLayer;
}
#end
(The bezier path is a hat shape created quickly in PaintCode, so it's a bit odd.)