WebRTC 架構

WebRTC 的整體架構具有很高的複雜性。

這裡您可以找到三個不同的層：

Web 開發人員的 API - 此層包含 Web 開發人員所需的所有 API，包括 RTCPeerConnection、RTCDataChannel 和 MediaStrean 物件。
瀏覽器廠商的API
可覆蓋的 API，瀏覽器廠商可以對其進行掛鉤。

傳輸元件允許跨各種型別的網路建立連線，而語音和影片引擎是負責將音訊和影片流從音效卡和攝像頭傳輸到網路的框架。對於 Web 開發人員來說，最重要的部分是 WebRTC API。

如果我們從客戶端-伺服器端來看 WebRTC 架構，我們可以看到最常用的模型之一是受 SIP（會話發起協議）梯形圖啟發的。

在此模型中，兩臺裝置都從不同的伺服器執行 Web 應用程式。RTCPeerConnection 物件配置流，以便它們可以彼此對等連線。此信令透過 HTTP 或 WebSockets 完成。

但是最常用的模型是三角形：

在此模型中，兩臺裝置使用相同的 Web 應用程式。這在管理使用者連線時為 Web 開發人員提供了更大的靈活性。

WebRTC API

它由一些主要的 JavaScript 物件組成：

RTCPeerConnection
MediaStream
RTCDataChannel

RTCPeerConnection 物件

此物件是 WebRTC API 的主要入口點。它幫助我們連線到對等方，初始化連線並附加媒體流。它還管理與另一個使用者的 UDP 連線。

RTCPeerConnection 物件的主要任務是設定和建立對等連線。我們可以輕鬆地掛鉤連線的關鍵點，因為此物件在出現這些事件時會觸發一組事件。這些事件使您可以訪問連線的配置：

RTCPeerConnection 是一個簡單的 JavaScript 物件，您可以透過以下方式輕鬆建立：

[code] 
var conn = new RTCPeerConnection(conf); 

conn.onaddstream = function(stream) { 
   // use stream here 
}; 

[/code]

RTCPeerConnection 物件接受一個conf引數，我們將在後面的教程中介紹。當遠端使用者向其對等連線新增影片或音訊流時，會觸發onaddstream事件。

MediaStream API

現代瀏覽器允許開發者訪問getUserMedia API，也稱為MediaStream API。它有三個關鍵功能：

它允許開發者訪問表示影片和音訊流的stream物件。
如果使用者在他的裝置上有多個攝像頭或麥克風，它可以管理輸入使用者裝置的選擇。
它提供了一個安全級別，每次使用者想要獲取流時都會詢問使用者。

為了測試此 API，讓我們建立一個簡單的 HTML 頁面。它將顯示一個單一的<video>元素，請求使用者允許使用攝像頭，並在頁面上顯示來自攝像頭的即時流。建立一個index.html檔案並新增：

[code] 
<html>
 
   <head> 
      <meta charset = "utf-8"> 
   </head>
	
   <body> 
      <video autoplay></video> 
      <script src = "client.js"></script> 
   </body> 
	 
</html> 
[/code]

然後新增一個client.js檔案：

[code] 
//checks if the browser supports WebRTC 

function hasUserMedia() { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia 
      || navigator.mozGetUserMedia || navigator.msGetUserMedia; 
   return !!navigator.getUserMedia; 
}
 
if (hasUserMedia()) { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia || navigator.msGetUserMedia;
		
   //get both video and audio streams from user's camera 
   navigator.getUserMedia({ video: true, audio: true }, function (stream) { 
      var video = document.querySelector('video'); 
		
      //insert stream into the video tag 
      video.src = window.URL.createObjectURL(stream); 
   }, function (err) {}); 
	
}else {
   alert("Error. WebRTC is not supported!"); 
}
[/code]

現在開啟index.html，您應該會看到顯示您面部的影片流。

但是要注意，WebRTC 僅在伺服器端工作。如果您只是用瀏覽器開啟此頁面，它將無法工作。您需要將這些檔案託管在 Apache 或 Node 伺服器上，或者您喜歡的任何伺服器上。

RTCDataChannel 物件

除了在對等方之間傳送媒體流外，您還可以使用DataChannel API 傳送其他資料。此 API 與 MediaStream API 一樣簡單。主要工作是從現有的 RTCPeerConnection 物件建立一個通道：

[code] 
var peerConn = new RTCPeerConnection(); 

//establishing peer connection 
//... 
//end of establishing peer connection 
var dataChannel = peerConnection.createDataChannel("myChannel", dataChannelOptions); 

// here we can start sending direct messages to another peer 
[/code]

這就是您所需要的，只有兩行程式碼。其他所有操作都在瀏覽器的內部層完成。您可以隨時在對等連線上建立通道，直到RTCPeerConnection物件關閉。

總結

現在您應該對 WebRTC 架構有了紮實的瞭解。我們還介紹了 MediaStream、RTCPeerConnection 和 RTCDataChannel API。WebRTC API 是一個不斷變化的目標，因此請始終關注最新的規範。

列印頁面