I’m creating two layers for a video and trying to display my own URL with a video on each separate layer. What am I doing wrong? I have only the first video displayed in the final result on the video layer and on the overlay layer.
Issue: In the final output video, I only see the video from the first URL (videoURL) on both the video layer and the overlay layer. The overlay layer does not display the video from overlayVideoURL as expected.
What I’ve Tried:
I checked the CALayer frames and confirmed that they are set correctly.
Verified that AVVideoCompositionCoreAnimationTool is used correctly.
Confirmed that AVMutableComposition has both tracks inserted.
Questions:
Is there a mistake in how I am setting up the video layers?
How can I ensure that each layer displays its respective video correctly?
Additional Details:
The videos are correctly loaded and inserted into the AVMutableComposition.
The final composition only displays the video from videoURL on both layers.
func makeVideo(videoURL: URL, overlayVideoURL: URL, forName name: String, onComplete: @escaping (URL?) -> Void) {
let asset = AVURLAsset(url: videoURL)
let overlayAsset = AVURLAsset(url: overlayVideoURL)
let composition = AVMutableComposition()
guard
let compositionTrack = composition.addMutableTrack(withMediaType: .video, preferredTrackID: kCMPersistentTrackID_Invalid),
let assetTrack = asset.tracks(withMediaType: .video).first,
let overlayCompositionTrack = composition.addMutableTrack(withMediaType: .video, preferredTrackID: kCMPersistentTrackID_Invalid),
let overlayAssetTrack = overlayAsset.tracks(withMediaType: .video).first
else {
print("Something is wrong with the assets.")
onComplete(nil)
return
}
do {
let timeRange = CMTimeRange(start: .zero, duration: asset.duration)
try compositionTrack.insertTimeRange(timeRange, of: assetTrack, at: .zero)
try overlayCompositionTrack.insertTimeRange(timeRange, of: overlayAssetTrack, at: .zero)
} catch {
print(error)
onComplete(nil)
return
}
let videoInfo = orientation(from: assetTrack.preferredTransform)
let videoSize = videoInfo.isPortrait ? CGSize(width: assetTrack.naturalSize.height, height: assetTrack.naturalSize.width) : assetTrack.naturalSize
let videoComposition = AVMutableVideoComposition()
videoComposition.renderSize = videoSize
videoComposition.frameDuration = CMTime(value: 1, timescale: 30)
let instruction = AVMutableVideoCompositionInstruction()
instruction.timeRange = CMTimeRange(start: .zero, duration: composition.duration)
let layerInstruction = compositionLayerInstruction(for: compositionTrack, assetTrack: assetTrack)
let overlayLayerInstruction = compositionLayerInstruction(for: overlayCompositionTrack, assetTrack: overlayAssetTrack)
instruction.layerInstructions = [layerInstruction, overlayLayerInstruction]
videoComposition.instructions = [instruction]
let videoLayer = CALayer()
videoLayer.frame = CGRect(origin: .zero, size: videoSize)
let overlayVideoLayer = CALayer()
overlayVideoLayer.frame = CGRect(x: videoSize.width / 4, y: videoSize.height / 4, width: videoSize.width / 2, height: videoSize.height / 2)
let outputLayer = CALayer()
outputLayer.frame = CGRect(origin: .zero, size: videoSize)
outputLayer.addSublayer(videoLayer)
outputLayer.addSublayer(overlayVideoLayer)
videoComposition.animationTool = AVVideoCompositionCoreAnimationTool(postProcessingAsVideoLayers: [videoLayer, overlayVideoLayer], in: outputLayer)
guard let export = AVAssetExportSession(asset: composition, presetName: AVAssetExportPresetHighestQuality) else {
print("Cannot create export session.")
onComplete(nil)
return
}
let videoName = UUID().uuidString
let exportURL = URL(fileURLWithPath: NSTemporaryDirectory()).appendingPathComponent(videoName).appendingPathExtension("mov")
export.videoComposition = videoComposition
export.outputFileType = .mov
export.outputURL = exportURL
export.exportAsynchronously {
DispatchQueue.main.async {
switch export.status {
case .completed:
onComplete(exportURL)
default:
print("Something went wrong during export.")
print(export.error ?? "unknown error")
onComplete(nil)
}
}
}
}
2
Try using AVMutableVideoCompositionLayerInstruction instead of AVMutableVideoComposition. The plan is like this:
// Here how to build it:
let mainInstruction = AVMutableVideoCompositionInstruction()
// Set time of your result video duration
mainInstruction.timeRange = timeRange
// For each video you'll need a separate AVMutableVideoCompositionInstruction
let videoInstruction = AVMutableVideoCompositionInstruction()
let overlayInstruction = AVMutableVideoCompositionInstruction()
// Now how to build and setup those instructions
// Here's your asset
let asset = AVAsset(url: url)
if let audioTrack = asset.tracks(withMediaType: .audio).first,
let compositionAudioTrack = composition.addMutableTrack(withMediaType: .audio, preferredTrackID: kCMPersistentTrackID_Invalid) {
// Add audio track
}
let track = composition.addMutableTrack(withMediaType: .video, preferredTrackID: kCMPersistentTrackID_Invalid)!
try! track.insertTimeRange(CMTimeRange(start: .zero, duration: asset.duration), of: asset.tracks(withMediaType: .video).first!, at: .zero)
let instruction /*videoInstruction/overlayInstruction*/ = AVMutableVideoCompositionLayerInstruction(assetTrack: track)
/* frameTransform shoule be calculated to move video track to the proper location on the layer */
instruction.setTransform(transform.concatenating(frameTransform), at: .zero)
// It will combine instructions for several layers
mainInstruction.layerInstructions = [videoInstruction, overlayInstruction]
// Video composition should have only one instruction
videoComposition.instructions = [mainInstruction]
// Then apply add videoComposition to a single layer, this single layer will render both videos in the locations determined by trannsform
videoComposition.animationTool = AVVideoCompositionCoreAnimationTool(postProcessingAsVideoLayer: videoLayer, in: parentLayer)
Sorry for a messy in the code, the sample that it’s based on had much more mess, so I’ve tried to extract only important stuff from it