【好書推薦】《WebRTC音視頻開發(fā)：React+Flutter+Go實戰(zhàn)》

導(dǎo)讀：WebRTC是一個支持在網(wǎng)頁瀏覽器中進(jìn)行實時語音對話或視頻對話的解決方案。于2011年開源，并在Google、Mozilla、Opera的支持下被納入萬維網(wǎng)聯(lián)盟的W3C推薦標(biāo)準(zhǔn)。

在WebRTC出現(xiàn)之前，F(xiàn)lash RTMP是在網(wǎng)頁端進(jìn)行RTC的主要選擇。但是老舊平臺的使用情況已經(jīng)出現(xiàn)了衰退，并且安全問題也愈發(fā)嚴(yán)重。隨著HTML5的發(fā)展，F(xiàn)lash Player已經(jīng)系統(tǒng)地從瀏覽器中慢慢移出了，Chrome和Firefox已經(jīng)要求用戶提供額外的使用Flash的確認(rèn)信息，目前Chrome會在后臺中阻止Flash的加載。如今大量開發(fā)遠(yuǎn)程教育、視頻會議、視頻會診等項目時均已使用WebRTC技術(shù)。

WebRTC 項目的原則是API開源、免費、標(biāo)準(zhǔn)化、瀏覽器內(nèi)置，比現(xiàn)有的技術(shù)更高效。

WebRTC雖然冠以“Web”之名，但并不受限于傳統(tǒng)互聯(lián)網(wǎng)應(yīng)用或瀏覽器的終端運行環(huán)境。實際上，無論終端運行環(huán)境是瀏覽器、桌面應(yīng)用、移動設(shè)備（Android或iOS）還是IoT設(shè)備，只要IP連接可到達(dá)且符合WebRTC規(guī)范就可以互通。這一點釋放了大量智能終端（或運行在智能終端上的App）的實時通信能力，打開了許多對于實時交互性要求較高的應(yīng)用場景的想象空間，如在線教育、視頻會議、視頻社交、遠(yuǎn)程協(xié)助、遠(yuǎn)程操控等，都是其合適的應(yīng)用領(lǐng)域。



WebRTC主要應(yīng)用在實時通信方面，其優(yōu)點總結(jié)為如下幾點:

• 跨平臺：可以在Web、Android、iOS、Windows、MacOS、Linux環(huán)境下運行WebRTC應(yīng)用。
• 實時傳輸：傳輸速度快，延遲低，適合實時性要求較高的應(yīng)用場景。
• 音視頻引擎：強大的音視頻處理能力。
• 免插件：不需要安裝任何插件，打開瀏覽器即可使用。
• 免費：雖然WebRTC技術(shù)已經(jīng)較為成熟，集成了最佳的音視頻引擎和十分先進(jìn)的Codec，但仍是免費的。
• 強大的打洞能力：WebRTC技術(shù)包含了使用STUN、ICE、TURN、RTP-over-TCP的關(guān)鍵NAT和防火墻穿透技術(shù)，并支持代理。
• 主流瀏覽器支持：包括Chrome、Safari、Firefox、Edge等。

WebRTC的應(yīng)用場景十分廣泛，尤其是在網(wǎng)絡(luò)越來越發(fā)達(dá)的情況下。音視頻會議、在線教育、即時通信工具、游戲、人臉識別等，是當(dāng)下和未來的重要發(fā)展方向，5G時代的到來必然會引起對WebRTC井噴式的應(yīng)用。



WebRTC目前主要的應(yīng)用領(lǐng)域如下:

• 音視頻會議
• 在線教育
• 照相機
• 音樂播放器
• 共享遠(yuǎn)程桌面
• 錄制
• 即時通信工具
• P2P網(wǎng)絡(luò)加速
• 文件傳輸工具
• 游戲
• 實時人臉識別

WebRTC整體架構(gòu)



WebRTC目前已經(jīng)形成了一個HTML5的規(guī)范。由W3C組織來制定并維護(hù)這個標(biāo)準(zhǔn)，其總體架構(gòu)如下圖所示。

對于這個框架，不同的開發(fā)人員關(guān)注的內(nèi)容不同，例如：

• Video Conference、Video Call、Remote Education為應(yīng)用層，指具體的音視頻應(yīng)用，是應(yīng)用開發(fā)人員最關(guān)注的。
• Web API部分是Web應(yīng)用開發(fā)者API層，為上層應(yīng)用層提供API服務(wù)，是應(yīng)用開發(fā)者調(diào)用的接口。
• C++ API部分是面向瀏覽器廠商的API層。
• Session Management為信令管理層，可由開發(fā)者自行定義實現(xiàn)。
• VoiceEngine、VideoEngine以及Transport為WebRTC的核心內(nèi)容，可由WebRTC的應(yīng)用SDK廠商進(jìn)行優(yōu)化處理。
• Audio Capture、Video Capture可供瀏覽器廠商自定義實現(xiàn)。
  

WebRTC架構(gòu)圖中涉及的內(nèi)容及概念較多，接下來將詳細(xì)說明。

1. Web應(yīng)用

Web開發(fā)者可以基于Web API開發(fā)基于視頻、音頻的實時通信應(yīng)用，如視頻會議、遠(yuǎn)程教育、視頻通話、視頻直播、游戲直播、遠(yuǎn)程協(xié)作、互動游戲、實時人臉識別、遠(yuǎn)程機械手操作等。

2. Web API

Web API是面向第三方開發(fā)者的WebRTC標(biāo)準(zhǔn)API（JavaScript），使開發(fā)者能夠容易地開發(fā)出類似于網(wǎng)絡(luò)視頻聊天的Web應(yīng)用，最新的技術(shù)進(jìn)展可以參考W3C的WebRTC文檔https://www.w3.org/TR/webrtc/，常用的API如下所示。

• MediaStream：媒體數(shù)據(jù)流，如音頻流、視頻流等。
• RTCPeerConnection：該類很重要，提供了應(yīng)用層的調(diào)用接口。
• RTCDataChannel：傳輸非音視頻數(shù)據(jù)，如文字、圖片等。
  

WebRTC的API接口非常豐富，更多詳細(xì)的API可以參考網(wǎng)址https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API，該文檔提供了中文說明。

3. C++ API

底層API使用C++語言編寫，使瀏覽器廠商容易實現(xiàn)WebRTC標(biāo)準(zhǔn)的Web API，抽象地對數(shù)字信號過程進(jìn)行處理。如RTCPeerConnection API是每個瀏覽器之間點對點連接的核心，RTCPeerConnection是WebRTC組件，用于處理點對點間流數(shù)據(jù)的穩(wěn)定和有效通信。

4. Session Management

Session Management是一個抽象的會話層，提供會話建立和管理功能。該層協(xié)議留給應(yīng)用開發(fā)者自定義實現(xiàn)。對于Web應(yīng)用，建議使用WebSocket技術(shù)來管理信令Session。信令主要用來轉(zhuǎn)發(fā)會話雙方的媒體信息和網(wǎng)絡(luò)信息。

5. Transport

Transport為WebRTC的傳輸層，涉及音視頻的數(shù)據(jù)發(fā)送、接收、網(wǎng)絡(luò)打洞等內(nèi)容，可以通過STUN和ICE組件來建立不同類型的網(wǎng)絡(luò)間的呼叫連接。

6. VoiceEngine

VoiceEngine（音頻引擎）是包含一系列音頻多媒體處理的框架，包括從音頻采集到網(wǎng)絡(luò)傳輸端等整個解決方案。VoiceEngine是WebRTC極具價值的技術(shù)之一，是Google收購GIPS公司后開源的，目前在VoIP技術(shù)上處于業(yè)界領(lǐng)先地位。下面介紹主要的模塊。

iSAC（Internet Speech Audio Codec）是針對VoIP和音頻流的寬帶和超寬帶音頻編解碼器，是WebRTC音頻引擎的默認(rèn)編解碼器，參數(shù)如下所示。

• 采樣頻率：16kHz，24kHz，32kHz（默認(rèn)為16kHz）。
• 自適應(yīng)速率為：10kbps ~ 52kbps。
• 自適應(yīng)包大小：30ms~60ms。
• 算法延時：frame + 3ms。
  
  

iLBC（Internet Low Bitrate Codec）是VoIP音頻流的窄帶語音編解碼器，參數(shù)如下所示。

• 采樣頻率：8kHz。
• 20ms幀比特率為15.2kbps。
• 30ms幀比特率為13.33kbps。

NetEQ For Voice是針對音頻軟件實現(xiàn)的語音信號處理元件。NetEQ算法是自適應(yīng)抖動控制算法以及語音包丟失隱藏算法，該算法能夠快速且高解析度地適應(yīng)不斷變化的網(wǎng)絡(luò)環(huán)境，確保音質(zhì)優(yōu)美且緩沖延遲最小，是GIPS公司獨特的技術(shù)，能夠有效地處理網(wǎng)絡(luò)抖動和語音包丟失時對語音質(zhì)量產(chǎn)生的影響。NetEQ也是WebRTC中一個極具價值的技術(shù)，對于提高VoIP質(zhì)量有明顯效果，與AEC、NR、AGC等模塊集成使用效果更好。

• Acoustic Echo Canceler（AEC，回聲消除器）是一個基于軟件的信號處理元件，能實時地去除Mic采集到的回聲。
• Noise Reduction（NR，噪聲抑制）也是一個基于軟件的信號處理元件，用于消除與相關(guān)VoIP的某些類型的背景噪聲（如嘶嘶聲、風(fēng)扇噪音等）。

7. VideoEngine

VideoEngine是WebRTC視頻處理引擎，包含一系列視頻處理的整體框架，從攝像頭采集視頻到視頻信息網(wǎng)絡(luò)傳輸再到視頻顯示，是一個完整過程的解決方案。下面介紹主要的模塊。

• VP8是視頻圖像編解碼器，也是WebRTC視頻引擎默認(rèn)的編解碼器。VP8適合實時通信應(yīng)用場景，因為它主要是針對低延時而設(shè)計的編解碼器。VPx編解碼器是Google收購ON2公司后開源的，現(xiàn)在是WebM項目的一部分，而WebM項目是Google致力于推動的HTML5標(biāo)準(zhǔn)之一。
• Video Jitter Buffer（視頻抖動緩沖器）模塊可以降低由于視頻抖動和視頻信息包丟失帶來的不良影響。
• Image Enhancements（圖像質(zhì)量增強）模塊對網(wǎng)絡(luò)攝像頭采集到的視頻圖像進(jìn)行處理，包括明暗度檢測、顏色增強、降噪處理等功能，用來提升視頻質(zhì)量。

如果想深入了解WebRTC更多開發(fā)技術(shù)，歡迎閱讀《WebRTC音視頻開發(fā)：React+Flutter+Go實戰(zhàn)》一書。

點擊鏈接了解詳情并購買

本書從基本概念、基礎(chǔ)應(yīng)用和綜合案例系統(tǒng)介紹WebRTC技術(shù)的原理與應(yīng)用，提供了前后端整體解決方案：PC-Web端使用的是React技術(shù)，后端使用的是Golang技術(shù)，移動端使用的是Flutter技術(shù)。

結(jié)合一對一視頻通話案例，幫助讀者快速上手，深入理解WebRTC的各種功能，并快速搭建自己的應(yīng)用。


主要內(nèi)容
主要內(nèi)容包括：WebRTC技術(shù)發(fā)展歷史、應(yīng)用場景、整體架構(gòu)，WebRTC通話原理，Web開發(fā)環(huán)境搭建，HTML5項目簡介，訪問設(shè)備的設(shè)置，音視頻設(shè)備的設(shè)置，音視頻的錄制，結(jié)合React+Flutter+Go技術(shù)開發(fā)音視頻應(yīng)用的案例。




內(nèi)容特色

• 容易上手——通過一個個小案例，只需要簡單幾步，就能讓程序運行起來。
• 多端講解——移動端App覆蓋iOS和Android系統(tǒng)，還包括桌面端Web接口的使用方法、后端信令服務(wù)及中轉(zhuǎn)服務(wù)的對應(yīng)實現(xiàn)。
• 面向?qū)崙?zhàn)——配有一對一視頻通話綜合案例，可以實現(xiàn)前后端語音視頻通信。
• 覆蓋全面——從訪問設(shè)備、音量檢測、設(shè)備枚舉、媒體流、媒體軌道、媒體錄制、連接建立到數(shù)據(jù)通道，進(jìn)行全方位講解。
• 方案完整——Web端采用React技術(shù)，可進(jìn)行組件化開發(fā)以及復(fù)雜界面展示；App端使用Flutter跨平臺技術(shù)，視頻渲染能力強并且可以跨多終端；服務(wù)器端采用Go技術(shù)，可以充分利用服務(wù)器硬件資源，加快開發(fā)速度。
• 功能豐富——涉及視頻通話及視頻會議的眾多功能點，如語音視頻通信、共享桌面、電子白板、文件傳輸、音頻錄制、視頻錄制、屏幕錄制、白板錄制等。

作者簡介

亢少軍，資深開發(fā)者、創(chuàng)業(yè)者，《Flutter技術(shù)入門與實戰(zhàn)》作者。專注于視頻通信技術(shù)領(lǐng)域，多年從事視頻會議、遠(yuǎn)程教育等相關(guān)技術(shù)研發(fā)，對于Android、iOS以及跨平臺開發(fā)技術(shù)有比較深入的研究和應(yīng)用，作為主要程序員開發(fā)了多個應(yīng)用項目，涉及醫(yī)療、交通、銀行等領(lǐng)域。



目錄目錄：
●前言
【第一篇　基本概念】

●第1章　WebRTC概述2
1.1WebRTC是什么2
1.2WebRTC整體架構(gòu)4

●第2章　WebRTC通話原理7
2.1　概述7
2.2　媒體協(xié)商8
2.3　網(wǎng)絡(luò)協(xié)商11
2.4　連接建立的流程15

【第二篇　基礎(chǔ)應(yīng)用】

●第3章　HTML5示例工程準(zhǔn)備18
3.1　開發(fā)環(huán)境搭建18
3.1.1Node安裝18
3.1.2VSCode安裝19
3.2　新建示例工程20
3.2.1package.json配置21
3.2.2babel支持24
3.2.3webpack配置24
3.2.4　首頁模板文件26
3.2.5　全局樣式27
3.2.6　入口文件28
3.2.7　主組件及路由28

●第4章　訪問設(shè)備31
4.1　概述31
4.2　獲取用戶媒體數(shù)據(jù)32
4.3　打開攝像頭33
4.4　打開麥克風(fēng)35
4.5　截取視頻38
4.6　共享屏幕41
4.7　視頻濾鏡45

●第5章　音視頻設(shè)置49
5.1　概述49
5.2　分辨率概述50
5.3　分辨率設(shè)置51
5.4　音量檢測57
5.5　設(shè)備枚舉60
5.6　設(shè)置綜合示例67

●第6章　媒體流與軌道77
6.1　概述77
6.2　媒體流78
6.3MediaStreamTrack79
6.4　流與軌道API測試81
6.5　捕獲Video媒體流85
6.6　捕獲Canvas媒體流88
6.6.1　瀏覽器兼容性88
6.6.2　創(chuàng)建畫布88
6.6.3Canvas坐標(biāo)系88
6.6.4　繪制API89
6.6.5　畫板示例90

●第7章　媒體錄制95
7.1　媒體錄制原理95
7.1.1　創(chuàng)建錄制對象95
7.1.2　常用API97
7.1.3　錄制事件97
7.2　錄制音頻97
7.3　錄制視頻103
7.3.1　約束條件的區(qū)別103
7.3.2　播放器的區(qū)別103
7.3.3miniType的區(qū)別103
7.3.4　錄制視頻示例104
7.4　錄制屏幕109
7.5　錄制Canvas113

●第8章　連接建立118
8.1　概述118
8.2　連接建立的過程119
8.3　連接建立示例122
8.3.1　視頻清晰度自適應(yīng)130
8.3.2　提議/應(yīng)答信息131
8.3.3Candidate信息131
8.4　將Video發(fā)送至遠(yuǎn)端132
8.5　流方式同步白板138

●第9章　數(shù)據(jù)通道146
9.1　概述146
9.2　數(shù)據(jù)通道的概念147
9.3　發(fā)送文本消息147
9.4　發(fā)送文件154
9.4.1FileReader155
9.4.2　讀取數(shù)據(jù)156
9.4.3　發(fā)送文件示例157

●第10章　App示例工程準(zhǔn)備167
10.1Windows環(huán)境搭建167
10.2MacOS環(huán)境搭建173
10.3App方案選取178
10.4Flutter示例工程178
10.5　權(quán)限設(shè)置184
10.5.1iOS平臺設(shè)置184
10.5.2Android平臺設(shè)置184
10.6　項目配置185
10.7　入口程序186

●第11章　App音視頻技術(shù)189
11.1　概述189
11.2GetUserMedia190
11.3　屏幕共享195
11.4　控制設(shè)備200
11.5　連接建立206
11.5.1　媒體約束206
11.5.2　連接約束207
11.5.3SDP約束207
11.5.4　手機旋轉(zhuǎn)方向207
11.5.5　連接建立示例207
11.6　數(shù)據(jù)通道215

【第三篇　綜合案例】

●第12章　一對一視頻通話總體架構(gòu)224
12.1　通話流程224
12.2　技術(shù)框架226
12.3WebSocket226
12.4　信令設(shè)計228

●第13章　服務(wù)器端實現(xiàn)230
13.1Go開發(fā)環(huán)境搭建230
13.1.1Windows環(huán)境搭建230
13.1.2MacOS環(huán)境搭建231
13.2　開發(fā)工具232
13.3　后端工程介紹232
13.3.1TURN服務(wù)器運行232
13.3.2　信令服務(wù)器目錄233
13.4　依賴庫管理234
13.5　工具庫235
13.6　項目配置文件237
13.7　入口程序238
13.8Socket服務(wù)240
13.9P2P信令服務(wù)244
13.10　用戶和會話信息248
13.11　房間管理及信令處理248
13.11.1　房間管理249
13.11.2　信令處理249
13.11.3　合并邏輯并測試252

●第14章　Web端實現(xiàn)258
14.1　登錄組件258
14.2　本地視頻組件259
14.3　遠(yuǎn)端視頻組件262
14.4　信令實現(xiàn)263
14.5P2P客戶端278
14.6　視頻通話測試285

●第15章　App端實現(xiàn)287
15.1　登錄組件287
15.2　生成Id290
15.3　約束條件291
15.4　請求TurnServer292
15.5ICE配置293
15.6　封裝WebSocket294
15.7　定義狀態(tài)297
15.8　信令實現(xiàn)298
15.9P2P客戶端312
15.10　整體測試318