Record overlay at the same time AVFoundation iOS

Question

I have now fully setup the ability to record video using the AVFoundation framework and this is all fine but now I am looking to add an overlay during the record (also visible on the AVCaptureVideoPreviewLayer Layer)

I can add this overlay UIView object to the VideoPreviewLayer but I am struggling how to get the same view to be on the recorded video.This UIView could contain anything from UILabels to UIImageViews.

Hmmm good question. I would think that rather than adding a view you'd need to add a layer. Perhaps also these involves some composting of the overlay onto the video input. Will do some thinking... — Cocoadelica, Apr 03 '13 at 11:07
Yeah that seems to be the approach, add them into a buffer of some kind (keeping high FPS) where composting of the CALayers can occur. just not sure where to get going.. thanks — theiOSDude, Apr 03 '13 at 11:42
I'm interested in finding an answer to this as its related to something I'm working on. Will update as soon as I make any progress. — Cocoadelica, Apr 03 '13 at 11:57
@MightyLeader thanks buddy! - ill let you know if i make any progress — theiOSDude, Apr 03 '13 at 12:02
@MightyLeader did you ever make any progress on this, it's been a while but I now have a requirement to revisit it. — theiOSDude, Jul 31 '13 at 10:14
Why don't you just add your `UIView` as a watermark after the capture is completed? Here's a relevant question http://stackoverflow.com/questions/15932041/how-can-i-add-a-watermark-in-a-captured-video-on-ios — Gabriele Petronella, Aug 30 '13 at 09:30
@GabrielePetronella No, time and other data needs to be added at the time of recording. Its not water mark. Example is Device Heading at that frame etc. — theiOSDude, Aug 30 '13 at 10:06
Then this answer gives some pointers on how to proceed. You need to extract the frames and write them back to the output buffer http://stackoverflow.com/questions/7205820/iphone-watermark-on-recorded-video — Gabriele Petronella, Aug 30 '13 at 10:10
@burrows111 I also stuck at the same functionality. Are you able to record video with overlay? — iRoid Solutions, Oct 02 '14 at 13:15
how to record a dynamic data changes in that view? For example mapView with dot moving in it? — Yaroslav Dukal, May 30 '18 at 23:16

score 10 · Accepted Answer · answered Sep 05 '13 at 12:53

I am not sure if this is the thing you are looking for but i guess you can use Brad Larson's GPU library,there is a class called GPUImageElement which lets you add overlays and views.Please check out the examples,especially the one called Filter showcase and scroll to something called UIElement.

Here is some sample code:

 else if (filterType == GPUIMAGE_UIELEMENT)
        {
            GPUImageAlphaBlendFilter *blendFilter = [[GPUImageAlphaBlendFilter alloc] init];
            blendFilter.mix = 1.0;

            NSDate *startTime = [NSDate date];

            UILabel *timeLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 240.0f, 320.0f)];
            timeLabel.font = [UIFont systemFontOfSize:17.0f];
            timeLabel.text = @"Time: 0.0 s";
            timeLabel.textAlignment = UITextAlignmentCenter;
            timeLabel.backgroundColor = [UIColor clearColor];
            timeLabel.textColor = [UIColor whiteColor];

            uiElementInput = [[GPUImageUIElement alloc] initWithView:timeLabel];

            [filter addTarget:blendFilter];
            [uiElementInput addTarget:blendFilter];

            [blendFilter addTarget:filterView];

            __unsafe_unretained GPUImageUIElement *weakUIElementInput = uiElementInput;

            [filter setFrameProcessingCompletionBlock:^(GPUImageOutput * filter, CMTime frameTime){
                timeLabel.text = [NSString stringWithFormat:@"Time: %f s", -[startTime timeIntervalSinceNow]];
                [weakUIElementInput update];
            }];
        }

OK just hitting on this now, i'll let you know how i get on! Thanks — theiOSDude, Sep 06 '13 at 14:04
Nice find buddy, it's got me on the right path! Thanks for that — theiOSDude, Sep 06 '13 at 15:30
i recording user touch and taps in a view by increasing the value. Is there any possiblity to record that view too? — Muruganandham K, Nov 11 '13 at 10:03

Rhythmic Fistman · Answer 2 · 2013-09-02T05:55:12.470

You want to overlay UIView's, but if you don't mind using CALayers you could add your overlay after export using AVAssetExportSession's AVVideoComposition property. It has a property, AVVideoCompositionCoreAnimationTool *animationTool which lets you add animating CALayers to your output, although I think you're out of luck if your overlay's appearance can't be described by CABasicAnimation. Your example of a display heading may be possible, although I imagine something as simple as a current time counter would not. If you can live with this restriction, the WWDC 2010 code sample 'AVEditDemo' is a good starting point.

If you need more control, you could manually render the overlay UIView onto the capture frames, using [view.layer renderInContext:contextToThenRenderToFrame] and then write these frames to file using AVAssetWriter (once you capture frames to memory you can no longer use AVCaptureMovieFileOutput).

Warning: the frames you are capturing may not arrive at a uniform rate and depend on ambient lighting and even system load. If your overlay changes at a higher rate than the capture video, then you will need to repeat frames in the second solution. This is handled for you by AVVideoComposition in the first solution.

P.S. Solution two is fiddly, but without going into details, iOS7 seems to have made this a lot easier.

score 1 · Answer 3 · answered Sep 05 '13 at 14:03

1

you can find it in AVFoundation Programming Guide in the editing part

There is a section that deals with overlay of image. I will try to put up a sample code /project.

answered Sep 05 '13 at 14:03

Nareshkumar

2,331
2
20
30

Note that [link-only answers](http://meta.stackoverflow.com/tags/link-only-answers/info) are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Sep 05 '13 at 14:07

score 0 · Answer 4 · answered Sep 06 '13 at 01:44

0

To figure out your problem there are two very detailed explanations on the raywenderlich tutorial site. It is a two part tutorial.

The first one is here: http://www.raywenderlich.com/13418/how-to-play-record-edit-videos-in-ios

The second one is here: http://www.raywenderlich.com/30200/avfoundation-tutorial-adding-overlays-and-animations-to-videos

Good Luck and Hope This Helps!!

answered Sep 06 '13 at 01:44

PoKoBros

701
3
9
25

1

Thanks, these turorials only showcase how to go about it after I have finished recording, I need to do it whilst recording (i.e device heading at that frame) – theiOSDude Sep 06 '13 at 08:55
Ok. I have found that the Apple Developer Documentation is very helpful. Here is the documentation for AVFoundation: https://developer.apple.com/library/ios/documentation/AudioVideo/Conceptual/AVFoundationPG/Articles/00_Introduction.html Hope this Helps! – PoKoBros Sep 06 '13 at 11:51

Record overlay at the same time AVFoundation iOS

4 Answers4