隨著Web Phone 本月,我們想為您提供更多有關 WebRTC 功能的背景知識,該項目為我們基于瀏覽器的電話完成語音通話奠定了基礎。
WebRTC 是 Google 管理的知名項目,可以輕松地通過網絡瀏覽器傳輸音頻、視頻和數據。我們在 VirtualPBX 的開發人員使用其 API(應用程序編程接口)來創建可在桌面和移動瀏覽器中運行的電話。您可以使用它來創建自己的業務應用程序來管理視聽信息和傳輸數據。
這是如何實現的?您在 Javascript 中使用的三個基本 API 控制著應用程序中發生的大部分事情。
getUserMedia 訪問硬件
建立任何類型的瀏覽器到瀏覽器連接的第一步是了解所涉及的設備。因此,我們要了解的第一個 WebRTC 功能是 getUserMedia API。
看看這個 HTML5 Rocks 文章展示了 getUserMedia 如何在開始通話之前識別并請求訪問個人的攝像頭和麥克風。
作為開發人員,您只需像這樣將參數傳遞給 getUserMedia:
{audio: true}
或
{video:true, audio:true}
第一個請求會讓 getUserMedia 請求使用麥克風,第二個請求會請求使用攝像頭和麥克風。對于開發者來說,WebRTC 在幕后隱藏了很多代碼,這樣的請求很容易發起。
如果您曾經看到瀏覽器請求使用相機的權限,則該請求背后的操作可能由 getUserMedia 發起。
RTCPeerConnection 建立連接
接下來是在兩個(或更多)對等點之間建立連接,以便在它們之間共享信息。第二個主要的 WebRTC 功能是 RTCPeerConnection API。
最基本的 RTCPeerConnection 代碼如下所示:
var connection = RTCPeerConnection(config);
該示例的配置 部分需要更多詳細信息,例如您要用來幫助建立連接的服務器。最終,您將創建與該請求的連接,然后使用類似于此示例的代碼處理音頻和視頻流:
pc.addTrack(track);
此處的屏幕截圖顯示了 Mozilla Developer Network 文章擴展了 addTrack 函數的語法,它是 RTCPeerConnection 的一部分。
簡而言之,您將使用 RTCPeerConnection 在用戶之間建立連接,然后引用 getUserMedia 音頻和視頻設備;然后您會將這些設備添加到媒體軌道,以保持用戶之間的音頻和視頻連接處于活動狀態。
用于任意數據的 RTCDataChannel
構建 WebRTC 應用程序時,您可能還希望讓用戶共享文本或文件。為此,您需要使用 RTCDataChannel API。
我們將在本文中介紹的 WebRTC 的最后一個功能在 Mozilla 開發者網絡。
如上所示,一旦與 RTCPeerConnection 建立連接,下一步就是在該連接內創建數據通道:
sendChannel = connection.createDataChannel("sendChannel");
這里發生的事情是在連接配置中創建了一個名為sendChannel的通道(之前引用過,在本文的RTCPeerConnection部分中建立連接)?,F在可以監視 sendChannel,以便應用程序知道數據通道何時打開或關閉:
sendChannel.onopen = handleSendChannelStatusChange;
sendChannel.onclose = handleSendChannelStatusChange;
您將使用的 WebRTC 功能
雖然這篇文章僅僅觸及了您可以使用 WebRTC 項目完成的事情的皮毛,但我們希望它能讓您瞥見使用它創建應用程序的便捷性。
請記住,getUserMedia、RTCPeerConnection 和 RTCDataChannel 下面有很多層。這三個 API 僅要求開發人員輸入少量選項來創建用戶之間的連接。后臺發生的事情涉及與網絡瀏覽器的接口、連接到服務器、處理編解碼器以及管理對等點之間的數據流。開發人員無需手動執行任何繁重的工作。
最令人印象深刻的是 WebRTC 后端的底層復雜性與我們的網絡電話等應用程序中的用戶界面之間的差異。如果您在市場上購買新的電話系統并希望了解我們的網絡電話可以提供什么,讓我們的銷售團隊帶領您完成 我們電話系統的個人導覽。