2019年7月2日

[筆記] WebRTC 網路影音－基礎知識篇（basic knowledge of media, video, and audio）

      , ,  
Photo by freestocks.org on Unsplash

以下內容完全為整理自 30天之即時網路影音開發攻略(小白本) by 我是小馬克 @ iThome 的筆記，無原創內容。
imgur
圖片來源： 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 所產生的編碼稱作「無損編碼」，這就類似照片的 RAW 檔，但因為這種 RAW 檔所佔的空間太大了，因此就有許多不同用來「壓縮編碼」的方式。
壓縮編碼的方式可以大致分成**「無損編碼」和「有損編碼」**這兩種。無損編碼可以將檔案還原成原本的 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 編碼的容器。

影像採集

數位「圖像」是有一堆帶有顏色的「格子」所組成，每個格子都稱作一個「像素（pixel）」。像素的顏色編碼可以分成：
  • RGB：由 Red, Green, Blue 組成，每一種顏色包含 8 bit（0~255），也就是 RGB 各用 1 byte 來記錄，總共需要 3 bytes
  • YUV：所需的空間更小，適合用於視訊。

影像幀數（FPS）

影像則可視為一堆連續的圖片，而每一張圖片就稱作一幀（frame），連續好幾幀就會變成動畫，當我們說幀數為 30 表示這個影片每秒鐘由 30 張圖片組成，又稱 30fps。FPS (Frames Per Second) 的值越大，畫面越流暢，單需要佔用多的儲存空間。
在一個連續動作中會由許多幀組成，其中有一些會被稱作關鍵幀（Keyframe），連續動作中的其他幀都是根據這個「關鍵幀」進行小幅度的變動，並把其他變化不大的部分拿掉，以此減少所需的空間。

影像畫質（垂直解析度）

一般影像的畫質會以 720p, 1080p, 2k, 4k 表示，這代表的是該影片的垂直解析度。若畫面是 16:9 的況下， 1080p 表示每張畫面的大小是由 1920 x 1080 個像素組成。

影像檔案大小計算

在不壓縮的情況下，一部 10 秒鐘、30 fps 、1080p 的全彩影片，需要的容量會是：
10(sec) X 30(fps) X 1920 X 1080 X 24(rgb) = 14929920000 bit = 1866 MB

影像編碼壓縮

keywords: H.264, H.265, VP8, VP9
由於原始的影像檔案太過龐大，因此有許多不同的方式試著嘗試壓縮原始的影像編碼，其實像是把相似的像素動手腳、相近時間的圖片（幀）動手腳、刪除多餘的編碼、刪除人眼無法辨識的多餘部分。
常用的編碼主要可以分成 H.264 和 VPX：
  • H.264：是最主流的影像編碼技術，不論手機、平板或網路串流都有使用，蘋果裝置完全支持，硬體上使用需要取得授權。
  • H.265：H.264 的進階，壓縮率更高，但相容性目前還沒這麼好。
  • VP8：由 Google 收購，主要著重在網路傳輸，以較低的品質處理網路頻寬問題，Chrome、Android、Youtube、WebRTC 絕對支援，硬體上使用不需授權。
  • VP9：為 VP8 的進化，大部分的瀏覽器都有支援（除了 safari）

瀏覽器支援

目前 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）**的過程，透過封裝可以讓聲音和影像的內容同步上更方便，且提供索引內容，讓用戶可以直接選擇要看哪個地方，另外如果只傳送編碼本身而沒有說明編碼資訊，接收檔案的那端會不知道該用哪種方式進行解碼。
imgur
圖片來源：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）)。

參考資源

0 意見:

張貼留言