轉自：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易於使用，只需極少步驟便可建立媒體會話。有些消息在瀏覽器和服務器之間流動，有些則直接在兩個瀏覽器（成為對等端）之間流動。
1、建立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中的本地媒體：
1、WebRTC中的媒體
- 軌道（MediaStreamTrack，代表設備或錄制內容可返回的單一類型的媒體，唯一關聯一個“源”，WebRTC不能直接訪問或控制“源”，對“源”的一切控制都通過軌道實施；一個“源”可能對應多個軌道對象）
- 流（MediaStream，軌道對象的集合）
軌道和流的示意如下：
2、捕獲本地媒體
如下代碼展示了本地媒體的簡單獲取，並展示：
// 注意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);運行效果如下：
