如何在CoreVideo直播会话中添加交互式UIView（如倒计时器）

嗨，针对你的需求，实现起来其实很直观——因为VCSimpleSession的预览视图就是普通的UIView，你只需要把自定义的交互式UI（比如倒计时器）直接添加到同一个父视图（也就是你的contentView）上，并且放在预览视图的上层就可以了。下面是具体的步骤和代码示例：

1. 先创建自定义倒计时UIView #

首先我们封装一个带交互逻辑的倒计时器视图，方便复用：

import UIKit

class CountdownTimerView: UIView {
    private let countdownLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 60, weight: .bold)
        label.textColor = .white
        label.textAlignment = .center
        label.text = "3"
        return label
    }()
    
    private var countdownTimer: Timer?
    private var remainingSeconds = 3
    // 倒计时结束的回调，用来触发直播逻辑
    var onCountdownFinish: (() -> Void)?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupUI()
    }
    
    private func setupUI() {
        backgroundColor = UIColor.black.withAlphaComponent(0.5)
        addSubview(countdownLabel)
        countdownLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            countdownLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            countdownLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }
    
    func startCountdown() {
        remainingSeconds = 3
        countdownLabel.text = "\(remainingSeconds)"
        isHidden = false
        
        countdownTimer?.invalidate()
        countdownTimer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { [weak self] timer in
            guard let self = self else { return }
            self.remainingSeconds -= 1
            self.countdownLabel.text = "\(self.remainingSeconds)"
            
            if self.remainingSeconds <= 0 {
                timer.invalidate()
                self.isHidden = true
                self.onCountdownFinish?()
            }
        }
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        // 这里可以添加自定义交互，比如点击暂停倒计时
        countdownTimer?.invalidate()
    }
}

2. 在直播视图控制器中集成这个UI #

结合你提供的原有代码，修改viewDidLoad和相关方法：

class LiveStreamViewController: UIViewController, VCSimpleSessionDelegate {
    @IBOutlet weak var liveButton: UIButton!
    @IBOutlet weak var contentView: UIView!
    private var session: VCSimpleSession!
    // 声明倒计时视图实例
    private var countdownView: CountdownTimerView!
    
    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
        
        // 初始化并添加倒计时视图到contentView
        countdownView = CountdownTimerView(frame: contentView.bounds)
        // 确保倒计时视图在预览视图上层（后addSubview的视图层级更高）
        contentView.addSubview(countdownView)
        // 初始状态隐藏
        countdownView.isHidden = true
        
        // 设置倒计时结束后启动Facebook直播
        countdownView.onCountdownFinish = { [weak self] in
            self?.startFBLive()
        }
    }
    
    @IBAction func liveButtonTapped(_ sender: UIButton) {
        // 点击直播按钮先启动倒计时，而非直接开始直播
        countdownView.startCountdown()
    }
    
    func startFBLive() {
        guard FBSDKAccessToken.current() != nil else {
            // 处理未登录的情况，比如跳转Facebook登录
            return
        }
        // 继续你的Facebook直播初始化逻辑
        // FBLive...（你的原有代码）
    }
    
    // 实现VCSimpleSessionDelegate的其他方法...
}

关键注意事项 #

• 视图层级：一定要确保自定义UIView添加到contentView上，并且在session.previewView之后添加（或者用contentView.bringSubviewToFront(countdownView)手动调整层级），这样UI才会显示在摄像头画面之上。
• 交互响应：如果自定义UI需要接收触摸事件，确保userInteractionEnabled属性为true（默认就是true，除非你手动修改过）。
• 适配问题：如果需要支持屏幕旋转或不同尺寸设备，建议用Auto Layout约束定义UI布局，避免固定frame导致的错位。

内容的提问来源于stack exchange，提问作者mkto