1. 首先先看使用效果
如果你不是开发者,只是想使用这个app,可以点击下方链接下载安装使用。核心功能都是免费的，可以放心食用。 如果链接不能直接跳转，选择在Safari中打开
iPhone需要iOS14及以上版本才支持画中画功能。
也可以直接在App Store搜索：悬浮秒杀助手,第一个app就是
2. 开始之前
- 首先
iOS决定了开发者没法为用户提供一个系统级别的view，也就是不能实现所谓的悬浮窗等功能。 所以开发者只能AVPictureInPictureController来实现类似的效果。 -
AVPictureInPictureController一般用于实现视频画中画播放功能。 因此要想实现时钟的效果, 这个问题就变成了制作一个播放时间的视频，然后进行播放。
这里需要思考一个问题 : 如何保持视频时间和系统时间的同步，让用户
暂停快进操作不影响到时间变化
这个问题是这个功能的实际难点, 你肯定不希望这个时间有误差或者是受用户影响（比如用户暂停了视频播放，时间就不动了）
3. 实现思路
- 首先想到的肯定是制作一段视频,视频内容就是时间流, 速率和真实时间一致。在用户操作后进行播放。 实际上这个方案行不通,因为用户很容易通过暂停快进等操作导致时间不同步
- 如果只是在App内部显示当前时间，我们只需要通过
UILabel和定时器就很容易的进行实现。 如果能在AVPictureInPictureController控制的图层上添加视图，也就能很方便的达到我们的效果。 但是经过实际研究, 虽然可以通过比较hack的方式在画中画上添加view，但是会有很多问题，比如用户缩放，view并不会随之缩放。效果比较差
以上两种方案是最初的思路，都没能很好的达到目的。 最终我采用了视频实时渲染的方案,当用户开始使用
画中画，我们实时渲染当前时间。并且我们在视频停止播放的时候,也要刷新屏幕时间。
这样,呈现给用户的就是一个随着系统时间实时刷新的悬浮窗口了
思路有了,你可以通过下面的链接，把工程下载到本地尝试一下。需要注意的是iPhone在iOS14 才开始支持画中画功能。
如果你使用模拟器测试，可以使用iPad的模拟器运行项目，iphone的模拟器目前不支持画中画功能
4. 代码说明
1. 先看目录结构，非常简单。ViewController 管理我们demo首页的视图和操作逻辑
我们会使用到temp.mov 作为视频进行画中画的呈现，这个视频非常短，本身也没有任何内容。我们所显示的时钟内容全部是通过TimeVideoComposition 和TimeVideoCompositionInstruction 这两个类实现的 。后面会我们会看到在如何去使用它们
2. 然后我们进入Viewcontroller 看一下对应的方法。
首先配置UI和加载Video
override func viewDidLoad() {
super.viewDidLoad()
setupUI()
setupVideo()
}
等到视频加载完成,我们调用
setupComposition方法进行视频合成的的配置。 简单来说，我们使用自己创建的TimeVideoComposition作为视屏的合成器,然后通过TimeVideoCompositionInstruction进行视频合成。
func setupComposition() {
// For best performance, ensure that the duration and tracks properties of the asset are already loaded before invoking this method.
videoComposition = AVMutableVideoComposition(propertiesOf: asset!)
let instructions = videoComposition.instructions as! [AVVideoCompositionInstruction]
var newInstructions: [AVVideoCompositionInstructionProtocol] = []
guard let instruction = instructions.first else {
return
}
let layerInstructions = instruction.layerInstructions
// TrackIDs
var trackIDs: [CMPersistentTrackID] = []
for layerInstruction in layerInstructions {
trackIDs.append(layerInstruction.trackID)
}
timeInstruction = TimeVideoCompositionInstruction(trackIDs as [NSValue], timeRange: instruction.timeRange)
timeInstruction.layerInstructions = layerInstructions
newInstructions.append(timeInstruction)
videoComposition.instructions = newInstructions
self.videoComposition?.customVideoCompositorClass = TimeVideoComposition.self
item?.videoComposition = videoComposition
}
想要深入了解的可以参考文末链接
3. 上一步我们使用到了TimeVideoCompositionInstruction,核心部分就是在这个类中实现。当视频需要我们提供界面的时候, 我们在getPixelBuffer 提供对应的界面。这个工程中我们使用CoreText 绘制了当前时间
func getPixelBuffer(_ renderContext: AVVideoCompositionRenderContext) -> CVPixelBuffer? {
.......
}
看到这里,基本流程就已经走通了。 用户使用
画中画功能,视频调用合成器进行显示内容的处理,我们提供需要显示的画面
4. 在视频加载完成以后,除了配置合成器，我们还开启了一个定时器。
DispatchQueue.main.async {
//配置合成器
self.setupComposition()
//创建定时器
self.createDisplayLink()
}
定时器开启后,我们每次都需要给AVPlayerItem 进行赋值, 以此触发视频的刷新。 这样不论用户是否播放暂停视频，我们都能在界面上显示最新的内容
@objc func refresh(displaylink: CADisplayLink) {
reloadTime()
item?.videoComposition = videoComposition
}
5. 小结
实际流程非常简单，但是实现写代码的时候查阅了大量文档视频，用很多方式实现了这个功能,最终觉的这种方式效果最好。 其中有难点的就是理解
AVVideoCompositingAVVideoCompositionInstructionProtocol的使用, 对这部分有疑惑的小伙伴可以多参考官方的文档和视频。
同时可以下载我们的App体验一下(说不定能抢个茅台 (￣▽￣)~*)
x. 一些参考链接
Building a Real-Time Video Editor with AVFoundation
Working with Media in AV Foundation
