How can I change the black background when create track iteam with image resource

[mvn-tony-hn]

I make a simple demo to add text overlay on video as your suggestion:

(About text overlay, I suggest you add text's image to Timeline.passingThroughVideoCompositionProvider)

It works but I got the issue: the text overlay always had a black background.

I understand you used 1 black video to render image as video frame but in this case how can I delete this black background

P/s: How can I custom the video resource to create a track item from different resource type as a GIF file?

[vitoziv]

You may show your code or/and screenshot that can help me understand your question.

You can subclass from ImageResource, and override func image(at time: CMTime, renderSize: CGSize) -> CIImage?, then provide custom image in that method

[mvn-tony-hn]

I write the simple code as below:

`

    let renderSize = CGSize(width: 1920, height: 1080)

    let backgroundTrackItem: TrackItem = {
        let url = Bundle.main.url(forResource: "background_video", withExtension: "mp4")!
        let resource = AVAssetTrackResource(asset: AVAsset(url: url))
        resource.selectedTimeRange = CMTimeRange.init(start: CMTime(seconds: 0, preferredTimescale: 600), end: CMTime(seconds: 15, preferredTimescale: 600))
        let trackItem = TrackItem(resource: resource)
        trackItem.videoConfiguration.contentMode = .aspectFit

        return trackItem
    }() 

    let timeline = Timeline()
    timeline.videoChannel = [backgroundTrackItem]

    timeline.renderSize = renderSize;

    timeline.passingThroughVideoCompositionProvider = {
        let imageCompositionGroupProvider = ImageCompositionGroupProvider()

        let label = UILabel(frame: .zero)
        label.textColor = .yellow
        label.font = UIFont.systemFont(ofSize: 22)
        label.text = "Hello, world"
        label.sizeToFit()

        UIGraphicsBeginImageContextWithOptions(label.frame.size, true, 0)
        guard let context = UIGraphicsGetCurrentContext() else { exit(0) }
        label.layer.render(in: context)
        let textImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        let resource = ImageResource(image: CIImage(image: textImage!)!, duration: CMTime.init(seconds: 7, preferredTimescale: 600))
        let imageCompositionProvider = ImageOverlayItem(resource: resource)

        imageCompositionProvider.startTime = CMTime(seconds: 1, preferredTimescale: 600)
        let frame = CGRect.init(x: 100, y: 500, width: renderSize.width/4, height: renderSize.height/4)
        imageCompositionProvider.videoConfiguration.contentMode = .custom
        imageCompositionProvider.videoConfiguration.frame = frame

        imageCompositionGroupProvider.imageCompositionProviders = [imageCompositionProvider]
        return imageCompositionGroupProvider
    }()

    let compositionGenerator = CompositionGenerator(timeline: timeline)
    let playerItem = compositionGenerator.buildPlayerItem()
    return playerItem

` And get the result as my screenshot. So my question is: "How can I remove or change the color of black background of my "Hello world" text

[vitoziv]

UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)

You should set the opaque to false, change UIGraphicsBeginImageContextWithOptions(label.frame.size, true, 0) to UIGraphicsBeginImageContextWithOptions(label.frame.size, false, 0)

[mvn-tony-hn]

Yeah, sorry I forgot the draw background of the UILabel itself. Thank you for pointing out my distractions