WebRTC介紹及簡單應用

轉自：https://www.cnblogs.com/vipzhou/p/7994927.html

WebRTC介紹及簡單應用

---

WebRTC，即Web Real-Time Communication，web實時通訊技術。簡單地說就是在web瀏覽器裏面引入實時通訊，包括音視頻通話等。

• WebRTC實時通訊技術介紹
• 如何使用
• 媒體介紹
• 信令
• STUN和TURN介紹
• 對等鏈接和提議/應答協商
• 數據通道
• NAT和防火牆穿透
• 簡單應用
• 其它

---

WebRTC實時通訊技術介紹

WebRTC實現了基於網頁的語音對話或視頻通話，目的是無插件實現web端的實時通訊的能力。

WebRTC提供了視頻會議的核心技術，包括音視頻的採集、編解碼、網絡傳輸、展現等功能，而且還支持跨平臺，包括linux、windows、mac、android等。

1. WebRTC三角形

2. WebRTC梯形

3. WebRTC的多方會話

WebRTC支持多個瀏覽器參與的多方會話或會議會話，要創建這類會話有以下兩種模式：

4. WebRTC新功能特性

---

如何使用WebRTC

WebRTC易於使用，只需極少步驟即可創建媒體會話。有些消息在瀏覽器和服務器之間流動，有些則直接在兩個瀏覽器（成爲對等端）之間流動。

一、創建WebRTC會話

創建WebRTC鏈接須要以下幾個步驟：

• 獲取本地媒體（getUserMedia()，MediaStream API）
• 在瀏覽器和對等端（其它瀏覽器或終端）之間創建對等鏈接（RTCPeerConnection API）
• 將媒體和數據通道關聯至該鏈接
• 交換會話描述（RTCSessionDescription）

• 瀏覽器M從Web服務器請求網頁
• Web服務器向M返回帶有WebRTC js的網頁
• 瀏覽器L從Web服務器請求網頁
• Web服務器向L返回帶有WebRTC js的網頁
• M決定與L通訊，經過M自身的js將M的會話描述對象（offer，提議）發送至Web服務器
• Web服務器將M的會話描述對象發送至L上的js
• L上的js將L的會話描述對象（answer，應答）發送至Web服務器
• Web服務器轉發應答至M上的js
• M和L開始交互，肯定訪問對方的最佳方式
• 完成後，M和L開始協商通訊密鑰
• M和L開始交換語音、視頻或數據

WebRTC三角形會話具體的調用流程：

說明：
    SDP對象的傳輸多是一個來回反覆的過程，而且該過程採用的協議並未標準化

WebRTC梯形會話方式具體的調用流程：

說明：
    此場景中，瀏覽器M和L直接交換媒體，只是它們運行的Web服務器不用而已。每一個瀏覽器的會話描述對象都會映射至Jingle[XEP-0166]session-initiate消息和session-accept方法。 

---

媒體介紹

先來看下WebRTC中的本地媒體：

一、WebRTC中的媒體

• 軌道（MediaStreamTrack，表明設備或錄製內容可返回的單一類型的媒體，惟一關聯一個「源」，WebRTC不能直接訪問或控制「源」，對「源」的一切控制都經過軌道實施；一個「源」可能對應多個軌道對象）
• 流（MediaStream，軌道對象的集合）

軌道和流的示意以下：

二、捕獲本地媒體

以下代碼展現了本地媒體的簡單獲取，並展現：

// 注意getUserMedia()在各瀏覽器中的區別 // Opera --> getUserMedia // Chrome --> webkitGetUserMedia // Firefox --> mozGetUserMedia navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; // 只獲取video: var constraints = {audio: false, video: true}; var video = document.querySelector("video"); function successCallback(stream) { // Note: make the returned stream available to console for inspection window.stream = stream; if (window.URL) { // Chrome瀏覽器 video.srcObject = stream; } else { // Firefox和Opera: 能夠直接把視頻源設置爲stream video.src = stream; } // 播放 video.play(); } function errorCallback(error){ console.log("navigator.getUserMedia error: ", error); } navigator.getUserMedia(constraints, successCallback, errorCallback);

運行效果以下：

完整代碼查看：https://github.com/caiya/webrtc-demo.git