大家好，很高興又見面了，我是"前端進階"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!
1.什麼是WebRTC？
WebRTC 是一組 JavaScript API，可以在兩個浏覽器之間建立點對點連接配接， 實作音頻和視訊等資料的傳輸，也可以用它建立有語音/視訊通話功能的應用程式。
WebRTC 的特别之處是：一旦建立了連接配接，就可以直接在浏覽器之間實時傳輸資料，不需要借助伺服器，是以降低了延遲，是以使用者都喜歡用 webRTC 直接傳輸音視訊。
在WebRTC誕生之前，開發實時音視訊應用的成本非常高，需要考慮的技術問題很多，如音視訊的編解碼，資料傳輸延時、丢包、網絡抖動、回音處理和消除等，如果要相容浏覽器端的實時音視訊通信，還需要額外安裝插件。
可喜的是，現在幾乎所有主流浏覽器都支援 WebRTC。 此外，還有針對不同平台（例如 iOS 或 Android）的 WebRTC SDK。下面是WebRTC的浏覽器支援情況：
WebRTC 由以下關鍵組成部分：
- RTCPeerConnection： 允許連接配接到遠端對等點，保持和監視連接配接，在連接配接完成後關閉。可通過如下方法快速建立RTCPeerConnection：
new RTCPeerConnection()
new RTCPeerConnection(configuration) - RTCDataChannel： 提供雙向網絡通信通道，允許對等方傳輸任意資料。通過RTCPeerConnection示例對象的createDataChannel方法快速建立RTCDataChannel對象。
const pc = new RTCPeerConnection();
const dc = pc.createDataChannel("my channel");
dc.onmessage = function (event) {
console.log("received: " + event.data);
};
dc.onopen = function () {
console.log("datachannel open");
};
dc.onclose = function () {
console.log("datachannel close");
}; - MediaStream： 旨在讓您從本地輸入裝置（如相機和麥克風）通路媒體流。 它用作管理資料流上的操作的一種方式，例如記錄、發送、調整大小和顯示流的内容。通過如下構造函數快速建立MediaStream執行個體。
const newStream = new MediaStream();
const newStream = new MediaStream(stream);
const newStream = new MediaStream(tracks[]); 2.什麼是WebSocket？
WebSocket 是一種實時技術，可通過持久的單套接字socket連接配接在 Web 用戶端和 Web 伺服器之間實作全雙工、雙向通信。
WebSocket 連接配接以 HTTP 請求/響應握手開始。 如果此初始握手成功，則用戶端和伺服器已同意使用為 HTTP 請求建立的現有 TCP 連接配接作為 WebSocket 連接配接。 隻要需要，這個連接配接就會一直保持活躍狀态，允許伺服器和用戶端全雙工的發送資料。
WebSocket 包括兩個核心組成子產品：
- WebSocket 協定： WebSocket 協定于 2011 年 12 月通過 RFC 6455 标準化，支援通過 Web 在 WebSocket 用戶端和 WebSocket 伺服器之間進行實時通信。 它支援二進制資料和文本字元串的傳輸。
- WebSocket API： 允許您管理 WebSocket 連接配接、發送和接收消息以及偵聽 WebSocket 伺服器觸發的事件。
幾乎所有現代網絡浏覽器都支援 WebSocket API，如下圖所示：
3.WebRTC的優點和缺點
3.1 WebRTC優勢
WebRTC的優勢主要集中在以下幾個方面：
- 強大的安全保障： 通過 WebRTC 傳輸的資料在安全實時傳輸協定 (SRTP) 的幫助下進行加密和驗證。
- 開源免費： 該項目得到了強大而活躍的社群的支援，同時Apple、Google 和 Microsoft 等組織也積極參與。
- 獨立于平台和裝置： WebRTC 應用程式可以在任何支援 WebRTC 的浏覽器上運作，無論作業系統或裝置類型如何。
3.2 WebRTC 缺點
WebRTC的的劣勢也很明顯，主要集中在以下幾個方面：
- 盡管 WebRTC 是一種點對點技術，您仍然需要管理 Web 伺服器并為其付費。 為了使兩個對等點互相對話，您需要使用信令伺服器來建立、管理和終止 WebRTC 通信會話。 在一對多的 WebRTC 廣播場景中，您可能需要一個 WebRTC 媒體伺服器來充當媒體中間件。
- WebRTC 非常占用 CPU，尤其是在處理視訊内容和大量使用者時。 這使得使用和擴充 WebRTC 應用程式成本高昂且困難重重。
- WebRTC 很難上手。 您需要探索和掌握大量概念：各種 WebRTC 接口、編解碼器和媒體處理、網絡位址轉換 (NAT) 和防火牆、UDP（WebRTC 使用的主要底層通信協定）等等。
WebRTC的peerjs庫可以用于快速實作Peer-to-peer通信！
4.WebSocket的優缺點
4.1 WebSocket 優勢
在 WebSocket 出現之前，AJAX 長輪詢和 Comet 等 HTTP 技術是建構實時應用程式的标準。 與 HTTP 相比，WebSocket 無需為每個請求建立新連接配接，進而大大減少了每條消息的大小（無 HTTP Header）。 與 HTTP 相比，這有助于節省帶寬、改善延遲并減少伺服器端的 WebSockets 負擔。
作為一種事件驅動技術，WebSocket 允許在無需用戶端主動請求的情況下傳輸資料。 在用戶端需要對事件（無法預測的事件，例如欺詐警報）做出快速反應的情況下有優勢。
4.2 WebSocket 缺點
- WebSocket 是有狀态的： 這可能很難處理，尤其是在規模上，因為它需要伺服器層跟蹤每個單獨的 WebSocket 連接配接并維護狀态資訊。
- 當連接配接終止時，WebSockets 不會自動恢複：這就是存在許多 WebSocket 庫的部分原因。
- 代理伺服器的公司網絡：會阻止 WebSocket 連接配接。
5.WebRTC vs WebSockets：主要差別是什麼？
WebSocket 提供用戶端、服務端通信協定，而 WebRTC 為浏覽器和移動應用程式提供點對點協定和通信功能。
WebSocket 在 TCP 上工作，而 WebRTC 主要在 UDP 上。
當資料完整性至關重要時，WebSocket 是更好的選擇，因為您可以從 TCP 的底層可靠性中獲益。 而，如果速度更重要并且丢失一些資料包是可以接受的，WebRTC是更好的選擇。
WebRTC 主要設計用于流式傳輸音頻和視訊内容。 也可以使用 WebSockets 流式傳輸媒體，但 WebSocket 技術更适合使用 JSON 等格式傳輸文本/字元串資料。
5.1 什麼時候使用 WebRTC？
WebRTC 是以下用例的不錯選擇：
- 音頻和視訊通信
- 檔案共享
- 螢幕共享
- 直播活動
- 物聯網裝置（例如，無人機或嬰兒螢幕流式傳輸實時音頻和視訊資料）
5.2 什麼時候使用 WebSocket？
們可以将 Web Sockets 用例大緻分為兩個不同的類别：
- 實時更新：其中通信是單向的，伺服器正在将低延遲（頻繁的）更新流式傳輸到用戶端。
- 雙向通信，用戶端和伺服器都發送和接收消息。包括聊天、虛拟活動等。 WebSockets 還可用于支援多使用者同步協作功能，例如多人同時編輯同一文檔。
5.3 什麼時候用WebRTC和WebSocket組合？
WebSockets 和 WebRTC 是互補的技術。 如前所述，WebRTC 允許點對點通信，但它仍然需要伺服器，以便這些點可以通過稱為信令的過程協調通信。 通常，信令涉及傳輸資訊，例如媒體中繼資料（例如，編解碼器和媒體類型）、網絡資料（例如，主機的 IP 位址和端口）以及用于打開和關閉通信的會話控制消息。
需要牢記的關鍵一點：WebRTC 不提供标準的信令實作，允許開發人員為此目的使用不同的協定。 WebSocket 協定通常用作 WebRTC 應用程式的信号機制，允許對等點實時交換網絡和媒體中繼資料。
6.總結
本文重點論述了WebRTC 、WebSocket協定，兩者的異同、使用場景、以及何時可以組合使用。關于WebRTC、WebSocket，筆者已經編寫過至少3篇文章進行了重點論述，如果有需求可以直接點選文末的資料即可。
參考資料
WebRTC已成為HTML5标準？是時候開始學習了？
HTTP、WebSocket、gRPC 或 WebRTC：哪種協定最适合您的應用程式？
WebRTC成為HTML5标準？SDP、STUN、TURN你想知道的都在這裡！
https://ably.com/topic/webrtc-vs-websocket