PJCHENder 未整理筆記

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

2019-06-24

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

@(JavaScript)[JavaScript, WebAPIs, WebRTC, media]

以下內容多整理:

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

imgur

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

聲音採集

  • 脈碼調變(PCM, pulse-code modulation):可以用來指將類比訊號轉換為數位訊號的「方式」,或者指透過這個方式產生的「編碼」,可以想像成是聲音的 RAW 檔,又稱「無損編碼」。
1
位元率 (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 來呈現,則只能表示「全紅」或「全白」(21);若用 2 個 bit 來呈現,則可以用 4 種明度來呈現紅到白(22);用 3 個 bit 則可以用 8 種(23)明度來呈現;當我們用 8 bit 時,則可以有 256 種(28)來呈現。

imgur

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

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

Imgur

顏色編碼可以分成:

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

影格率/影像幀數/幀率(FPS)與影片流暢度

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

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

imgur

螢幕

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

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

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

位元率(bitrate / bit per second):影像檔案大小計算

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

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

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

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

imgur

Constant and variable bitrates

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

Imgur

影像編碼壓縮

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

Imgur

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

  • 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,因此新的演算法可以透過追蹤每個影格與影格間哪些有改變、哪些相同的方式來做更有效率的壓縮。

imgur

動態影像 - GOP 與 MPEG

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

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

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

imgur

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

Imgur

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

Imgur

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

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

Imgur

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

Imgur

瀏覽器支援

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

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

Media formats for HTML audio and video @ MDN

容器:聲音和影像的封裝

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

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

imgur

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

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

常見的檔案格式(File Format)/容器(container)包含:

  • .wav:適用於聲音,由微軟開發,屬於聲音的 raw data 容器,可以直接存放 PCM 編碼。
  • .mp4:混合與串流,同時可以支援存放字幕。支援的影像編碼包含 H.26XMPEG-4 Part2VP9;支援的聲音編碼包含 AACMPEG-4 Part3
  • .ogg:混合與串流,開源免授權。支援的影像編碼包含 TheoraDaala;支援的聲音編碼包含 VorbisOpusFlacPCM
  • .flv/.f4v:混合與串流,FLV(Flash Video)由 adobe 所開發,是 .f4v 的進化版,常用於 RTMPHTTP-FLV 協定上,並常於直播時使用此容器。支援的影像編碼包含 H264;支援的聲音編碼包含 MP3AACPCM
  • .webm:混合與串流,Google 開發來專門給 HTML5 使用的。支援的影像編碼包含 VP8VP9;支援的聲音編碼包含 VorbisOpus
  • .ts: 混合與串流,TS (MPEG-2 Transport Stream) 在 HLS 協議中專門使用它,同時很常在直撥使用。支援的影像編碼包含 H264MPEG-4 part 2;支援的聲音編碼包含 MP3AAC

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

參考資源

掃描二維條碼,分享此文章