1、前言

相針對純音頻，音視頻能傳遞更直觀、更豐富的信息，非常多時候，視頻的加入賦予了音頻血肉，亦給予了咱們更加多的選取。所有基于純音頻的場景，都能夠經過加入視頻元素而演變出新的玩法，例如音頻語聊升級為視頻通話、電臺直播轉變為秀場直播、語音課堂升級為視頻課堂等等。當然，視頻元素亦并不局限于 “攝像頭”，屏幕采集、版權影視資源都能夠做為視頻數據源，滿足了游戲直播、一塊看電影等場景。

既然 “視頻” 有這么多價值，做為一個音視頻應用研發者，咱們自然要來好好地認識一下它。

2、視頻的本質 —— 圖像

咱們認識到聲音的本質是物體振動產生的波，咱們針對聲音的感知，其實是經過耳膜感知了聲波的振動，因此針對聲音的學習是從聲波的采集以及數字化起始的。此刻，咱們起始和視頻打交道，自然要從視頻的本質、以及咱們對視頻的感知方式聊起。

那樣，視頻是怎樣產生的呢？

大眾必定有接觸過 “翻頁連環畫”，這種連環畫的每一頁都是靜態的照片，常態下平平無奇，但倘若咱們快速地撥動翻頁，讓每一頁照片快速、連貫地進行展示，本來 “靜態” 的照片，在視覺上居然變成為了 “動態” 的畫面（如下圖）。

C++音視頻研發學習資料：點擊莬費領取→音視頻研發（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

這兒 “靜態照片” 之因此會轉變為 “動態畫面” ，是基于人眼的 “視覺暫留 “特性：咱們觀看物體時，物體首要影像于視網膜、并由視神經傳入大腦，大腦才感知到物體的像。而當物體從視線中移去時，視神經對物體的印象不會立即消失，會延續幾百毫秒。當舊圖像消失、新圖像替換顯現的頻率足夠快時，前后圖像在視覺上就產生了 “連貫”，形成為了 “動態畫面”。而 “動態畫面” 亦便是咱們所說的 “視頻”。

從 “翻頁連環畫” 的現象看，視頻的本質其實是一幀幀連續展示的圖像。而咱們對視頻內容的感知方式，便是通過眼睛捕捉到一幀幀圖像上的 “色彩” 。無論是最簡單的黑白默劇，還是最豐富的炫彩影視，都需要由色彩構成血肉和骨骼。

因此，咱們針對視頻知識的學習，還需要從認識 “色彩” 起始。

3、圖像的血肉和骨骼 —— 色彩

大眾都曉得，眼睛之因此能看到物體，是由于接收了物體反射的光波。而色彩，則是大腦對光的一種 “感覺”。相較于聲音的 “只可言傳，不可意會”，色彩針對咱們來講，是 “只可眼觀，不可言傳” 的。為了方便對色彩進行統一描述，亦為了讓數字電路能識別、處理色彩數據，咱們需要利用數字化的手段對色彩進行定義。

說到色彩的定義方式，最為大眾所熟知的是 “光的三原色模型”。光進入人眼后，視覺細胞會產生多個信號，其中有三種單色光信號：紅（Red）、綠（Green）、藍（Blue） ，這三種單色光按區別比例組合，形成為了區別的色彩，咱們亦叫作其為RGB 模型。參考 RGB 模型，咱們選定了三種色彩分量，再對每種單色分量進行量化，亦就完成了對色彩的數字化處理。

這種處理方式所運用的 “色彩模型” 的概念，很容易和 “多維空間、多維坐標系” 聯系起來。例如 RGB 模型的三個分量，能夠分別視為三維空間的 X、Y、Z 坐標，確定了詳細的 RGB 分量值，相當于確定了一個（X，Y，Z）坐標點，每一個區別的點即表率區別的色彩。倘若咱們計算出每一個分量的取值范圍（坐標范圍），那樣該范圍內的所有分量的取值組合，就確定了一個色彩空間（Color Space），該空間中包括了該色彩模型可暗示的所有顏色。

針對人眼來講，能識別的色彩數量有限，兼顧思慮技術瓶頸，實質應用中需要展示、能夠展示的色彩亦是有限的，咱們常常不需要一個色彩模型的所有顏色，區別場景下通常只需要選擇某個色彩 “子空間”，做為其標準的色彩空間（亦叫作為 “色域”） 。而區別軟硬件平臺，只要約定好支持相同的色彩空間，只運用該色彩空間內的顏色，就能實現兼容互通，否則，它們對同一種色彩的展示就可能會顯現差異。

C++音視頻研發學習資料：點擊莬費領取→音視頻研發（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

在區別行業制定的眾多色彩空間中，有一個比較特殊的空間：CIE 色彩空間，它包括了人眼所能感知的所有色彩。CIE 色彩空間常常被當作標準的參考系，用于區別色彩空間之間的比較。倘若咱們將 CIE 色彩空間中的所有色彩，經過數學模型映射到一個二維平面中，將得到一個如下的色域馬蹄圖，封閉區域即為 CIE 色彩空間所能暗示的所有顏色。

CIE 色彩空間：人眼的可視色彩范圍

當然，除了基于光的三原色的 RGB 模型，色彩模型 / 色彩空間還有非常多種，平常的例如 YUV、CMYK、HSV、HSI 等等。而在 RTC 應用中，重點運用的是 RGB 和 YUV ，咱們后面會重點認識這兩種色彩空間。

而在認識詳細的色彩空間之前，咱們還有一個疑問需要解答：色彩，是怎樣構成圖像的呢？

雖然說視頻的本質是圖像，但圖像并非不可分割，它仍然有更小的構成單位 – “像素”（Pixel）。關于圖像和像素的關系，大眾能夠先觀察如下兩張照片：

在上面的照片中，左圖為正常尺寸的照片全貌，右圖為放大必定倍數之后的局部截圖（企鵝的頭部）。

咱們能夠看到，本來細膩的照片，在放大之后顯現了一個個小方塊，這些或色彩各異、或色彩相近的小方塊按必定規則擺列組合，最后呈現了 “企鵝” 的形象。這兒的小方塊，便是所說的 “像素”。

一個像素，是圖像的一個最基本單元，是形成圖像的一個色點，咱們亦能夠叫作其為像素點。每一個像素點上記錄了某種色彩空間的每一個分量值（例如 R、G、B），區別的分量值組合決定了這個像素點所暗示的顏色，多個暗示特定顏色的像素點，按某種規則擺列組合，就形成為了完整的圖像。能夠說，“像素們” 承擔了照片色彩形成的重任。

好了，關于像素、以及像素與圖像色彩的形成關系，大眾就先認識到這，后面咱們還會和它們有進一步接觸。此刻，讓咱們回到色彩空間的專題上，來詳細認識一下，RTC 應用中最常運用的色彩空間：RGB 和 YUV 。

1、 RGB

首要，咱們來認識一下 RGB 色彩空間。

咱們前面已初步認識，RGB 色彩模型基于光的三原色原理創立，其三個分量為：紅（Red）、綠（Green）、藍（Blue）。在 RGB 模型下，圖像的每一個像素點都會存儲 R、G、B 三個分量（如下圖），每一個分量取區別的數值（ 0 ~ 255 ），該像素點就能綜合呈現出區別的色彩?；诖?，倘若按（R，G，B）的方式記錄，那樣（255,0,0）、（0,255,0）、（0,0,255）分別暗示的便是最純粹的 紅、綠、藍 。而比較特殊的，若 RGB 三個分量值均為 0，綜合得到黑色；反之，若三個分量取最大值 255，綜合得到白色。

RGB 可暗示的色彩數量達到 1677 萬，這遠遠超過了人眼的感知范圍（約 1000 萬種），正因如此，RGB 被廣泛應用于各樣表示行業。而區別行業、區別應用場景，按照其所需的顏色范圍，又創立了基于 RGB 模型的、區別的色彩子空間，最平常的有 sRGB 和 Adobe RGB。

C++音視頻研發學習資料：點擊莬費領取→音視頻研發（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

sRGB 和 Adobe RGB

sRGB 色彩空間由 Microsoft 在 1997 年主導制定，被廣泛應用于表示器、數碼相機、掃描儀、投影儀等設備。大眾選購表示器時，肯定有在制品特性介紹中看到過諸如 “99% sRGB、100% sRGB” 之類的指標，其含義即為該表示器對 sRGB 色彩空間的覆蓋程度，數值越高，寓意著該表示設備所支持的色彩越豐富。而 Adobe RGB 比 sRGB 晚面世一年，由 Adobe 在 1998 年提出，它在 sRGB 的基本上增多了 CMYK 色彩空間（一種專用于印刷業的色彩空間，模型分量為青（Cyan），洋紅（Magenta），黃（Yellow），黑（Black）），Adobe RGB 跟隨著 Adobe 設計軟件整家桶被廣泛應用于平面設計行業。

sRGB 和 Adobe RGB 的對比

關于 sRGB 和 Adobe RGB 的比較，咱們能夠借助 CIE 色彩空間馬蹄圖做為參考。

如下圖，咱們將 CIE、sRGB 和 Adobe RGB 的色彩范圍換算到同一個平面上。最外圍的色彩區域為 CIE 色彩空間，三角形部分為 sRGB 和 Adobe RGB。能夠看到，sRGB 和 Adobe RGB 的色彩范圍均小余 CIE，然則 Adobe RGB 的覆蓋范圍比 sRGB 更廣，尤其是在綠色區域覆蓋得更加多（sRGB 大約能覆蓋 35％ 的 CIE，Adobe RGB 則為 50%），這使得 Adobe RGB 在攝像、圖像處理、保真方面更游刃有余。

sRGB 和 Adobe RGB 的比較

不外，即便 Adobe RGB 相較 sRGB 更出色，在應用范圍上依舊是 sRGB 更廣。做為 “先輩”，抱著 Windows 的大腿，sRGB 憑借 Windows 渾厚的用戶基本得到了廣泛的普及。如今，互聯網上絕大都數內容，例如視頻網站的影視劇、例如這篇文案中的照片，基本都是以 100% sRGB 的色彩標準進行表示的。一張 Adobe RGB 標準的照片倘若放在網頁上觀看，其顏色可能會變淡（相針對原始色彩），這是由于 Adobe RGB 照片的色彩超過了網頁的顯色標準，部分色彩信息顯現了丟失。但即便如此，針對大部分用戶來講，平常場景運用 sRGB 已然足夠，當需要更廣的色域以達到更優秀的色彩效果時（例如專業平面設計 / 攝影場景），才有必要思慮 Adobe RGB。

從 RGB 兩種子色彩空間的應用場景看，不得不承認 RGB 和大眾的平常生活已經是息息關聯。然則，即便在采集、表示等用途上 RGB “一家獨大”，當聚焦到視頻處理行業時，它卻有些施展不開手腳。

RGB 在暗示顏色時有一個特點，那便是其三個通道分量是關聯的，缺一不可。亦即每一個像素點必須同期存儲 R、G、B 三個分量值才可正確暗示顏色，這引起它不方便于做編碼壓縮，倘若用于存儲或傳輸，會占用海量的空間和帶寬（關于空間和帶寬的重要性，咱們在 音頻必知必會 - 音頻編解碼中已有過討論）?？臻g和帶寬問題，在一幀圖像上或許能夠勉強忍受，但在視頻資源上，就非常嚴峻了（時長 1s 的視頻資源，通常包括數十幀的圖像，空間和帶寬占用將呈數十倍增長）。

因此呢，咱們還需要其他的色彩空間，來替代 RGB 用于視頻處理行業，而這便是接下來要和大眾介紹的，YUV 色彩空間。

2、YUV

既然 RGB 三個分量的關聯性，制約了其在視頻行業的應用，做為其上位選取的 YUV 自然不可重蹈覆轍。YUV 色彩空間亦有三個分量 Y、U、V，但和 RGB 區別的是，其三個分量并非都參與顏色的暗示。

YUV 的三個分量中， Y 分量用于暗示明亮度（Luminance），決定一個像素是明、或暗（能夠理解為是黑、或白）以及其明暗的程度。咱們僅記錄明暗區別的 Y 分量，就能暗示出圖像的總體輪廓（ 如下圖中的 【Y】）。而 U、V 分量暗示色度（Chrominance），用于定義色彩和飽和度（ 如下圖中的 【U】【V】）。一個記錄了 Y 分量的像素，再添加上 U、V 分量，圖像輪廓中就填充了 “黑白、明暗” 之外的其他色彩。

C++音視頻研發學習資料：點擊莬費領取→音視頻研發（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

YUV 和 其三個分量

不難發掘，即使無 U、V 分量，僅憑 Y 分量咱們亦能 “識別” 出一幅圖像的基本內容，只不外此時呈現的是一張黑白圖像。而 U、V 分量為這些基本內容賦予了色彩，黑白圖像演變為了彩色圖像。這聽起來是不是有些似曾相識呢？這其實亦是黑白電視和彩色電視之間的關系。

YUV 是在黑白、彩色電視的過渡時期應運而生的，它這種既能夠完整記錄彩色信號，又能經過僅記錄 Y 通道信號來暗示黑白畫面的特性，很好地處理了黑白電視與彩色電視的兼容互通問題。并且，因為人眼針對亮度（Y）相較于色度（U、V）更高、更敏銳，咱們針對區別明亮度的識別能力，遠遠超過對區別色度的識別能力。這寓意著，咱們能夠在保存 Y 分量信息的狀況下，盡可能地減少 U、V 兩個分量的采樣，以實現最大限度地減少許據量，同期還能保準人眼視覺失真度最小，這針對視頻數據的存儲和傳輸是有極重裨益的。這亦是為何，YUV 相較于 RGB 更適合于視頻處理行業。

3、YUV 和 RGB 的轉換

在認識了 RGB 和 YUV 的基本知識和應用場景后，你可能會有有些疑惑。既然在圖像采集、表示方面，咱們重點運用 RGB，然則在圖像存儲、處理、傳輸方面，咱們又要選取 YUV。而在一個完整的應用場景中，視頻的采集、存儲、處理、 傳輸、表示等環節，卻是相互相關、缺一不可的，這兒是不是會存在沖突呢？

是的，這兒的確存在兩種色彩空間的運用沖突，咱們處理沖突的方式是 “色彩空間轉換”。

RGB 與 YUV 的相互轉換，存在于視頻處理鏈路的各個必要環節。

視頻采集設備通常輸出的是 RGB 數據，咱們需要將其轉換為 YUV 數據再進行后續的處理、編碼和傳輸；一樣的，表示設備經過傳輸、解碼環節獲取到 YUV 數據后，亦需要將其轉換為 RGB 數據，再進行消費展示。

關于這兩種色彩空間轉換的細節，大眾暫不需要深究，但需要認識到：色彩空間轉換是一個基于 “標準” 來執行的過程，僅有在知道標準的基本上，才可經過必定的數學運算完成二者的相互轉換。而 “標準” 有非常多種，例如 BT.601、BT.709 等等，區別的標準會有區別的轉換公式，有興趣的朋友能夠去查閱關聯的資料做進一步認識。

關于 YUV 和 RGB ，除了要認識它們的基本原理，咱們還需要關注它們的 “采樣方式” 和 “存儲格式”?！安蓸臃绞健?和 “存儲格式” 關聯的內容，非常重要卻亦比較繁雜，咱們將在下一篇文案中，再仔細地和大眾探討。

4、總結

本篇文案咱們重點講述圖像與色彩基本知識的第1部分，在今天的學習過程中，大眾能夠認識到視頻、圖像、像素和色彩之間的關系，亦初步認識了兩種重要的色彩空間：RGB 和 YUV，以及它們的基本原理、差異和聯系。

接下來，咱們還是經過一個思維導圖，整理一下所有的內容：

倘若你對音視頻研發感興趣，或對本文的有些闡述有自己的看法，能夠在下方的留言框，一塊探討。