教程
入门教程和进阶教程,介绍的是OpenGL ES基础,学习图形学基本概念,了解OpenGL ES的特性。 实践教程是OpenGL ES在实际开发中的应用,demo的来源主要是apple官网和github。 这一次的内容是用OpenGL ES绘制YUV视频:获取到视频的每帧图像信息,用OpenGL ES绘制出来。
效果展示
核心思路
通过APLImagePickerController选择本地的视频文件,用AVPlayer播放音频,用OpenGL ES绘制视频。
具体细节
1、AVPlayer
AVAsset:用于获取多媒体信息。 AVPlayerItem:管理视频的基本信息和状态。 AVPlayer:用来读取本地或者远程的多媒体文件。 AVPlayer的使用实例
代码语言:javascript复制 AVAsset *movieAsset = [AVURLAsset URLAssetWithURL:sourceMovieURL options:nil];
AVPlayerItem *playerItem = [AVPlayerItem playerItemWithAsset:movieAsset];
AVPlayer *player = [AVPlayer playerWithPlayerItem:playerItem];
AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:player];
playerLayer.frame = self.view.layer.bounds;
playerLayer.videoGravity = AVLayerVideoGravityResizeAspect;
[self.view.layer addSublayer:playerLayer];
[player play];
可以使用KVO,观察playerItem的status和loadedTimeRange属性 status有三种状态: AVPlayerStatusUnknown AVPlayerStatusReadyToPlay:视频可以播放 AVPlayerStatusFailed loadedTimeRange属性代表已经缓冲的进度。
在demo中,还用到一个AVPlayerItemVideoOutput类,用于协调输出的CoreVideo像素缓存,配置AVPlayerItem。
CADisplayLink帧显示的定时器
通过 CADisplayLink的timestamp 和 duration,计算下一帧显示的时间
从videoOutput中取出像素数据copyPixelBufferForItemTime
再通过displayPixelBuffer
把数据交给OpenGL ES绘制。
2、CGAffineTransform
CGAffineTransform是一个矩阵,结构如下 | a, b, 0 | | c, d, 0 | | tx, ty, 1 | demo中会通过videoTrack的preferredTransform来获取拍摄开始时候的旋转角度,从而修正显示的角度。即使录制的时候是反着,显示也会是正的。
3、CMTime
CMTimeMake(a,b) a当前第几帧, b每秒钟多少帧.当前播放时间a/b CMTimeMakeWithSeconds(a,b) a当前时间,b每秒钟多少帧
demo中的addPeriodicTimeObserverForInterval 方法 添加回调CMTimeMake(1, 2)每秒回调两次
4、APLEAGLView
自定义的UIView子类,用OpenGL ES绘制视频。
preferredRotation
旋转的弧度
presentationRect
显示视频的大小
chromaThreshold
色度大小
lumaThreshold
亮度大小
kColorConversion601
和 kColorConversion709
是两个YUV颜色空间到RGB颜色空间的转换矩阵。
OpenGL ES的基础不再赘述,入门教程和进阶教程这里有详细的介绍,这次着重介绍如何把YUV的视频显示绘制到屏幕上。
CVOpenGLESTextureCacheRef :缓存和管理CVOpenGLESTextureRef。
CVOpenGLESTextureRef、CVImageBufferRef、CVBufferRef这三个实际上是一样的,是CV纹理的缓存。
demo中的pixelBuffer是从AVPlayerItemVideoOutput获取到图像数据,再用CVOpenGLESTextureCacheCreateTextureFromImage从buffer中读取数据并创建chromaTexture和lumaTexture。
AVMakeRectWithAspectRatioInsideRect会计算得出合适的视频宽高,不超过layer的bounds,再与bounds相除,以此作为顶点坐标的位置数据。
5、shader
- 顶点着色器。通过preferredRotation计算出rotationMatrix,再对position进行操作。
- 片元着色器。从SamplerY和SamplerUV中取出颜色,再与lumaThreshold和chromaThreshold相乘得出最后的颜色。
总结
从iOS设备中获取到每一帧的视频信息,可以使用AV框架。 使用OpenGL ES绘制视频部分的逻辑与之前教程介绍相差不多,增加了CVOpenGLESTextureCacheRef的使用。
附上代码