基于 GPUImage2 图像合成视频的探索

发布于:2017-05-21 19:51,阅读数:3829,点赞数:25


>如果还有不知道[「GPUImage」](https://github.com/BradLarson/GPUImage)的请自觉面壁。 > >它被用 Swift 改写后,就变成了[「GPUImage2」](https://github.com/BradLarson/GPUImage2)。 # 引言 最近业余时间在开发一款视频相关的 App,原本打算基于自己开源的计算机视觉库[「EMCVLib」](https://github.com/trmbhs/EMCVLib)做,功能上基于`OpenCV`已做好了封装,但现在已经全部撤掉了。原因有两点: - OpenCV 的 bug 非常多。笔者通过修改源码已经解决了一些问题了,但仍然没法爬出这个坑。 - C++ 层异常无法捕获。OpenCV 拥有丰富的函数,但在输入不合法时,会直接崩溃,这是无法容忍的。 再之,笔者用 Swift 开发,使用 OpenCV 也十分不方便,最终不得不找其他方法,最终找到了`GPUImage2`。 # 原理 先来简单介绍一下`GPUImage2`的工作流程,来一段伪代码: ```swift var input: SomeInput var filter: SomeFilter var output: SomeOutput input --> filter --> output ``` 它通过重载了`-->`操作符,将输入、过滤器和输出串在一起。输入可以是图像、相机或视频。过滤器是可选的,可以是滤镜。输出可以是视图或者是视频文件等。这三者用`-->`符号串在一起,就是它的工作流程了。 # 任务 现在任务来了,有 100 张大小一致的图片,要将这些图片合成一个视频怎么办呢? 根据上面提到的工作流程,由于过滤器是可选的,这里并不需要过滤器,因此确定输入和输出的组件就可以了。 显而易见,这里的输入是`PictureInput`,输出是`MovieOutput`,然后直接`pictureInput1 --> movieOutput`就好了。所以很快就能写出像下面这样的代码: ```swift func imageToMovie(imagePaths: [String], outputURL: URL, size: Size) { let output = try! MovieOutput.init(URL: outputURL, size: size, liveVideo: true) output.startRecording() for path in imagePaths { autoreleasepool(invoking: { let img = UIImage.init(contentsOfFile: path)! let input = PictureInput.init(image: img) input --> output input.processImage() input.removeAllTargets() } } output.finishRecording() } ``` 是不是很简单呢?咦,为什么输出的文件大小是 0 kB 。等待,好像少了点什么。 ![](//cdn.blog.yuusann.com/img/posts/17014_1.jpg) # 探索 100 张图片生成视频,好像忘记指定帧率了,这个要在哪里设置呢?完全没有地方可以设置啊。因此这里涉及到一个问题,视频是凭空产生的,每一帧的时间戳如何处理。 先来看一下接口吧,哇,`GPUImage2`真是简陋呢,`MovieOutput`的接口只有这么几个: ```swift public class MovieOutput : ImageConsumer, AudioEncodingTarget { public let sources: GPUImage.SourceContainer public let maximumInputs: UInt public init(URL: URL, size: GPUImage.Size, fileType: String = default, liveVideo: Bool = default, settings: [String : AnyObject]? = default) throws public func startRecording() public func finishRecording(_ completionCallback: (() -> Swift.Void)? = default) public func newFramebufferAvailable(_ framebuffer: GPUImage.Framebuffer, fromSourceIndex: UInt) public func activateAudioTrack() public func processAudioBuffer(_ sampleBuffer: CMSampleBuffer) } ``` 嗯,真的没有设置帧率的地方,找源码吧。最终在这个方法中找到了想要的东西: ```swift public func newFramebufferAvailable(_ framebuffer:Framebuffer, fromSourceIndex:UInt) { defer { framebuffer.unlock() } guard isRecording else { return } // Ignore still images and other non-video updates (do I still need this?) guard let frameTime = framebuffer.timingStyle.timestamp?.asCMTime else { return } // If two consecutive times with the same value are added to the movie, it aborts recording, so I bail on that case guard (frameTime != previousFrameTime) else { return } if (startTime == nil) { if (assetWriter.status != .writing) { assetWriter.startWriting() } assetWriter.startSession(atSourceTime: frameTime) startTime = frameTime } ...... } ``` 为什么之前输出的文件是 0 kB 呢,因为在这里的守护代码中,由于时间戳是空,因此就直接返回了,所以根本没有输出任何内容。那么这个时间戳是哪里来的呢?继续追进去。 ```swift public enum FramebufferTimingStyle { case stillImage case videoFrame(timestamp:Timestamp) func isTransient() -> Bool { switch self { case .stillImage: return false case .videoFrame: return true } } var timestamp:Timestamp? { get { switch self { case .stillImage: return nil case let .videoFrame(timestamp): return timestamp } } } } ``` 嗯,很好,一个枚举。由于是图片输入,因此这个枚举应该是`stillImage`选项,没有时间戳。如果想让代码正常工作,要在这里加上时间戳才行。 接着看,时间戳是在一个被传进来的`FrameBuffer`对象里的,这玩意又是哪来的? 看了两眼构造方法,跟 OpenGL 上下文有关,初步推测是对 OpenGL 中的 FrameBuffer 的一个封装。 ![](//cdn.blog.yuusann.com/img/posts/17014_2.jpg) FrameBuffer 在 OpenGL 中的概念可以简单理解为一块画布,这东西是要占一大块显存的可不是谁都能有的。果不其然,在输入的`PictureInput`中找到了。 ```swift public class PictureInput: ImageSource { public let targets = TargetContainer() var imageFramebuffer:Framebuffer! var hasProcessedImage:Bool = false ...... } ``` 一个输入图片对应一个 FrameBuffer,说得过去。现在已经基本确定要改的属性了。至于这个属性不是 public 的,直接把源码改了。 那么现在已经找到要改的属性了,那么该怎么改呢?继续看源码,发现时间戳是个 struct: ```swift public struct Timestamp : Comparable { public init(value: Int64, timescale: Int32, flags: GPUImage.TimestampFlags, epoch: Int64) } ``` 四个莫名其妙的参数,这怎么写? ![](//cdn.blog.yuusann.com/img/posts/17003_6.jpg) 经过修改官方例子,把视频输入和视频输出接在一起,以观察时间戳结构最终得出了时间戳结构,下面是修改过的例子代码,可直接在 macOS 上运行: ```swift import Cocoa import GPUImage @NSApplicationMain class AppDelegate: NSObject, NSApplicationDelegate { @IBOutlet weak var window: NSWindow! @IBOutlet weak var renderView: RenderView! var movie:MovieInput! var output: MovieOutput! func applicationDidFinishLaunching(_ aNotification: Notification) { let movieURL = URL(fileURLWithPath:"输入视频路径")! do { movie = try MovieInput(url:movieURL, playAtActualSpeed:true) output = try MovieOutput.init(URL: URL.init(fileURLWithPath: "输出视频路径"), size: 视频长宽) output.startRecording() movie --> output movie.runBenchmark = true movie.start() } catch { print("Couldn't process movie with error: \(error)") } } } ``` 至于最终的构造方法,有兴趣的读者可以自己跑一下代码输出时间戳看看,具体在这里就不给出了。在加入了时间戳后,由图片合成视频的函数已经可以正常工作了。 ```swift func imageToMovie(imagePaths: [String], outputURL: URL, size: Size) { let output = try! MovieOutput.init(URL: outputURL, size: size, liveVideo: true) output.startRecording() for path in imagePaths { autoreleasepool(invoking: { let img = UIImage.init(contentsOfFile: path)! let timestamp = Timestamp.init(...) input.imageFramebuffer.timingStyle = FramebufferTimingStyle.videoFrame(timestamp: timestamp) let input = PictureInput.init(image: img) input --> output input.processImage() input.removeAllTargets() } } output.finishRecording() } ``` # 结语 本文通过简单修改源码完成了将多张图片合成视频的功能,主要提供了一个寻找问题的思路。GPUImage 是款非常著名的图像处理库,希望自己能多多吸收这些优秀框架处理问题的方式。


评论:0条


返回列表

返回主页