音視頻開發進階｜第六講：色彩和色彩空間·上篇

前言

在前面幾篇文章中，我們完成了音頻相關基礎知識的學習，從今天開始，我們要暫別音頻，繼續學習視頻相關基礎內容。

雖説聲音在我們日常的生活、工作、娛樂過程中，發揮着不可替代的作用，但人們常説，百聞不如一見、耳聽為虛眼見為實。我們對於世界的認識、對於溝通和互動的需求從未滿足於 “聲音” 這一個途徑，在如今這個 “看臉” 的時代， 我們很多時候還追求 “看見”、“面對面”，而這就是視頻存在的意義 。

相對於純音頻，音視頻能傳遞更直觀、更豐富的信息，很多時候，視頻的加入賦予了音頻血肉，也給予了我們更多的選擇。所有 基於純音頻的場景，都可以通過加入視頻元素而演變出新的玩法 ，比如音頻語聊升級為視頻通話、電台直播轉變為秀場直播、語音課堂升級為視頻課堂等等。當然，視頻元素也並不侷限於 “攝像頭”，屏幕採集、版權影視資源都可以作為視頻數據源，滿足了遊戲直播、一起看電影等場景。

既然 “視頻” 有這麼多價值，作為一個音視頻應用開發者，我們自然要來好好地瞭解一下它。

視頻的本質 —— 圖像

在前幾次和聲音打交道的過程中，我們瞭解到聲音的本質是物體振動產生的波，我們對於聲音的感知，其實是通過耳膜感知了聲波的振動，所以對於聲音的學習是從聲波的採集以及數字化開始的。現在，我們開始和視頻打交道，自然要從視頻的本質、以及我們對視頻的感知方式聊起。

那麼，視頻是如何產生的呢？

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

這裏 “靜態圖片” 之所以會轉變為 “動態畫面” ，是基於人眼的 “視覺暫留 “特性：我們觀看物體時，物體首先成像於視網膜、並由視神經傳入大腦，大腦才感知到物體的像。而當物體從視線中移去時，視神經對物體的印象不會立即消失，會延續幾百毫秒。當舊圖像消失、新圖像替換出現的頻率足夠快時，前後圖像在視覺上就產生了 “連貫”，形成了 “動態畫面”。而 “動態畫面” 也就是我們所説的 “視頻”。

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

所以，我們對於視頻知識的學習，還需要從認識 “色彩” 開始。

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

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

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

這種處理方式所使用的 “色彩模型” 的概念，很容易和 “多維空間、多維座標系” 聯繫起來。比如 RGB 模型的三個分量，可以分別視為三維空間的 X、Y、Z 座標，確定了具體的 RGB 分量值，相當於確定了一個（X，Y，Z）座標點，每個不同的點即代表不同的色彩。如果我們計算出每個分量的取值範圍（座標範圍），那麼該範圍內的所有分量的取值組合，就確定了一個色彩空間（Color Space），該空間中包含了該色彩模型可表示的所有顏色。

對於人眼來説，能識別的色彩數量有限，兼顧考慮技術瓶頸，實際應用中需要展示、能夠展示的色彩也是有限的，我們往往不需要一個色彩模型的所有顏色， 不同場景下一般只需要選用某個色彩 “子空間”，作為其標準的色彩空間（也稱為 “色域”） 。而不同軟硬件平台，只要約定好支持相同的色彩空間，只使用該色彩空間內的顏色，就能實現兼容互通，否則，它們對同一種色彩的展示就可能會出現差異。

在不同領域制定的眾多色彩空間中，有一個比較特殊的空間： 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。

• 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 三個分量值才能正確表示顏色，這導致它不便於做編碼壓縮，如果用於存儲或傳輸，會佔用大量的空間和帶寬（關於空間和帶寬的重要性，我們在 音頻必知必會 - 音頻編解碼中已有過討論）。空間和帶寬問題，在一幀圖像上或許可以勉強忍受，但在視頻資源上，就非常嚴峻了（時長 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 分量，圖像輪廓中就填充了 “黑白、明暗” 之外的其他色彩。

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 ，除了要了解它們的基本原理，我們還需要關注它們的 “採樣方式” 和 “存儲格式”。“採樣方式” 和 “存儲格式” 相關的內容，非常重要卻也比較複雜，我們將在下一篇文章中，再詳細地和大家探討。

總結

本篇文章我們重點講述圖像與色彩基礎知識的第一部分，在今天的學習過程中，大家可以瞭解到視頻、圖像、像素和色彩之間的關係，也初步認識了兩種重要的色彩空間：RGB 和 YUV，以及它們的基本原理、差異和聯繫。

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

當然，以上的內容還只是開胃小菜，在下一篇文章中，我們會繼續和 RGB、YUV 打交道，看看它們身上還有哪些 “未解之謎”。期待和大家的下一次見面。

問：本期思考題

RGB 顏色空間也能表示黑白色和彩色，為什麼還需要 YUV 來解決黑白電視和彩色電視之間的兼容互通問題呢？

（ 下期揭祕）

上期思考題揭祕 :arrow_down:

問：作為採樣率、位寬、聲道數的綜合指標，音視頻編解碼碼率對音質會有顯著的響應，那對於碼率的選擇，是否越高越好呢？

答：理論上，對於有損壓縮的音頻編碼，碼率越高意味着壓縮越少，音質保真度越高。但是，對於碼率的選擇，不僅僅需要考慮其對音質的影響，還需要關注實際使用場景的需求、限制。

1、對於音樂電台等場景，為了保證音質，會選用比較高的音頻碼率（>64kbps），根據不同的採樣率、位深和聲道數可以適當調整。但在相同的採樣率、位深和聲道數下，碼率提高到一定程度後，對音質的提升已不再明顯，繼續提高收益不大。需要找到一個音質和壓縮率最契合的 “甜點” 碼率。比如，AAC-LC 的甜點碼率在 96kbps，相當於 MP3 的 128kbps，已經達到了 CD 音質；

2、對於語聊房等場景，多人同時上麥，如果碼率太高勢必會對帶寬產生壓力，如果有出海需求，因各國家地區的網絡基建參差不齊，更要謹慎把控碼率。按基本需求，16kbps 就能保證語音溝通的質量；

3、碼率是可以靈活設置的，同一個 APP 的不同場景，同一個場景下的不同角色，都可以按需設置；

4、ZEGO SDK 支持開發者根據實際需求，自定義音頻碼率。同時也提供了不同音質標準的預設配置，供開發者直接選用：基礎音質 (16 kbps, 單聲道）、標準音質 (48 kbps, 單聲道；56 kbps, 雙聲道）、高音質 (128 kbps, 單聲道；192 kbps, 雙聲道）。