2

I have bee trying to add image overlay on video and save video to device library with video overlay.

let myURL = "https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"

let url = URL(string:myURL)

player = AVPlayer(url: url!)

avpController.player = player
avpController.player?.play()
avpController.showsPlaybackControls = false


avpController.view.frame.size.height = videoView.frame.size.height

avpController.view.frame.size.width = videoView.frame.size.width

self.videoView.addSubview(avpController.view)

How to add image overlay on video? any help much appreciated pls..

2 Answers 2

2

I have created this

import UIKit
import AVFoundation
import AVKit
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        shareClicked()
    }

     func shareClicked() {

        let url = URL(string:"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")!

        DispatchQueue.global(qos: .background).async {

            if let urlData = try? Data(contentsOf: url) {


                let documentsPath = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true).first!

                let fileUrl = URL(fileURLWithPath: documentsPath).appendingPathComponent("fffffff.mp4")

                if FileManager.default.fileExists(atPath:fileUrl.path) {

                    try? FileManager.default.removeItem(at:fileUrl)

                    print("removed")
                }

                try? urlData.write(to: fileUrl)


                self.merge(video: fileUrl.path, withForegroundImage:UIImage(named: "images.png")!, completion: { (uuu) in

                            DispatchQueue.main.async {

                                self.play(uuu!)
                            }

                        })


                }

        }

    }
    func play(_ url : URL) {

        DispatchQueue.main.async {

            let vc = AVPlayerViewController()

            vc.player = AVPlayer(url: url)

            vc.player?.externalPlaybackVideoGravity = AVLayerVideoGravity.resizeAspect

            self.present(vc, animated: true, completion: nil)

        }

    }
    private func addAudioTrack(composition: AVMutableComposition, videoUrl: URL) {


        let videoUrlAsset = AVURLAsset(url: videoUrl, options: nil)

        let audioTracks = videoUrlAsset.tracks(withMediaType: AVMediaType.audio)

        let compositionAudioTrack:AVMutableCompositionTrack = composition.addMutableTrack(withMediaType: AVMediaType.audio, preferredTrackID: CMPersistentTrackID())!

        for audioTrack in audioTracks {
            try! compositionAudioTrack.insertTimeRange(audioTrack.timeRange, of: audioTrack, at: CMTime.zero)
        }
    }


    func merge(
        video videoPath: String,
        withForegroundImage foregroundImage: UIImage,
        completion: @escaping (URL?) -> Void) -> () {

        let videoUrl = URL(fileURLWithPath: videoPath)
        let videoUrlAsset = AVURLAsset(url: videoUrl, options: nil)

        // Setup `mutableComposition` from the existing video
        let mutableComposition = AVMutableComposition()
        let videoAssetTrack = videoUrlAsset.tracks(withMediaType: AVMediaType.video).first!
        let videoCompositionTrack = mutableComposition.addMutableTrack(withMediaType: AVMediaType.video, preferredTrackID: kCMPersistentTrackID_Invalid)
        videoCompositionTrack?.preferredTransform = videoAssetTrack.preferredTransform
        try! videoCompositionTrack?.insertTimeRange(CMTimeRange(start:CMTime.zero, duration:videoAssetTrack.timeRange.duration), of: videoAssetTrack, at: CMTime.zero)

        addAudioTrack(composition: mutableComposition, videoUrl: videoUrl)

        let videoSize: CGSize = (videoCompositionTrack?.naturalSize)!
        let frame = CGRect(x: 0.0, y: 0.0, width: videoSize.width, height: videoSize.height)
        let imageLayer = CALayer()
        imageLayer.contents = foregroundImage.cgImage
        imageLayer.frame = CGRect(x: 0.0, y: 0.0, width:50, height:50)


        let videoLayer = CALayer()
        videoLayer.frame = frame
        let animationLayer = CALayer()
        animationLayer.frame = frame
        animationLayer.addSublayer(videoLayer)
        animationLayer.addSublayer(imageLayer)

        let videoComposition = AVMutableVideoComposition(propertiesOf: (videoCompositionTrack?.asset!)!)
        videoComposition.animationTool = AVVideoCompositionCoreAnimationTool(postProcessingAsVideoLayer: videoLayer, in: animationLayer)

        let documentDirectory = NSSearchPathForDirectoriesInDomains(FileManager.SearchPathDirectory.cachesDirectory, FileManager.SearchPathDomainMask.userDomainMask, true).first!
        let documentDirectoryUrl = URL(fileURLWithPath: documentDirectory)
        let destinationFilePath = documentDirectoryUrl.appendingPathComponent("result.mp4")

        do {

            if FileManager.default.fileExists(atPath: destinationFilePath.path) {

                try FileManager.default.removeItem(at: destinationFilePath)

                print("removed")
            }



        } catch {

            print(error)
        }


        let exportSession = AVAssetExportSession( asset: mutableComposition, presetName: AVAssetExportPresetHighestQuality)!

       exportSession.videoComposition = videoComposition
        exportSession.outputURL = destinationFilePath
        exportSession.outputFileType = AVFileType.mp4
        exportSession.exportAsynchronously { [weak exportSession] in
            if let strongExportSession = exportSession {
                completion(strongExportSession.outputURL!)

                //self.play(strongExportSession.outputURL!)
            }
        }

    }

}

And you will get this result

enter image description here

5
  • How to set water marker at top-left corner, i tried to change frame x, y position but its coming correctly..
    – PvDev
    Commented Jun 20, 2019 at 19:36
  • it's not working on my side. can you please eleborate so i can check it.
    – user9137841
    Commented Jan 11, 2021 at 12:46
  • @PvDev It looks like y starts from the bottom. So if you want your watermark on the top left, you should set y to 'videoSize.height' Commented Jun 6, 2022 at 11:46
  • This answer works great, however if the video or animation is long then the user has to wait while until the video has finished exporting. There is a way to do this with AVSynchronizedLayer that makes the animations render as the video is playing.
    – NSCoder
    Commented Nov 4, 2022 at 13:50
  • audio is not working in this code Commented Mar 29 at 9:18
0

Shehata Gamal is right but I think there needs to be update. This code worked but when i added a video from library and added a filter to it then added an overlay then it failed to export video . I found the solution

let videoCompositionTrack = mutableComposition.addMutableTrack(withMediaType: AVMediaType.video, preferredTrackID: kCMPersistentTrackID_Invalid)

Replaced with:

let videoCompositionTrack = mutableComposition.addMutableTrack(withMediaType: AVMediaType.video, preferredTrackID: videoAssetTrack.trackID)
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.