[Media] 影音傳輸-基礎知識

以下內容多整理：

1. 30 天之即時網路影音開發攻略(小白本) by 我是小馬克 @ iThome
2. Video Compression Basics @ AWS Elemental Foundations

圖片來源： 30 天之即時網路影音開發攻略(小白本) @ iThome

聲音採集

• 脈碼調變（PCM, pulse-code modulation）：可以用來指將類比訊號轉換為數位訊號的「方式」，或者指透過這個方式產生的「編碼」，可以想像成是聲音的 RAW 檔，又稱「無損編碼」。

位元率 (bps) = 採樣率(hz) x 採樣大小(bit) x 通道

• 位元率（bps, bit Per Second）：在聲音中通常使用 bps 來衡量音訊的品質，越高就代表質量越好，同時也需花費越多的儲存空間，例如 10 bps 指的是這段聲音每秒共有 10 bit 的資料量；32 kbps(32,000 bit/sec)，表示每秒要處理 32 kbit 的量，當音訊有 10 秒時，則需要 32 * 10 = 320 kbit 的空間。
• 採樣率：表示每秒鐘會抓取幾次，採樣率越高音樂越優質，單位為 Hz。
• 通道（channel）：表示有幾個聲道。
• 採樣大小：聲音的解析度，一般為 16 bit，數值越高解析度越好，單位為 bit。

聲音編碼壓縮

keywords: G.711, MP3, AAC, Opus, FLAC, iSac

PCM 所產生的編碼稱作「無損編碼（lossless codec）」，這就類似照片的 RAW 檔，但因為這種 RAW 檔所佔的空間太大了，因此就有許多不同用來「壓縮編碼」的方式。

壓縮編碼的方式可以大致分成**「無損編碼（lossless codec）」和「有損編碼（lossy codec）」**這兩種。無損編碼可以將檔案還原成原本的 PCM 編碼；有損編碼則是在盡可能不影響聲音品質的情況下進行聲音的壓縮。

常見的編碼方式如：

• G.711 ( 始祖 )：最原始的編碼，即類似 PCM 編碼
• MP3 ( MPEG-1 audio layer 3 )：將木耳聽不到的 PCM 音頻資料移除。專利已過期。
• AAC ( Advanced Audio Coding )： 作為 MP3 的繼承人，相同位元率的情況下音質比 MP3 更好，iTunes 和 Youtube 目前都使用此編碼。製造商與開發商需要需要專利許可。
• Opus：目的是設計在即時語音、網路會議、遊戲內聊天等需要低延遲的網路環境，又被稱為「編碼瑞士刀」，可提供幾乎所有不同的位元率，且在更高位元下可提供比 AAC 更好的音質。免費。
• FLAC ( Free Lossless Audio Codec )：無失真壓縮，類似 ZIP 解壓縮的概念，目前用在 Spotify Hi-Fi。
• iSac：大部分使用在 VoIP 與串流應用，提供寬帶（wideband，16 KHz）和超寬帶（32 KHz）的採樣率，是 WebRTC 預設的語音編碼器。目前屬於 Google。
• iLBC：提供窄帶（8 KHz）的語音編碼器，同樣常用在 VoIP 和串流應用。

⚠️ .mp3 不是編碼，它只是裝了 MP3 編碼的容器。

影像採集

和影像有關的重要資訊包含解析度（resolution）、幀率（frame rate）、位元率（bitrate）、色彩空間（color space）、位元度（bit depth）、Compression Scheme、編解碼器（codec）、容器（container）。

解析度（resolution）與影片畫質

數位「圖像」是有一堆帶有顏色的「格子」所組成，每個最小可控制的格子都稱作一個「像素（pixel）」。對於同樣的畫面來說，當該畫面所含的像素越高時就越能反映真實的樣子，解析度影響影像清晰度（clarity）和銳利度（sharpness）的重要因素。

常見的解析度（又稱「垂直解析度」）包含：

• 傳統電視解析度： 720 x 480，寬高比（aspect ration）是 4:3。
• High Definition (HD)：1920 X 1080，寬高比（aspect ration）是 16:9。
• Ultra High Definition (UHD, 4K UHD)：3840 X 2160，又稱 4K 螢幕，，寬高比（aspect ration）是 16:9。

色彩空間（Color Space）、色域（Color Gamut）與位元度（bit depth）

keywords: 色彩空間（Color Space）、色域（Color Gamut）、位元度（bit depth）

人眼可看到的可見光範圍可以組成「色彩空間（Color Space）」，而在色彩空間中裝置可以顯示顏色範圍稱作「色域（Color Gamut）」。

在每一個像素（pixel）中可以帶有顏色資訊，這些顏色資訊同樣以位元（bit）的方式保存，每一個像素中帶有的位元數（number of bits）即稱作「位元度（bit depth）」。當一個像素被給予越多的位元時，顏色的呈現則會越精準。

「位元度（bit depth）」指的是一個像素會用多少個 bit 來保存資訊。

舉例來說，若我們想要呈現帶有陰影的紅色時，若只用 1 個 bit 來呈現，則只能表示「全紅」或「全白」（2¹）；若用 2 個 bit 來呈現，則可以用 4 種明度來呈現紅到白（2²）；用 3 個 bit 則可以用 8 種（2³）明度來呈現；當我們用 8 bit 時，則可以有 256 種（2⁸）來呈現。

實際上一個像素會包含三種主要的顏色：紅、綠、藍。這三種顏色可以有各自的色版（color channel），假設每個色版都有 8 bits 來保存，就會有 2⁸ （256）種值，當有三種顏色時，會使用 24-bit 來保存顏色，這被稱作 24-bit color 或 a bit depth of 24，一共可以顯示超過 1600 萬種顏色。

在最新的 HDR (High Dynamic Range) 影片中則會每個色版使用 10 bits 或 12bits 來保存顏色，因此可以提供超過 10 億到 680 億以上的顏色資訊。

顏色編碼可以分成：

• RGB：由 Red, Green, Blue 組成，每一種顏色包含 8 bit（0~255），也就是 RGB 各用 1 byte 來記錄，總共需要 3 bytes
• YUV：所需的空間更小，適合用於視訊。

影格率／影像幀數／幀率（FPS）與影片流暢度

影像則可視為一堆連續的圖片，而每一張圖片就稱作一幀（影格）（frame），連續好幾幀就會變成動畫，當我們說幀數為 30 表示這個影片每秒鐘由 30 張圖片組成，又稱 30fps。FPS (Frames Per Second) 的值越大，畫面越流暢，但需要佔用多的儲存空間。

在一個連續動作中會由許多幀組成，其中有一些會被稱作關鍵幀（keyframe / I-frame），連續動作中的其他幀都是根據這個「關鍵幀」進行小幅度的變動，並把其他變化不大的部分拿掉，以此減少所需的空間。

螢幕

影片有影片的解析度，而螢幕在成像是則是透過以不斷「掃描」的方式來成像。

傳統的 CRT（Cathode Ray Tube）使用的是「交錯掃描（interlaced scanning）」的方式，單一影格會透過兩階段呈現，先在單數行的 line 呈現，接著才是偶數行的 line，以此來解決螢幕閃爍的情況。它會在影像高度後方加上小寫 i 來表示，例如，480i 或 1080i。

現在較新的螢幕（LCD, LED, OLED）則是使用「連續掃描（progressive scanning）」，一次就將單一影格的所有 line 呈現出來，並且不會有明顯的閃爍。它會在影像高度後方加上小寫 p 來表示，例如，1080p，而 4K 螢幕因為一定是用連續掃描的方式，因此後方的 p 就被省略。

位元率（bitrate / bit per second）：影像檔案大小計算

位元（bit） 是電腦用來表徵資料的最小單位，即 0 或 1，而 bitrate 反映的是每秒鐘使用了多少位元（bitrate, bits per second）來保存資料。當 bitrate 越大時，表示該影片每秒鐘包含的資訊越多，並且有越好的影片品質，但同時檔案也會更大。常見的單位如 Mbps (Mb/s) 或 Kbps (Kb/s)。

在不壓縮的情況下，一部 10 秒鐘、30 fps 、1080p 的全彩影片，需要的容量會是：

10(sec) X 30(fps) X 1920 X 1080 X 24(rgb) = 14929920000 bit = 1866 MB

但在影像有壓縮的情況下，同樣解析度的影格會有不同的 bitrate ，當 bitrate 較低時會喪失許多畫面的細節：

Constant and variable bitrates

• **Constant bitrate（CBR）**的編碼方式會讓影片或串流有較穩定相同的 bitrate，經常使用在脫口秀這類的節目
• **Variable bitrate（VBR）**則會隨著影片播放到的時間不同而有不同的 bitrate，它會使用更多的位元來保存內容中較複雜的部分，像是動作變化較多的場景；並使用較少的 bits 來保存影片中較少或靜態的內容。VBR 通常用在影片的複雜性變化較大時，例如運動頻道或動作片電影。

影像編碼壓縮

keywords: H.264, H.265, VP8, VP9, codec, HEVC, AVC

什麼是編解碼器？

由於原始的影像檔案太過龐大，因此有許多不同的方式試著嘗試壓縮原始的影像編碼，其實像是把相似的像素動手腳、相近時間的圖片（幀）動手腳（Temporal redundancy）、刪除多餘的編碼、刪除人眼無法辨識的多餘部分。

軟體用來將影像編解碼的方式就稱作「編解碼器（codec）」，這是取自 compress / decompress 或 encode / decode。這些編解碼器的目的很簡單：在不明顯影響影像品質的情況下，盡可能減少檔案的大小。

影像壓縮的方式一樣可以區分成無損編碼（lossless codec）和有損編碼（lossy codec）。無損編碼會試著在保留原本影像訊息的情況下減少檔案大小；有損編碼則是讓人眼在無法明顯覺察的情況下，盡可能減少檔案大小。

編解碼器訂定規範

編解碼器的標準主要有兩大組織，分別是「ITU-T Video Coding Experts Group（VCEG）」和「ISO-IEC 暨 Movie Picture Experts Group」。過去 10 幾年來最常見的編解碼器是 H.264（ITU 這麼命名）、又被稱作 MPEG-4 Part 10 Andanced Video Coding, AVC（MPEG 這麼命名）。

到了 2013 年，為了讓 4K UHD 的傳播更有效率，開始有了 H.265，又被稱作 MPEG-H Part 2 High Efficiency Video Coding, HEVC 。

常用的編碼主要可以分成 H.264 和 VPX：

• H.264 / AVC：是最主流的影像編碼技術，不論手機、平板或網路串流都有使用，蘋果裝置完全支持，硬體上使用需要取得授權。
• H.265 / HEVC：H.264 的進階，壓縮率更高，但相容性目前還沒這麼好。
• VP8：由 Google 收購，主要著重在網路傳輸，以較低的品質處理網路頻寬問題，Chrome、Android、Youtube、WebRTC 絕對支援，硬體上使用不需授權。
• VP9：為 VP8 的進化，大部分的瀏覽器都有支援（除了 safari）

影片壓縮原理（Compression schemes）

靜態影像 - JPEG

在處理單一影格的圖像時，最常用的演算法是使用 JPEG（Joint Photographic Experts Group），這種演算法會移除影像中肉眼不易覺察的部分來達到壓縮的目的，例如一些顏色或影像中複雜的部分。JEPG 這種壓縮方式又被稱作 intra-frame coding，所有需要用來解碼並顯示該圖片的訊息，都放在該圖片被壓縮中的資料內。

動態影像 - Motion JPEG

轉換到影片的情境時，將會有非常多的影格（圖片），這時針對每一個影格進行 JPEG 壓縮的方式，稱作 Motion JPEG。透過 Motion JPEG 這種方式雖然可以有效的壓縮影片，但這種壓縮方式並沒有考慮到每個個影格和影格間的情況，舉例來說，影片中每個影格的背景可能是大同小異的，這種情況稱作 temporal redundancy，因此新的演算法可以透過追蹤每個影格與影格間哪些有改變、哪些相同的方式來做更有效率的壓縮。

動態影像 - GOP 與 MPEG

為了解決 temporal redundancy 的情況，新的影像編碼方式被開發出來，這種屬於 inter-frame 的壓縮方式最常見的就是透過 MPEG（Moving Picture Expert Group） 進行編解碼。

這種編解碼方式使用到的是 Group of Picture（GOP） 的概念，它會讀取和保存一系列的影格，並針對第一個影格進行 Intra-Frame algorithm，這個影格我們會稱作「**關鍵影格（keyframe）」**或 I-frame。

在 I-frame 被編碼後，編碼器會分析這個影格和後續每一影格間有什麼樣的變動，這些新的影格在壓縮後稱作 predictive frame 或 P-frame，對於像素中資料沒有改變的部分，則不在重複壓縮一次，而是直接參照到 I-frame。

接著編碼器會繼續產生新的 P-frame，這次這個新的 P-frame 則可以從同時從已經產生過的 P-frame 和 I-frame 來取得影像資訊。

接著編碼器會在 I-frame 和 P-frame 之間，一樣透過分析影像的變化，同時去比較前、後的差異，將有變化的部分保存下來，並產生新的影格，這類的影格則稱作 Bi-directional Predictive frame 或 B-frame。

一般來說，I-frame 會使用最多的位元來保存資料，接著是 P-frame，最後則是 B-frame，這個過程會重複執行來填滿整個影片。

最後，為了要讓影片能正常播放，播放器需要先對影片進行解碼（decode），為了讓播放器知道當初編碼的順序，會將每個影格被編碼的順序儲存下來，這個影格被編碼的順序稱作 decode time stamp（DTS）；接著，為了要讓影片能照著原本的時間順序播放出來，在每個影格中則會紀錄 presentation time stamp（PTS）。

這樣的一個循環稱作 Group of Pictures（GOP），一部影片中則是由多個 GOP 組合起來，GOP 的大小一般來說會是 24, 30, 60, 90 個影格，或者是 25, 50, 100 個影格，其中在編碼器中通常可以去設定每一個 GOP 中 B-frames 的數量或是一個 GOP 包含的影格數。

瀏覽器支援

目前 Safari 主要支援 H.264 這類的編碼，而 Chrome, Firefox, Opera 則支援 VP8 這類的編碼。

Ogg = Theora 影像編碼 + Vorbis 聲音編碼
MPEG 4 = H.264 影像編碼 + AAC 聲音編碼
WebM = VP8 影像編碼 + Vorbis 聲音編碼

Media formats for HTML audio and video @ MDN

容器：聲音和影像的封裝

封裝指的是將聲音和影像丟到同一個**容器（container）**的過程，透過封裝可以讓聲音和影像的內容同步上更方便，且提供索引內容，讓用戶可以直接選擇要看哪個地方，另外如果只傳送編碼本身而沒有說明編碼資訊，接收檔案的那端會不知道該用哪種方式進行解碼。

容器就像是一個盒子，在這個盒子中同時包含了影像、音訊、字幕和其他的資訊（metadata）。要知道用的是什麼容器可以直接從檔案的「副檔名」即可辨識，不同容器可以放入不同內容的東西，有的只能接受一種編解碼器在內，有的可以接受多種，有的容器只能接受特定的編解碼器。

圖片來源：30-06 之聲音與影像的封裝

編碼和容器是一對多的的關係，同一種編碼（例如，mp3）可以放到多種不同的容器中（例如，.mp3, .mp4, .avi）。

常見的檔案格式（File Format）／容器（container）包含：

• .wav：適用於聲音，由微軟開發，屬於聲音的 raw data 容器，可以直接存放 PCM 編碼。
• .mp4：混合與串流，同時可以支援存放字幕。支援的影像編碼包含 H.26X、MPEG-4 Part2、VP9；支援的聲音編碼包含 AAC、MPEG-4 Part3。
• .ogg：混合與串流，開源免授權。支援的影像編碼包含 Theora、Daala；支援的聲音編碼包含 Vorbis、Opus、Flac、PCM。
• .flv/.f4v：混合與串流，FLV（Flash Video）由 adobe 所開發，是 .f4v 的進化版，常用於 RTMP、HTTP-FLV 協定上，並常於直播時使用此容器。支援的影像編碼包含 H264；支援的聲音編碼包含 MP3、AAC、PCM。
• .webm：混合與串流，Google 開發來專門給 HTML5 使用的。支援的影像編碼包含 VP8、VP9；支援的聲音編碼包含 Vorbis、Opus。
• .ts： 混合與串流，TS (MPEG-2 Transport Stream) 在 HLS 協議中專門使用它，同時很常在直撥使用。支援的影像編碼包含 H264、MPEG-4 part 2；支援的聲音編碼包含 MP3、AAC。

關於檔案格式可以參考筆記：[Media-Video Element](/Users/pjchen/Projects/Notes/source/_posts/HTML/[HTML] Media - Video element.md#檔案格式（file format）)。

參考資源

• 30 天之即時網路影音開發攻略(小白本) by 我是小馬克 @ iThome
• 30-02 之聲音的採集與原理：說明 PCM 的概念、**位元率（bps）**的計算。
• 30-03 之聲音的編碼與壓縮：說明不同的音訊編碼壓縮方式。
• 30-04 之影像的採集與原理：說明影像是由多個圖片（幀）、幀數、色彩所組成，並解釋影像大小的計算。
• 30-05 之影像的編碼與壓縮：說明影像常見的編碼方式
• 30-06 之聲音與影像的封裝：說明什麼是封裝、什麼是容器、常見的容器有哪些，以及使用情境。
• 30-07 之 Web 如何進行語音與影像採集 ?：說明什麼是 WebRTC
• 30-08 之 WebRTC 採集的詳細說明與聲音的加工：說明 Web Audio API 的基本使用
• 30-09 之別人要如何聽到我的聲音呢 ?：說明影音傳輸的方法
• Video Compression Basics @ AWS Elemental Foundations