2020年，直播帶貨火爆全網。想一探淘寶直播背後的前端技術？本文将帶你進入淘寶直播前端技術的世界。
對于大多數前端工程師來說，音視訊技術是一個比較少涉足的領域，本文涵蓋了流媒體技術中的文本、圖形、圖像、音頻和視訊多種理論知識，涉及到播放器、web媒體技術、主流架構等介紹，隻需要花上一點點時間，你将進入前端多媒體的領域。
音視訊基礎
▐ 視訊
✎ 基礎概念
✎ 視訊容器格式
容器格式相信大家經常見到：
MP4、AVI、FLV、TS/M3U8、WebM、OGV、MOV...
▐ 音頻
✎ 音頻容器格式
音頻格式也比較常見：WAV、AIFF、AMR、MP3、Ogg...
✎ 音頻編碼格式
直播技術
▐ 流媒體協定
每一個你在網絡上觀看的視訊或音頻媒體都是依靠特定的網絡協定進行資料傳輸，基本分布在會話層（Session Layer）、表示層（Presentation Layer）、應用層（Application Layer）。
常用協定：RTMP、RTP/RTCP/RTSP、HTTP-FLV、HLS、DASH。各個協定都有自己優勢與劣勢。
▐ 推拉流過程
主播在裝置上開啟直播，采集裝置将主播聲音及畫面采集後通過對應協定推流到「流媒體伺服器」上。此時觀看端(即拉流端)通過拉流協定即可從「流媒體伺服器」上拉取到流資料進行播放。
播放器
本節主要講述播放器相關技術，在本節中會簡要講述播放器在拿到相關流之後如何運作。
▐ 拉流
第一步是拉流，在播放之前率先需要拿到視訊流才可能執行播放。
舉個例子，flv格式的視訊流資料，我們可以通過浏覽器提供的：Fetch API、Stream API 進行拉流。
▐ 解封裝
拿到流資料之後，緊接着需要執行解封裝操作。在開始播放的之前，需要把圖像、聲音、字幕(可能不存在)等從拉取的流資料中分離出來，這個分離的行為和過程就是解封裝(demux)。
在解封裝之後獲得圖像、聲音、字幕等基本流，而後基本流可以通過解碼器進行解碼。
▐ demux(解碼)
從上層解封裝中，我們了解到，在解封裝之後，需要對分離出來的原始碼流進行解碼，生成音、視訊播放器可播放的資料。
在解碼過程中，我們會得到各式各樣的資料，我們挑選幾個重要的來講：
✎ SPS 和 PPS
這倆哥們兒決定了最大視訊分辨率、幀率等以及還有一系列視訊播放當中的參數。PPS通常與SPS一起，儲存在碼流的起始位置。
SPS、PPS中儲存了一組編碼視訊序列的全局參數，如果丢掉，解碼過程很可能GG。
✎ IBP幀
- I幀，關鍵幀。I幀進行幀内預測，可以單獨解碼本幀的資料，I幀通常是每個GOP（MPEG所使用的一種視訊壓縮技術）的第一幀，經過适度地壓縮，作為随機通路的參考點可以當成靜态圖像。
- B幀，向前預編碼幀。它要使用一個前面的I幀或P幀和一個後面的I幀或P幀進行預測。不僅要取得之前的緩存畫面，還要解碼之後的畫面，通過前後畫面的與本幀資料的疊加取得最終的畫面。
- P幀，前向預測編碼在幀(predictive-frame),通過将圖像序列中前面已編碼幀的時間備援資訊去充分去除壓縮傳輸資料量的編碼圖像，也成為預測幀。
✎ SEI(補充增強資訊)
- 視訊編碼器在輸出視訊碼流的時候，可以沒有SEI。舉個簡單例子，之前特别火的直播答題，通過SEI傳遞較多和答題業務相關的資訊，并通過SEI承載的資訊，優化題目顯示和觀衆音視訊觀看的同步性。
✎ PTS和DTS
- DTS（Decoding Time Stamp）：即解碼時間戳，這個時間戳的意義在于告訴播放器該在什麼時候解碼這一幀的資料。
-
PTS（Presentation Time Stamp）：即顯示時間戳，這個時間戳用來告訴播放器該在什麼時候顯示這一幀的資料。
簡而言之，這倆哥們兒很可能直接決定了你音視訊播放是不是同步的。
解碼還會生成各式各樣的産物，這裡就不展開介紹了，有興趣的同學可以在本篇最後檢視。
▐ remux(複用)
有demux，自然就有remux。把基本的音頻ES、視訊ES、字幕ES等組合成一個完整的多媒體就是Remux(複用)。
對一個視訊來說，改變封裝格式，改變視訊編碼，需要remux和demux的配合。這裡不展開叙述。
▐ 渲染
渲染，指的是将解碼後的資料，在 pc 硬體上（顯示器、揚聲器）進行播放。負責渲染的子產品我們稱之為渲染器(Render)，視訊渲染器主流有EVR（Enhanced Video Render）以及 madVR (madshi Video Render)，Web 播放器一般使用 video 标簽來嵌入。
自定義渲染：以我們的H.265播放器為例，利用浏覽器提供的接口來實作一個模拟的 video 标簽，通過 canvas 和 audio 來實作渲染。
web媒體技術
▐ webRTC
網頁即時通信（英語：Web Real-Time Communication），它允許網絡應用或者站點，在不借助中間媒介的情況下，建立浏覽器之間點對點（Peer-to-Peer）的連接配接，實作視訊流和（或）音頻流或者其他任意資料的快速傳輸。
組成形式：視訊引擎（VideoEngine）、音效引擎（VoiceEngine）、會議管理（Session Management）、iSAC(音效壓縮)、VP8（Google自家的WebM項目的視訊編解碼器）、APIs（Native C++ API, Web API）
▐ MSE
用過播放器的同學對于MSE肯定不會陌生。媒體源擴充 API（MSE） 提供了實作無插件且基于 Web 的流媒體的功能。使用 MSE，媒體串流能夠通過 JavaScript 建立，并且能通過使用 audio 和 video 元素進行播放。
MSE 大大地擴充了浏覽器的媒體播放功能，提供允許 JavaScript 生成媒體流。這可以用于自适應流（adaptive streaming）及随時間變化的視訊直播流（live streaming）等應用場景。
這裡不展開叙述MSE的使用，感興趣的同學可以去搜尋一下MSE，相信能幫助到你們。
▐ WebXR
XR 是 Extended Reality (擴充現實) 的簡寫，包括了 VR (虛拟現實)，AR (增強現實)，MR (Mixed reality，混合現實)，WebXR 支援各種 XX 現實的裝置。WebXR 允許開發人員建立在所有VR/AR裝置都可運作的沉浸式内容，以實作基于 Web 的 VR/AR 體驗。
▐ WebGL
WebGL（全寫 Web Graphics Library）是一種 3D 繪圖示準，并允許使用者與之互動。這種繪圖技術标準允許把 JavaScript 和 OpenGL ES 2.0 結合在一起，通過增加 OpenGL ES 2.0 的一個 JavaScript 綁定，WebGL 可以為 HTML5 Canvas 提供硬體 3D 加速渲染，這樣 Web 開發人員就可以借助系統顯示卡來在浏覽器裡更流暢地展示 3D 場景和模型了，還能建立複雜的導航和資料視覺化。
WebGL 基于 canvas 畫布來進行渲染。在「播放器」章節，我們了解到播放器可以通過canvas實作播放器圖像渲染，通過WebGL，播放器播放流暢性能等能力得到增強。
▐ WebAssembly
WebAssembly 或者 wasm 是一個可移植、體積小、加載快并且相容 Web 的全新格式，是由主流浏覽器廠商組成的 W3C 社群團體制定的一個新的規範。
感興趣的同學可以去
https://webassembly.org/了解學習。
基于wasm，播放器可以與FFmpeg結合，對目前浏覽器器不能夠識别的H.265視訊進行解碼。
使用的開源産品和架構
市面上目前流行着許多開源産品和架構，我們為各位同學收集了一些優秀的主流架構。
▐ flv.js
flv.js 是 Bilibili 網站開源的 HTML5 flv 播放器，基于 HTTP-FLV 流媒體協定，通過純 js 實作 FLV 轉封裝，使 flv 格式檔案能在 web 上進行播放。
官方Github：
https://github.com/bilibili/flv.js▐ hls.js
hls.js是基于Http Live Stream協定開發，利用Media Source Extension，用于實作HLS在web上播放的一款js播放庫。
值得一提的是由于HLS協定由蘋果提出，并且在移動端裝置上廣泛支援，是以可以被廣泛應用與直播場景。
官方GitHub：
https://github.com/video-dev/hls.js/▐ video.js
video.js是一款基于html5的播放器，同時支援h5和flash播放，并且擁有超過100個插件可進行使用，可滿足hls、dash格式播放，支援定制主題，字幕擴充等不同層次的訴求，在世界範圍擁有大量的應用場景。
https://github.com/videojs/video.js官方文檔：
https://videojs.com/▐ FFmpeg
FFmpeg 是一套領先的多媒體架構，是一套開源且跨平台的多媒體解決方案，提供了音視訊的編碼、解碼、轉碼、封裝、解封裝、流媒體、濾鏡、播放等功能，官網位址
對于前端來說FFmpeg可以用來：
- JS播放器：可以基于FFmpeg和WebAssembly實作浏覽器端的JS播放器，或擴充浏覽器端其他的音視訊能力。
- Node子產品 fluent-ffmpeg：node.js中非常實用的子產品，該子產品簡化了ffmpeg複雜的指令操作，且配合檔案上傳以及視訊流的處理等非常實用，更多詳情可參考 fluent-ffmpeg
▐ OBS
OBS（Open Broadcaster Software）是一個用于錄制和進行網絡直播的自由開源軟體包。OBS使用C和C++語音編寫，提供實時源和裝置捕獲、場景組成、編碼、錄制和廣播。資料傳輸主要通過實時消息協定（RTMP）完成，可以發送到任何支援RTMP的目的地，包括YouTube、Twitch.tv、Instagram和Facebook等流媒體網站。
在視訊編碼方面，OBS可以使用X264自由軟體程式庫、Intel Quick Sync Video、Nvidia NVENC和AMD視訊編碼引擎将視訊流編碼為H.264/MPEG-4 AVC和H.265/HEVC格式。音頻可以使用MP3或AAC編解碼器進行編碼。進階使用者可以選擇使用Libavcodec/libavformat中的任何編解碼器和容器，也可以将流輸出到自定義FFmpeg URL。
▐ MLT
MLT是一個夠用于多種類型app非線性視訊編輯器引擎，且不局限于桌面領域(同樣适用于Android、iOS等平台，功能十分強大。
官網位址：
https://www.mltframework.org/Github：
https://github.com/mltframework/mlt/由于篇幅問題，本文僅介紹目前淘寶直播背後的技術，更多技術細節可參考：
淘寶直播知識文檔