教程
入門教程和進階教程,介紹的是OpenGL ES基礎,學習圖形學基本概念,了解OpenGL ES的特性。
實踐教程是OpenGL ES在實際開發中的應用,demo的來源主要是apple官網和github。
這一次的內容是用OpenGL ES繪制YUV視頻:獲取到視頻的每幀圖像信息,用OpenGL ES繪制出來。
效果展示
核心思路
通過APLImagePickerController選擇本地的視頻文件,用AVPlayer播放音頻,用OpenGL ES繪制視頻。
具體細節
1、AVPlayer
AVAsset:用于獲取多媒體信息。
AVPlayerItem:管理視頻的基本信息和狀態。
AVPlayer:用來讀取本地或者遠程的多媒體文件。
AVPlayer的使用實例
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的使用。
附上代碼