Moving overlay on video with touch iOS - ios

Question

I have been working on video editing and I have done the following things successfully:
1.merge multiple videos.
2.Adjust the speed of video.
3.Clip video.
Now I need to show an image over video and then move that image over that video.I have two problems:
PROBLEM 1:
I have successfully done the overlay part i.e adding image over video.But how am I supposed to move this image?
PROBLEM 2:
Also I am not able to check the preview of the video with an image over it.I am able to check that if and only if I save that video At some path and then play it using that path.
Below is the code that I have used to accomplish overlay task:
composition_ = [[AVMutableComposition alloc]init];
AVMutableCompositionTrack *compositionTrack = [composition_ addMutableTrackWithMediaType:AVMediaTypeVideo preferredTrackID:kCMPersistentTrackID_Invalid];
AVAssetTrack *assetTrack = [[self.asset tracksWithMediaType:AVMediaTypeVideo]firstObject];
[compositionTrack insertTimeRange:CMTimeRangeMake(kCMTimeZero, self.asset.duration) ofTrack:assetTrack atTime:kCMTimeZero error:nil];
AVMutableVideoCompositionInstruction *videoCompositionInstruction = [AVMutableVideoCompositionInstruction videoCompositionInstruction];
videoCompositionInstruction.timeRange = CMTimeRangeMake(kCMTimeZero, self.asset.duration);
AVMutableVideoCompositionLayerInstruction *videoCompositionLayerInstruction = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:compositionTrack];
videoCompositionInstruction.layerInstructions = #[videoCompositionLayerInstruction];
[videoCompositionLayerInstruction setTransform:assetTrack.preferredTransform atTime:kCMTimeZero];
[videoCompositionLayerInstruction setOpacity:0.0 atTime:self.asset.duration];
CGSize naturalSize = CGSizeMake(assetTrack.naturalSize.height, assetTrack.naturalSize.width);
videoComposition_ = [AVMutableVideoComposition videoComposition];
videoComposition_.renderSize = CGSizeMake(naturalSize.width, naturalSize.height);
videoComposition_.instructions = #[videoCompositionInstruction];
videoComposition_.frameDuration = CMTimeMake(1, 30);
//start image code from here
CALayer *overlayLayer = [CALayer layer];
overlayLayer.contents = (__bridge id _Nullable)([[UIImage imageNamed:#"overlay_icon.png"]CGImage]);
overlayLayer.frame = CGRectMake(naturalSize.width/2 , naturalSize.height/2, naturalSize.width/8, naturalSize.height/8);
overlayLayer.opacity = 0.5;
[overlayLayer setMasksToBounds:YES];
overlayLayer.backgroundColor = [[UIColor redColor]CGColor];
CALayer *parentLayer = [CALayer layer];
CALayer *videoLayer = [CALayer layer];
parentLayer.frame = CGRectMake(0 , 0, naturalSize.width, naturalSize.height);
videoLayer.frame = CGRectMake(0 , 0, naturalSize.width, naturalSize.height);
videoLayer.backgroundColor = [[UIColor redColor]CGColor];
[parentLayer addSublayer:videoLayer];
[parentLayer addSublayer:overlayLayer];
videoComposition_.animationTool = [AVVideoCompositionCoreAnimationTool videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

Answer 1

-(void)prepareOverlayVideo{
composition_ = [[AVMutableComposition alloc]init];//correct
AVMutableCompositionTrack *compositionTrack = [composition_ addMutableTrackWithMediaType:AVMediaTypeVideo preferredTrackID:kCMPersistentTrackID_Invalid];//correct
[compositionTrack insertTimeRange:CMTimeRangeMake(kCMTimeZero, self.asset.duration) ofTrack:
[[self.asset tracksWithMediaType:AVMediaTypeVideo] objectAtIndex:0]
atTime:kCMTimeZero error:nil];//correct
assetTrack = [[self.asset tracksWithMediaType:AVMediaTypeVideo]firstObject];//correct
AVMutableVideoCompositionInstruction *videoCompositionInstruction = [AVMutableVideoCompositionInstruction videoCompositionInstruction];//correct
videoCompositionInstruction.timeRange = CMTimeRangeMake(kCMTimeZero,self.asset.duration);//correct
AVMutableVideoCompositionLayerInstruction *videoCompositionLayerInstruction = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:assetTrack];//correct
UIImageOrientation videoAssetOrientation_ = UIImageOrientationUp;//correct
BOOL isVideoAssetPortrait_ = NO;
CGAffineTransform videoTransform = assetTrack.preferredTransform;
if (videoTransform.a == 0 && videoTransform.b == 1.0 && videoTransform.c == -1.0 &&
videoTransform.d == 0) {
videoAssetOrientation_ = UIImageOrientationRight;
isVideoAssetPortrait_ = YES;
}
if (videoTransform.a == 0 && videoTransform.b == -1.0 && videoTransform.c == 1.0 && videoTransform.d == 0) {
videoAssetOrientation_ = UIImageOrientationLeft;
isVideoAssetPortrait_ = YES;
}
if (videoTransform.a == 1.0 && videoTransform.b == 0 && videoTransform.c == 0 && videoTransform.d == 1.0) {
videoAssetOrientation_ = UIImageOrientationUp;
}
if (videoTransform.a == -1.0 && videoTransform.b == 0 && videoTransform.c == 0 && videoTransform.d == -1.0) {
videoAssetOrientation_ = UIImageOrientationDown;
}
//[videoCompositionLayerInstruction setOpacityRampFromStartOpacity:1.f toEndOpacity:0.5f timeRange:CMTimeRangeMake(kCMTimeZero, assetTrack.timeRange.duration)];
// CGFloat FirstAssetScaleToFitRatio = 320.0/assetTrack.naturalSize.height;
// CGAffineTransform FirstAssetScaleFactor = CGAffineTransformMakeScale(FirstAssetScaleToFitRatio,FirstAssetScaleToFitRatio);
// [videoCompositionLayerInstruction setTransform:CGAffineTransformConcat(assetTrack.preferredTransform, FirstAssetScaleFactor) atTime:kCMTimeZero];
[videoCompositionLayerInstruction setTransform:assetTrack.preferredTransform atTime:kCMTimeZero];
[videoCompositionLayerInstruction setOpacity:0.0 atTime:self.asset.duration];
videoCompositionInstruction.layerInstructions = [NSArray arrayWithObjects:videoCompositionLayerInstruction,nil];//correct
if(isVideoAssetPortrait_){
naturalSize = CGSizeMake(assetTrack.naturalSize.height, assetTrack.naturalSize.width);
}
else {
naturalSize = assetTrack.naturalSize;
}
videoComposition_ = [AVMutableVideoComposition videoComposition];
videoComposition_.renderSize = CGSizeMake(naturalSize.width, naturalSize.height);
videoComposition_.instructions = #[videoCompositionInstruction];
videoComposition_.frameDuration = CMTimeMake(1, 30);
}
AnimationTool Part
CGRect newRect = [self.view convertRect:overlayView.frame toView:videoRectView];
CGFloat current_x = newRect.origin.x;
CGFloat current_y;
if(isSizeChanged && overlayView.frame.size.width>60)
current_y = newRect.origin.y+50;
else
current_y = newRect.origin.y;
overlayView.frame = newRect;
imageView_.frame = newRect;
CGPoint overlayPoint = [self mapSize:assetTrack.naturalSize withSize:playerLayer.videoRect.size forPoint:CGPointMake(current_x, current_y)];
//invert Y-axis
CGFloat finalOverlayPoint_y = CGRectGetMaxY(CGRectMake(0, 0, naturalSize.width, naturalSize.height)) - overlayPoint.y-50;
CGPoint newOverlayPoint = CGPointMake(overlayPoint.x, finalOverlayPoint_y);
overlayView.layer.frame = CGRectMake(overlayPoint.x, newOverlayPoint.y,finalOverlayRect.size.width, finalOverlayRect.size.height);
imageView_.layer.frame = CGRectMake(overlayPoint.x, newOverlayPoint.y,finalOverlayRect.size.width, finalOverlayRect.size.height);
if(isShapeACircle)
imageView_.layer.cornerRadius = finalOverlayRect.size.height/2;
else
imageView_.layer.cornerRadius = 0.f;
imageView_.layer.borderWidth = 5.f;
overlayView.layer.contentsScale = [UIScreen mainScreen].scale;
[overlayView.layer setMasksToBounds:YES];
//add animation
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:#"opacity"];
[animation1 setDuration:0.5 ];
[animation1 setFromValue:[NSNumber numberWithFloat:1.0]];
[animation1 setToValue:[NSNumber numberWithFloat:1.0]];
//[animation1 setBeginTime:[self.timeLabel.text floatValue]];
[animation1 setBeginTime:_overlayTime];
[animation1 setRemovedOnCompletion:YES];
[animation1 setFillMode:kCAFillModeForwards];
[imageView_.layer addAnimation:animation1 forKey:#"animateOpacity"];
imageView_.layer.opacity = 0.0;
CALayer *parentLayer = [CALayer layer];
CALayer *videoLayer = [CALayer layer];
parentLayer.frame = CGRectMake(0 , 0, naturalSize.width, naturalSize.height);
parentLayer.backgroundColor = [[UIColor redColor]CGColor];
videoLayer.frame = CGRectMake(0 , 0, naturalSize.width, naturalSize.height);
//CALayer *watermarkLayer = [self setWaterMarkInLayer:videoLayer];
[parentLayer addSublayer:videoLayer];
[parentLayer addSublayer:imageView_.layer];
//[parentLayer addSublayer:watermarkLayer];
videoComposition_.animationTool = [AVVideoCompositionCoreAnimationTool videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];
//Note this method.....This is the success part
-(CGPoint)mapSize:(CGSize)assetTrack_size withSize:(CGSize)videoLayer_size forPoint:(CGPoint)overlay_point{
NSLog(#"%f",playerLayer.videoRect.size.width);
NSLog(#"%f",playerLayer.videoRect.size.height);
NSLog(#"%f",playerLayer.videoRect.origin.x);
NSLog(#"%f",playerLayer.videoRect.origin.y);
CGFloat assetTrack_width = assetTrack_size.width;
CGFloat assetTrack_height = assetTrack_size.height;
CGFloat videoLayer_width = videoLayer_size.width;
CGFloat videoLayer_height = videoLayer_size.height;
CGFloat ratio_width = assetTrack_width/videoLayer_width;
CGFloat ratio_height = assetTrack_height/videoLayer_height;
CGFloat new_width = overlay_point.x * ratio_width;
CGFloat new_height = overlay_point.y * ratio_height;
finalOverlayRect = CGRectMake(0, 0,overlayView.frame.size.width * ratio_width , overlayView.frame.size.height * ratio_height) ;
CGPoint overlayPoint = CGPointMake(new_width, new_height);
return overlayPoint;
}
#pigeon_39 This is the code for overlay.I know its a bit late, but I was on a break for a while, and I had no recollection of this question whatsoever.If it helps you now, you can refer to this answer.If you face any problems, we can continue the conversation on chat here.Ask me wherever you get stuck but do some research on your own first.Note that this is not the complete code as I will have to do a lot of editing to provide you the actual code.My code involves a lot of conditions.All the best mate :-)

Answer 2

I searched everywhere on the net but I don't seem to find the solution.Even the apple docs about "Video Editing" have no mention about this.
Finally I came up with my own logic.Here is what I will do:
1.I will capture a video and move to next page with an image on it.
2.Add gesture to the image to move it anywhere over the video.
3.Then add the above code to merge that image over the video.
I thin this is the perfect solution.I will post the code in 2 days i.e. when I write it. But the logic is pretty straight forward.