How to add interactive UIView (e.g. countdown timer) in a CoreVideo live streaming session

Question

I am following a sample swift code that initiates a Facebook live streaming session from iPhone:

override func viewDidLoad() {
    super.viewDidLoad()

    liveButton.layer.cornerRadius = 15

    session = VCSimpleSession(videoSize: CGSize(width: 1280, height: 720), frameRate: 30, bitrate: 4000000, useInterfaceOrientation: false)
    contentView.addSubview(session.previewView)
    session.previewView.frame = contentView.bounds
    session.delegate = self
}

func startFBLive() {
    if FBSDKAccessToken.current() != nil {
        FBLiveAPI.shared.startLive(privacy: livePrivacy) { result in
            guard let streamUrlString = (result as? NSDictionary)?.value(forKey: "stream_url") as? String else {
                return
            }
            let streamUrl = URL(string: streamUrlString)

            guard let lastPathComponent = streamUrl?.lastPathComponent,
                let query = streamUrl?.query else {
                    return
            }

            self.session.startRtmpSession(
                withURL: "rtmp://rtmp-api.facebook.com:80/rtmp/",
                andStreamKey: "\(lastPathComponent)?\(query)"
            )

            self.livePrivacyControl.isUserInteractionEnabled = false
        }
    } else {
        fbLogin()
    }
}

This code will stream camera video feed to Facebook correctly.

However, how should I overlay a UIView, e.g. a countdown text ontop of the camera feed? I did not mean showing the UIView locally on the phone, I meant overlaying the UIView into the video feed so that the UIView gets streamed into Facebook Live stream and will be visible by other live stream viewers on other devices.

I can see that VCSimpleSession has this method:

addPixelBufferSource: (UIImage*) image
                     withRect: (CGRect) rect;

But this is probably not what I want since I need to add a countdown text...Any ideas?

Answer 1

It's not easy without having access to VCSimpleSession or the FBAPI (can you link to the tutorial? or a sample project)

From some research it seems VCSimpleSession has previewLayer from the camera feed.

So you could create a label, add it to the camera preview layer and update it at some interval (here each second). See code below:

private var elapsedTime : TimeInterval = 0.0
private var timer: Timer?
private var timerLabel: UILabel!


private func startTimer() {
    guard timer == nil else { return }
    session.previewLayer.layer.addSublayer(timerLabel.layer)
    timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(updateTimer), userInfo: nil, repeats: true)
}

@objc private func updateTimer() {
    elapsedTime += 1
    let minutes = Int(elapsedTime / 60)
    let seconds = Int(elapsedTime.truncatingRemainder(dividingBy: 60))

    timerLabel.text = String.init(format:"%02d:%02d", minutes, seconds)

}

private func stopTimer(){
    timer?.invalidate()
    timer = nil
}