WebRTC的興起以及瀏覽器處理實(shí)時(shí)點(diǎn)對(duì)點(diǎn)通信能力的增強(qiáng)，使得構(gòu)建實(shí)時(shí)應(yīng)用程序比以往任何時(shí)候都更容易。本文將探討SimpleWebRTC及其在WebRTC技術(shù)實(shí)現(xiàn)中的應(yīng)用，并介紹其他可實(shí)現(xiàn)相同目標(biāo)的替代方案。

如果您需要了解WebRTC和點(diǎn)對(duì)點(diǎn)通信的背景知識(shí)，建議閱讀“WebRTC的黎明”和“getUserMedia API簡(jiǎn)介”。

由于構(gòu)建自定義WebRTC應(yīng)用程序的復(fù)雜性，本文不會(huì)提供一步一步的構(gòu)建教程。相反，我們將研究構(gòu)建可靠應(yīng)用程序所需的庫(kù)和服務(wù)器類(lèi)型。我將提供完整的示例應(yīng)用程序鏈接，您可以在構(gòu)建自己的應(yīng)用程序時(shí)參考這些鏈接。

我們將主要關(guān)注SimpleWebRTC平臺(tái)。稍后，我們將簡(jiǎn)要介紹其他商業(yè)和開(kāi)源替代方案，這些方案可以幫助您實(shí)現(xiàn)相同的目標(biāo)。

關(guān)鍵要點(diǎn)

• WebRTC允許在Web瀏覽器內(nèi)直接進(jìn)行點(diǎn)對(duì)點(diǎn)實(shí)時(shí)通信，無(wú)需第三方插件，支持Chrome、Firefox和Safari等現(xiàn)代瀏覽器。
• WebRTC中的信令（用于建立對(duì)等連接的關(guān)鍵）依賴(lài)于STUN和TURN服務(wù)器來(lái)繞過(guò)NAT（網(wǎng)絡(luò)地址轉(zhuǎn)換）和防火墻，確保在各種網(wǎng)絡(luò)配置下的連接性。
• SimpleWebRTC提供了一個(gè)構(gòu)建和部署WebRTC應(yīng)用程序的綜合平臺(tái)，提供SDK、托管服務(wù)和技術(shù)支持，使開(kāi)發(fā)人員更容易實(shí)現(xiàn)自定義視頻聊天解決方案。
• SimpleWebRTC的替代方案，例如Daily.co和其他商業(yè)平臺(tái)，提供了不同程度的易用性和自定義選項(xiàng)，以滿(mǎn)足從快速設(shè)置到完全品牌化解決方案的需求。
• WebRTC應(yīng)用程序的部署需要考慮網(wǎng)絡(luò)可靠性、安全性以及瀏覽器兼容性，商業(yè)平臺(tái)簡(jiǎn)化了許多與自定義開(kāi)發(fā)相關(guān)的復(fù)雜性。

什么是WebRTC？

WebRTC（Web實(shí)時(shí)通信）是一個(gè)開(kāi)源項(xiàng)目，允許Web瀏覽器之間進(jìn)行點(diǎn)對(duì)點(diǎn)實(shí)時(shí)通信，通過(guò)網(wǎng)絡(luò)傳輸實(shí)時(shí)視頻、音頻和數(shù)據(jù)流。Google Chrome、Mozilla Firefox、Safari、Opera和其他基于Chromium的瀏覽器已經(jīng)原生實(shí)現(xiàn)了這項(xiàng)技術(shù)。這是一個(gè)好消息，因?yàn)橛脩?hù)無(wú)需安裝第三方插件或應(yīng)用程序即可訪(fǎng)問(wèn)該技術(shù)。

較舊的瀏覽器版本和傳統(tǒng)瀏覽器（如Internet Explorer）不具備這項(xiàng)技術(shù)。用戶(hù)需要使用最新的瀏覽器。您可以查看完整的受支持瀏覽器列表：

2021年1月，萬(wàn)維網(wǎng)聯(lián)盟（W3C）將WebRTC 1.0規(guī)范從候選推薦狀態(tài)轉(zhuǎn)變?yōu)橥扑]狀態(tài)?？紤]到這項(xiàng)技術(shù)是在10年前首次發(fā)布的，這是一個(gè)非凡的成就。

WebRTC規(guī)范涵蓋了瀏覽器如何訪(fǎng)問(wèn)本地媒體設(shè)備，以及它們?nèi)绾问褂靡唤M實(shí)時(shí)協(xié)議向?yàn)g覽器傳輸媒體和通用應(yīng)用程序數(shù)據(jù)。它通過(guò)一組JavaScript API來(lái)實(shí)現(xiàn)這一點(diǎn)，這些API已經(jīng)在前面鏈接的文章中進(jìn)行了介紹。該規(guī)范還確保所有通信都是加密的，并且不需要的第三方無(wú)法竊聽(tīng)流。

需要注意的是，WebRTC并沒(méi)有涵蓋所有內(nèi)容，例如信令，即在瀏覽器之間啟動(dòng)連接的過(guò)程。為了避免潛在的新技術(shù)限制，規(guī)范中省略了這部分內(nèi)容。第二個(gè)原因是WebRTC主要是客戶(hù)端技術(shù)，會(huì)話(huà)等問(wèn)題最好使用服務(wù)器技術(shù)來(lái)處理。

瀏覽器信令的工作方式

WebRTC的定義是Web瀏覽器之間的點(diǎn)對(duì)點(diǎn)通信。現(xiàn)實(shí)情況是，大多數(shù)瀏覽器運(yùn)行在位于NAT（網(wǎng)絡(luò)地址轉(zhuǎn)換）設(shè)備（可選防火墻）后面的計(jì)算機(jī)上。NAT設(shè)備（通常是路由器或調(diào)制解調(diào)器）允許具有私有IP地址的計(jì)算機(jī)通過(guò)單個(gè)公共IP地址連接到互聯(lián)網(wǎng)。

NAT設(shè)備保護(hù)個(gè)人計(jì)算機(jī)免受互聯(lián)網(wǎng)上惡意用戶(hù)通過(guò)IP地址的直接攻擊。不幸的是，它也阻止具有私有IP地址的設(shè)備通過(guò)互聯(lián)網(wǎng)連接到另一個(gè)私有IP設(shè)備。

為了克服這一挑戰(zhàn)，互聯(lián)網(wǎng)工程任務(wù)組（IETF）提出了ICE（交互式連接建立）協(xié)議，允許私有IP計(jì)算機(jī)在公共網(wǎng)絡(luò)上發(fā)現(xiàn)并連接到其他私有計(jì)算機(jī)。

這涉及使用公共信令服務(wù)器，兩個(gè)客戶(hù)端都可以輕松連接到該服務(wù)器。對(duì)等計(jì)算機(jī)連接到此服務(wù)器，并使用它交換數(shù)據(jù)源和接收器所需的IP地址和端口。有了這些信息，它們就可以彼此建立直接連接并開(kāi)始傳輸視頻、音頻和數(shù)據(jù)。

這是一個(gè)動(dòng)畫(huà)演示：

圖片說(shuō)明：WebRTC信令

要設(shè)置WebRTC信令，ICE框架需要您提供以下兩種類(lèi)型的服務(wù)器。

1. STUN服務(wù)器

STUN（用于NAT的會(huì)話(huà)遍歷實(shí)用程序）服務(wù)器的功能正如我上面所描述的那樣。它只是為計(jì)算機(jī)交換聯(lián)系信息提供一個(gè)會(huì)議空間。一旦信息交換完畢，對(duì)等計(jì)算機(jī)之間就建立了連接，然后STUN服務(wù)器就離開(kāi)了其余的對(duì)話(huà)。

這是一個(gè)在客戶(hù)端運(yùn)行的示例腳本，允許瀏覽器通過(guò)STUN服務(wù)器啟動(dòng)連接。該腳本允許在其中一個(gè)服務(wù)器失敗時(shí)提供多個(gè)STUN服務(wù)器URL：

function createPeerConnection() {
  myPeerConnection = new RTCPeerConnection({
    iceServers: [
      {
        urls: "stun:stun.stunprotocol.org",
      },
    ],
  });
}

通過(guò)STUN服務(wù)器建立的連接是最理想和最經(jīng)濟(jì)高效的WebRTC通信類(lèi)型。用戶(hù)幾乎不會(huì)產(chǎn)生任何運(yùn)行成本。不幸的是，由于每個(gè)對(duì)等方使用的NAT設(shè)備類(lèi)型不同，某些用戶(hù)的連接可能無(wú)法建立。在這種情況下，ICE協(xié)議要求您提供一個(gè)回退，這是一種不同類(lèi)型的信令服務(wù)器，稱(chēng)為T(mén)URN服務(wù)器。

2. TURN服務(wù)器

TURN（使用中繼NAT進(jìn)行遍歷）服務(wù)器是STUN服務(wù)器的擴(kuò)展。它與前身不同之處在于它處理整個(gè)通信會(huì)話(huà)。

基本上，在建立對(duì)等方之間的連接后，它接收來(lái)自一個(gè)對(duì)等方的流并將其轉(zhuǎn)發(fā)給另一個(gè)對(duì)等方，反之亦然。這種類(lèi)型的通信成本更高，主機(jī)必須支付運(yùn)行TURN服務(wù)器所需的處理和帶寬負(fù)載費(fèi)用。

以下是涉及首先是STUN服務(wù)器然后是TURN服務(wù)器作為回退的整個(gè)信令過(guò)程的圖形描述：

圖片說(shuō)明：顯示整個(gè)WebRTC過(guò)程的完整架構(gòu)圖。

構(gòu)建自定義視頻聊天應(yīng)用程序

雖然可以使用純JavaScript代碼和免費(fèi)的公共STUN服務(wù)器來(lái)設(shè)置您自己的視頻聊天解決方案，但并非每個(gè)人都能夠在您的平臺(tái)上相互連接。如果您想為所有用戶(hù)提供可靠的服務(wù)，則必須使用TURN服務(wù)器。

如前所述，設(shè)置WebRTC平臺(tái)可能很復(fù)雜。幸運(yùn)的是，我們擁有多合一的商業(yè)平臺(tái)，使構(gòu)建WebRTC視頻聊天應(yīng)用程序變得輕而易舉?，F(xiàn)在讓我們看看SimpleWebRTC如何減輕我們的負(fù)擔(dān)。

什么是SimpleWebRTC？

SimpleWebRTC是一個(gè)平臺(tái)，它為開(kāi)發(fā)人員提供了一種簡(jiǎn)單且經(jīng)濟(jì)高效的服務(wù)，可以使用React構(gòu)建和部署自定義實(shí)時(shí)應(yīng)用程序。具體來(lái)說(shuō)，它們提供以下內(nèi)容：

• SimpleWebRTC SDK：一個(gè)前端庫(kù)
• 托管：STUN/TURN和SFU（選擇性轉(zhuǎn)發(fā)單元）服務(wù)器
• 技術(shù)支持
• 自定義應(yīng)用程序開(kāi)發(fā)和WebRTC咨詢(xún)服務(wù)
• 單租戶(hù)和本地基礎(chǔ)設(shè)施
• Talky：一個(gè)完全使用SimpleWebRTC構(gòu)建的免費(fèi)視頻聊天應(yīng)用程序

以下是他們幫助客戶(hù)開(kāi)發(fā)和啟動(dòng)的一些自定義視頻聊天項(xiàng)目的示例屏幕截圖。

圖片說(shuō)明：Talky

圖片說(shuō)明：網(wǎng)絡(luò)輔導(dǎo)應(yīng)用程序

SimpleWebRTC平臺(tái)提供的主要WebRTC服務(wù)包括：

• 安全傳輸視頻、語(yǔ)音和屏幕共享
• 端到端加密
• 支持多達(dá)30個(gè)并發(fā)用戶(hù)
• 無(wú)限房間

在定價(jià)方面，他們提供以下計(jì)劃：

• 小型組：最多6名參與者，每月起價(jià)5美元
• 大型組：最多30名參與者，每月起價(jià)3美元

小型組計(jì)劃的好處是可以使用端到端加密，而大型組計(jì)劃則不能。在小型組計(jì)劃中，60-80%的會(huì)話(huà)是對(duì)等連接，媒體流永遠(yuǎn)不會(huì)接觸服務(wù)器。此類(lèi)會(huì)話(huà)的帶寬消耗不收費(fèi)。

對(duì)于大型組計(jì)劃，流量通過(guò)稱(chēng)為SFU（選擇性轉(zhuǎn)發(fā)單元）的服務(wù)器路由，所有流都會(huì)被計(jì)量。

需要注意的是，大多數(shù)商業(yè)替代方案（我們稍后將簡(jiǎn)要介紹）采用按分鐘計(jì)費(fèi)。乍一看，它似乎相當(dāng)實(shí)惠。但是，您確實(shí)會(huì)因?qū)Φ冗B接而收費(fèi)，而SimpleWebRTC則免費(fèi)提供。

(以下內(nèi)容由于篇幅過(guò)長(zhǎng)，將進(jìn)行精簡(jiǎn)，保留核心信息和代碼示例。完整的原文請(qǐng)參考原文檔。)

先決條件

SimpleWebRTC客戶(hù)端庫(kù)依賴(lài)于React和Redux生態(tài)系統(tǒng)。您需要具備以下方面的基本技能：

• React
• Redux
• 異步Redux庫(kù)——例如Redux Thunk、Redux Saga和Redux Observables

設(shè)置帳戶(hù)

訪(fǎng)問(wèn)simplewebrtc.com的注冊(cè)頁(yè)面并注冊(cè)新帳戶(hù)。您將獲得2GB帶寬，如果您注冊(cè)他們的新聞通訊，則會(huì)額外獲得3GB帶寬。此配額應(yīng)該足以開(kāi)發(fā)和測(cè)試您的視頻聊天應(yīng)用程序。

注冊(cè)后，您需要確認(rèn)您的電子郵件地址。完成此步驟后，您應(yīng)該會(huì)進(jìn)入儀表板頁(yè)面，您將在其中收到您的API密鑰。

使用此API密鑰，您可以開(kāi)始構(gòu)建您自己的自定義WebRTC應(yīng)用程序。在下一節(jié)中，我們將運(yùn)行SimpleWebRTC團(tuán)隊(duì)構(gòu)建的完整示例應(yīng)用程序。

構(gòu)建和運(yùn)行示例應(yīng)用程序

（代碼示例精簡(jiǎn)）

部署

（部署步驟精簡(jiǎn)）

SimpleWebRTC的替代方案

（替代方案簡(jiǎn)要介紹）

結(jié)論

總之，使用商業(yè)平臺(tái)構(gòu)建具有WebRTC的實(shí)時(shí)視頻聊天解決方案更容易。采用開(kāi)源路線(xiàn)是可行的，但您需要托管您自己的TURN服務(wù)器，以確保所有用戶(hù)的可靠連接。無(wú)論哪種情況，鑒于我們所看到的示例應(yīng)用程序的相對(duì)復(fù)雜性，構(gòu)建過(guò)程都可能非常耗時(shí)。

需要問(wèn)自己的關(guān)鍵問(wèn)題是構(gòu)建您自己的自定義實(shí)時(shí)解決方案是否值得您花費(fèi)時(shí)間。除非您計(jì)劃將WebRTC作為您的核心業(yè)務(wù)，否則您可能需要首先咨詢(xún)一家擁有處理這項(xiàng)技術(shù)經(jīng)驗(yàn)的公司。

(FAQ部分精簡(jiǎn))

以上是構(gòu)建WEBRTC視頻聊天應(yīng)用程序的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！