作者：星隕
來源：
音視訊開發進階YUV 檔案素材準備
做這個功能點比較麻煩的是素材問題，上哪去找一個 YUV 檔案出來，谷歌和百度搜尋都不好使，其實直接使用 FFmpeg 生成檔案就好了。
使用如下指令将圖檔檔案轉成 YUV 檔案：
// 把 filename 改為圖檔對應的檔案名
ffmpeg -i image_filename.png -pix_fmt yuv420p yuv_filename.yuv 在這裡将 YUV 檔案格式固定為
YUV420P
了，如果你對 YUV 格式不懂的話，強烈建議看看我之前寫過的文章，圖文并茂，清晰易懂，使用谷歌搜尋 YUV 關鍵字，搜尋結果排名前五的必有我這篇文章。
一文讀懂 YUV 的采樣與格式順便可以使用 FFplay 驗證生成的 YUV 檔案是否有效，使用如下指令：
// 100x100 代表圖檔的寬高，這裡隻是舉例，換成實際的寬高
// 把 filename 改為 YUV 對應的檔案名
ffplay -f rawvideo -video_size 100x100 yuv_filename.yuv 以上指令會打開一個視窗去展示圖檔，如果該圖檔和未轉換成 YUV 的圖檔内容一緻，那說明把圖檔轉換成 YUV 格式檔案是成功了，這樣就有了實驗素材。
代碼實踐
有了素材，接下來就是代碼實踐環節：
建立紋理 SDL_Texture
與 SDL 顯示圖檔的方式有些不同，顯示圖檔是将圖檔轉換成了 SDL_Surface，然後将這個 SDL_Surface 的内容轉換到 SDL_Window 對應的 SDL_Surface 上，最後上屏就顯示圖檔了。
顯示 YUV 檔案需要建立一個紋理，然後将紋理内容渲染上屏，這類似于 OpenGL 的操作了。
首先通過
SDL_CreateTexture
方法建立
SDL_Texture
：
SDL_CreateTexture(SDL_Renderer * renderer,
Uint32 format,
int access, int w,
int h); 參數
renderer
是之前文章提到的建立渲染器，
w
和
h
是紋理的寬高，重點是
format
參數。
根據檔案格式的不同，
format
參數也不同，比如這裡檔案是
YUV420P
，那麼對應的就是
IYUV
.
更多格式可以參考
SDL_pixels.h
檔案中定義，摘錄部分如下：
SDL_PIXELFORMAT_UYVY = /**< Packed mode: U0+Y0+V0+Y1 (1 plane) */
SDL_DEFINE_PIXELFOURCC('U', 'Y', 'V', 'Y'),
SDL_PIXELFORMAT_YVYU = /**< Packed mode: Y0+V0+Y1+U0 (1 plane) */
SDL_DEFINE_PIXELFOURCC('Y', 'V', 'Y', 'U'),
SDL_PIXELFORMAT_NV12 = /**< Planar mode: Y + U/V interleaved (2 planes) */
SDL_DEFINE_PIXELFOURCC('N', 'V', '1', '2'),
SDL_PIXELFORMAT_NV21 = /**< Planar mode: Y + V/U interleaved (2 planes) */
SDL_DEFINE_PIXELFOURCC('N', 'V', '2', '1'),
SDL_PIXELFORMAT_EXTERNAL_OES = /**< Android video texture format */
SDL_DEFINE_PIXELFOURCC('O', 'E', 'S', ' ') 打開檔案并讀取内容
接下來就是打開檔案操作了，直接根據 C 語言裡面相關方法調用就行。
// 打開檔案
FILE *pFile = fopen(path.c_str(), "rb");
// 讀取檔案内容到 buffer 中
unsigned char *yuv_data;
// yuv420p 格式的檔案大小
int frameSize = width * height * 3 / 2;
yuv_data = static_cast<unsigned char *>(malloc(frameSize * sizeof(unsigned char)));
fread(yuv_data,1,frameSize,pFile);
// 關閉檔案
fclose(pFile); 打開檔案，讀取檔案内容，注意
YUV420P
格式檔案大小的計算方式是
width * height * 3 / 2
，它比正常的
RGBA
格式檔案要小一點的。
因為讀取了檔案内容之後，後續也就用不到了，直接 fclose 關閉掉。
渲染紋理上屏
有了紋理，也有了 YUV 檔案内容，接下來就是把 YUV 檔案内容轉換到紋理上，在把紋理渲染上屏。
if (texture != nullptr){
SDL_Event windowEvent;
while (true){
if (SDL_PollEvent(&windowEvent)){
if (SDL_QUIT == windowEvent.type){
break;
}
}
// 更新紋理内容，就是把讀取的 YUV 資料轉換成紋理
SDL_UpdateTexture(texture, nullptr,yuv_data,width);
// 清屏操作
SDL_RenderClear(renderer);
// 将指定紋理複制到要渲染的地方
SDL_RenderCopy(renderer,texture, nullptr, nullptr);
// 上屏操作
SDL_RenderPresent(renderer);
}
SDL_DestroyWindow(window);
SDL_Quit();
} 首先調用
SDL_UpdateTexture
方法将 YUV 内容轉換成紋理，然後
SDL_RenderClear
清屏操作，OpenGL 相關的渲染也是要清屏操作的。
接下來将
SDL_Texture
拷貝到要渲染的地方，然後
SDL_RenderPresent
執行上屏操作就行了。
渲染紋理上屏的操作流程基本都是這樣了，根據檔案格式的不同，轉換成紋理的方式也有不同，除了
SDL_UpdateTexture
方法之外，還有
SDL_UpdateYUVTexture
方法，後面會遇到的。
最後别忘了釋放和銷毀相應的指針和變量。
運作程式就會看到打開一個視窗，顯示一張圖檔，和之前用 FFmpeg 顯示的圖檔内容一緻。
總結
以上就是音視訊基礎學習連載的
005
篇。
内容相對比較簡單，對于 SDL 接口的一些調用也不算難。實際上并不用太深究 SDL 的接口機制和實作原理，做一些實驗性入門基礎功能會用好了，畢竟在實際工作中不太會用到。
另外，既然已經可以顯示一張 YUV 幀内容了，那麼假如是一個 YUV 視訊檔案又該如何顯示了？想知後事如何，請看下回分解。
本文具體代碼見倉庫：
https://github.com/glumes/av-beginner本篇文章對應的送出
tag
為
av-beginner-004
，可切換至對應源碼檢視。
能力有限，文中有不對之處，歡迎加我微信 ezglumes 進行交流~~
SDL 系列文章「視訊雲技術」你最值得關注的音視訊技術公衆号，每周推送來自阿裡雲一線的實踐技術文章，在這裡與音視訊領域一流工程師交流切磋。
