实时滤镜这个功能,对于一款滤镜App来说是很重要的,如果没有实时滤镜,滤镜的效果其实会大打折扣的。
要在Core Image下实现实时滤镜,暂时只有使用Open GL ES的方法,而GLKView则是实现Open GL ES的一个View子类,所以实时滤镜效果可以通过GLKView来实现。
实时滤镜主要涉及相机图像获取,滤镜实时渲染等内容
AVCaptureSession和相机图像获取
设置共享的AVCaptureSession
fileprivate var avSession: AVCaptureSession = AVCaptureSession()
设置后置摄像头为输入源
var cameraInput: AVCaptureDeviceInput
guard (inputs?.count)! > 0 else {
let _cameraDevice = AVCaptureDevice.defaultDevice(withDeviceType: AVCaptureDeviceType.builtInWideAngleCamera, mediaType: AVMediaTypeVideo, position: AVCaptureDevicePosition.back)
cameraInput = try AVCaptureDeviceInput.init(device: _cameraDevice!)
if avSession.canAddInput(cameraInput) {
avSession.addInput(cameraInput)
avSession.sessionPreset = backPreset
}
currentCamera = _cameraDevice
}
设置输出源
ws.captureOutput.setSampleBufferDelegate(self, queue: ws.sessionQueue)
if ws.avSession.canAddOutput(ws.captureOutput) {
ws.avSession.addOutput(ws.captureOutput)
}
滤镜实时渲染
设置完输出源后,可以对设备输出进行实时渲染
// AVCaptureVideoDataOutputSampleBufferDelegate
func captureOutput(_ output: AVCaptureOutput, didOutputSampleBuffer sampleBuffer: CMSampleBuffer, from connection: AVCaptureConnection) {
unowned let ws = self
if Thread.current != Thread.main {
DispatchQueue.main.async {
connection.videoOrientation = .portrait
let pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer)
let image = CIImage(cvImageBuffer: pixelBuffer!)
if EAGLContext.current() != ws.glContext {
glFlush()
EAGLContext.setCurrent(ws.glContext)
}
// clear the pre content buffer
glClearColor(0, 0, 0, 1.0)
glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
// set the blend mode to "source over" so that CI will use that
glEnable(GLenum(GL_BLEND))
glBlendFunc(GLenum(GL_ONE), GLenum(GL_ONE_MINUS_SRC_ALPHA))
let scale = UIScreen.main.bounds.size.width > 375 ? CGAffineTransform(scaleX: 3, y: 3) : CGAffineTransform(scaleX: 2, y: 2)
ws.glkView.bindDrawable()
ws.currentCIImage = image
let fromRect = ws.cropImageRect(image: image)
let filterImage = YKFilters.shared.filterCIImage(name: ws.currentFilterId, inputImage: image, inputContext: ["extent":fromRect])
ws.ciContext.draw(filterImage, in: ws.glkView.bounds.applying(scale), from: fromRect)
ws.glkView.display()
}
}
}
1、这里有个要注意的问题,就是要对Buffer中的图像数据的每一张图像进行裁剪,因为buffer获取的是全屏幕尺寸的数据,与GLKView显示的尺寸其实是对不上的,所以要进行裁剪。
2、除了这个问题外,GLKView要注意Context的绑定和复用,不要重复创建Context,否则性能会有较大的影响。