如何在CoreVideo实时流会话中添加交互式UIView（例如倒计时器）

Question

如何在CoreVideo实时流会话中添加交互式UIView（例如倒计时器）

6

我正在遵循一个样例 Swift 代码，用于从 iPhone 启动 Facebook 直播流会话：

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()
    }
}

这段代码可以正确地将摄像头视频流传送到Facebook。

但是，我应该如何在摄像头的视频上面覆盖一个UIView，例如倒计时文本呢？我不是要在手机上本地显示UIView，而是要将UIView覆盖到视频中，以便UIView被传输到Facebook直播流，并且其他设备上的直播观众可以看到它。

我可以看到VCSimpleSession有这个方法：

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

但这可能不是我想要的，因为我需要添加一个倒计时文本...有什么好主意吗？

- mkto

请查看此链接：https://github.com/rsrbk/SRCountdownTimer - 希望能有所帮助。 - Zahurafzal Mirza

你好，我目前正在开发一个直播应用程序（使用AVFoundation和Amazon IVS广播SDK），并尝试在流上添加一些UIView（或自定义UIimages）。我正在尝试在

captureOutput（_ output：AVCaptureOutput，didOutput sampleBuffer：CMSampleBuffer，from connection：AVCaptureConnection）

方法中使用CMSampleBuffer添加它们（仍然不确定是否是正确的方法），但现在有点卡住了...你能否将一些UIView添加到流中？如果可以，你是如何实现的？ - Yuuu

@Yuuu 我不太记得我做了什么。但是在下面的另一个线程中评论中，我成功地使用了这个链接中的方法来叠加图像：https://github.com/kciter/FBLiveAPISample-iOS。你可以试试看。 - mkto

2个回答

-2

当开始直播会话时

在您的父视图上添加UIView（倒计时视图）和UILabel。
UILabel文本随计时器更改。
必须是您的UIView（倒计时视图）具有透明背景。

也许您的问题将得到解决。

- Vivek

嗯，那不是我想要的。我的意思是我想将某些内容叠加到相机视频上，以便将UIView流式传输到Facebook直播流中。 - mkto

当您在父视图上添加视图时，视图会呈现如下，请检查已上传的示例图片。 - Vivek

这不是我需要的 - 我需要能够在相机视频流的顶部叠加UIView /文本/动画，以便UIView /文本/动画被流式传输到Facebook服务器，并且每个Facebook观众都可以在Facebook页面上看到UIView /文本/动画。 addPixelBufferSource：（UIImage *）image方法允许我将静态图像添加到流中，但我想知道如何处理动画倒计时UIView。 - mkto

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ahbou · Accepted Answer

如果没有访问VCSimpleSession或FBAPI（可以链接到教程或示例项目），这并不容易。

通过一些研究，似乎VCSimpleSession具有来自相机源的预览层。

因此，您可以创建一个标签，将其添加到相机预览层中，并在某个间隔（这里是每秒）更新它。请参见下面的代码：

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
}