深入探索视频帧中的颜色空间—— RGB 和 YUV

接触前端音视频之后，需要掌握大量音视频和多媒体相关的基础知识。在使用 FFmpeg WASM 进行视频帧提取时，涉及到视频帧和颜色编码等相关概念。本文将对视频帧中的颜色空间进行介绍。

一、视频帧

对于视频，我们都知道是由一系列的画面在一个较短的时间内（通常是 1/24 或 1/30 秒）不停地下一个画面替换上一个画面形成连贯的画面变化。这些画面称之为视频帧。

对于视频帧，在现代视频技术里面，通常都是用 RGB 颜色空间或者 YUV 颜色空间的像素矩阵来表示。在 ffmpeg 里面，我们可以看到源码 libavutil/pixfmt.h 中定义了一系列像素格式，绝大部分都是 RGB 和 YUV 颜色空间类型。

代码语言：javascript复制

enum AVPixelFormat {
  // ... 省略部分不怎么重要的类型
  ///< planar YUV 4:2:0, 12bpp, (1 Cr & Cb sample per 2x2 Y samples)
  AV_PIX_FMT_YUV420P,

  ///< packed YUV 4:2:2, 16bpp, Y0 Cb Y1 Cr
  AV_PIX_FMT_YUYV422,

  ///< planar YUV 4:2:2, 16bpp, (1 Cr & Cb sample per 2x1 Y samples)
  AV_PIX_FMT_YUV422P,

  ///< packed YUV 4:2:2, 16bpp, Cb Y0 Cr Y1
  AV_PIX_FMT_UYVY422,

  ///< planar YUV 4:4:4, 24bpp, (1 Cr & Cb sample per 1x1 Y samples)
  AV_PIX_FMT_YUV444P,

  ///< planar YUV 4:4:0 (1 Cr & Cb sample per 1x2 Y samples)
  AV_PIX_FMT_YUV440P,

  ///< packed RGB 8:8:8, 24bpp, RGBRGB...
  AV_PIX_FMT_RGB24,
  ///< packed RGB 8:8:8, 24bpp, BGRBGR...
  AV_PIX_FMT_BGR24,
  
  ///< packed ARGB 8:8:8:8, 32bpp, ARGBARGB...
  AV_PIX_FMT_ARGB,
  ///< packed RGBA 8:8:8:8, 32bpp, RGBARGBA...
  AV_PIX_FMT_RGBA,
  ///< packed ABGR 8:8:8:8, 32bpp, ABGRABGR...
  AV_PIX_FMT_ABGR,
  ///< packed BGRA 8:8:8:8, 32bpp, BGRABGRA...
  AV_PIX_FMT_BGRA,

  ///< packed RGB 5:6:5, 16bpp, (msb)   5R 6G 5B(lsb), big-endian
  AV_PIX_FMT_RGB565BE,
  ///< packed RGB 5:6:5, 16bpp, (msb)   5R 6G 5B(lsb), little-endian
  AV_PIX_FMT_RGB565LE,
  ///< packed RGB 5:5:5, 16bpp, (msb)1X 5R 5G 5B(lsb), big-endian   , X=unused/undefined
  AV_PIX_FMT_RGB555BE,
  ///< packed RGB 5:5:5, 16bpp, (msb)1X 5R 5G 5B(lsb), little-endian, X=unused/undefined
  AV_PIX_FMT_RGB555LE,

  ///< packed BGR 5:6:5, 16bpp, (msb)   5B 6G 5R(lsb), big-endian
  AV_PIX_FMT_BGR565BE,
  ///< packed BGR 5:6:5, 16bpp, (msb)   5B 6G 5R(lsb), little-endian
  AV_PIX_FMT_BGR565LE,
  ///< packed BGR 5:5:5, 16bpp, (msb)1X 5B 5G 5R(lsb), big-endian   , X=unused/undefined
  AV_PIX_FMT_BGR555BE,
  ///< packed BGR 5:5:5, 16bpp, (msb)1X 5B 5G 5R(lsb), little-endian, X=unused/undefined
  AV_PIX_FMT_BGR555LE,
    
}

每个类型的注释开头要么是 packed 要么是 planar ，YUV 类型后跟着三个数字 4:2:0、4:2:2、4:4:4 等等，这些都表示什么？带着这些疑问，开始搜索资料研究学习 RGB 和 YUV 颜色空间相关和像素格式的概念。

二、RGB 和 YUV

RGB 和 YUV 都是颜色空间的一种。RGB 是目前运用最广的颜色系统之一，在现代显示器上基本都是采用 RGB 颜色标准。RGB 的原理是把颜色分为红、绿、蓝三个通道，每个通道按照不同比例混合来描述一个颜色。YUV 是用一个亮度分量和两个色度分量来描述一个颜色，Y 表示亮度，U 和 V 表示色度。YUV 的最大特点是将亮度信息和色彩信息分离，没有了色彩信息依旧可以显示一张完整的黑白图片。

1. RGB

对于前端开发者来说，在 CSS 中经常会用到 RGB 或 RGBA 的颜色数值，RGB 格式非常好理解，R、G、B 分别表示红绿蓝三个通道的值。RGB 格式根据存储的位数可以分为 16 位格式、 24 位格式和 32 位格式。在 FFmpeg 的源码中也可以看到 16bpp、24bpp 和 32bpp 的注释说明。（因为内存的字节顺序有大端序和小端序区别，RGB 可能被表达为 BGR 顺序，本质上是一样的）

16 位格式主要是 RGB555 和 RGB565 两种表达方式。RGB555 是每个通道分量占 5 位，空出一位不用。RGB565 则顾名思义，R 和 B 通道占 5 位，G 通道占 6 位。

代码语言：javascript复制

# RGB555
XRRR RRGG GGGB BBBB

# RGB565
RRRR RGGG GGGB BBBB

24 位格式和 32 位格式我们最常用到，RGB24 表示每个颜色通道分量占 8 位，共 24 位。RGB32 表示除了每个颜色通道分量占 8 位外，还有 8 位用于表示透明通道，又称 RGBA 或 ARGB 等。

代码语言：javascript复制

# RGB24
RRRR RRRR GGGG GGGG BBBB BBBB

# RGB32
RRRR RRRR GGGG GGGG BBBB BBBB AAAA AAAA

2. YUV

YUV 是一种彩色编码系统，主要用在视频、图形处理流水线中 (pipeline)。相对于 RGB 颜色空间，设计 YUV 的目的就是为了编码、传输的方便，减少带宽占用和信息出错。

YUV 编码系统是 Y’UV、YUV、YCbCr、YPbPr 等色彩空间的统称。由于历史关系，Y’UV、YUV 主要用在彩色电视中，用于模拟信号表示。YCbCr 则用于数字视频、图像的压缩和传输，如 MPEG、JPEG。由于数字信号的普及，目前 YUV 大多数时候指的是 YCbCr。

3. YUV 与 RGB 相互转换

对于显示器来说，显示图像都是用 RGB 格式，所以需要先把 YUV 格式转换成 RGB。

从 YUV 转换到 RGB 有公式：

代码语言：javascript复制

R = Y   1.13983 * V
G = Y - 0.39465 * U - 0.58060 * V
B = Y   2.03211 * U

从 RGB 转换到 YUV 的公式：

代码语言：javascript复制

Y = 0.299 * R   0.587 * G   0.114 * B
U = -0.14713 * R - 0.28886 * G   0.436 * B
V = 0.615 * R - 0.51499 * G - 0.10001 * B

4. 采样

对于单个像素来说，像素数据都是由 Y/U/V 三个通道的数据来组成。但对于一整张图片来说，数据存储不一定是每个像素数据按顺序排列，在电视信号传播过程中，由于存储和发送的限制，信号处理中会减少部分信息来降低负荷。基于前提人眼对色度的敏感度不及亮度的敏感度，因此可以压缩色度同时可以极小化对图像表达的影响。YUV444、YUV422、YUV420 这些 YUV 后面跟数字的表示 YUV 的采样方式。YUV 格式主流的采样方式主要有 YUV 4:4:4 、YUV 4:2:2 、YUV 4:2:0。（这里的采样可以简单理解为从原始 RGB 图像转换成 YUV 图像的过程）

视频系统的抽样系统中通常用一个三分比值表示：J:A:B（例如4:2:2），形容一个以J个像素宽及两个像素高的概念上区域。