WebRTC（Web Real TimeCommunication），即支持web中音頻，視頻和數據的實時通信。

在Firefox，opera，chrome on desktop，chrome on android中均有支持。

WebRTC使用RTCPeerConnection在瀏覽器之間傳遞流數據，但也需要一種協調通信和發送控制消息的機制，這一過程稱為信令。WebRTC未規定信令方法和協議。

WebRTC旨在工作於點對點，因此用戶可以通過最直接的路線進行連接。但是，WebRTC是為了應對真實世界的網路而構建的：客戶端應用程序需要穿越NAT網關和防火牆，並且在直接連接失敗的情況下需要對等網路需求回退。作為此過程的一部分，WebRTC API使用STN伺服器來獲取計算機的IP地址，並在發生對等通信失敗的情況下使TURN伺服器充當中繼伺服器。

另外，所有WebRTC組件都必須加密，並且其JavaScript API只能用於安全源（HTTPS或本地主機，這點很重要！）。信令機制不是由WebRTC標準定義的，所以首先必須確保使用安全協議。

用法：

在工作目錄中添加一個video元素和一個script元素到index.html：

Realtime communication with WebRTC

Realtime communication with WebRTC

將以下內容添加到js文件夾中的main.js中：

"use strict";

varconstraints={

video:true

};

varvideo=document.querySelector("video");

functionhandleSuccess(stream){

video.srcObject=stream;

}

functionhandleError(error){

console.error("getUserMedia error: ",error);

}

navigator.mediaDevices.getUserMedia(constraints).

then(handleSuccess).catch(handleError);

效果：

運行分析：

在getUserMedia()通話之後，瀏覽器請求用戶訪問其相機的許可（如果這是第一次請求當前原點的相機訪問）。如果成功，則返回MediaStream，媒體元素可以通過srcObject屬性使用它：

navigator.mediaDevices.getUserMedia(constraints).

then(handleSuccess).catch(handleError);

functionhandleSuccess(stream){

video.srcObject=stream;

}

該constraints參數允許您指定要獲取的媒體。在這個例子中，只有視頻，因為音頻默認是禁用的：

varconstraints={

video:true

};

也可以使用約束來實現視頻解析度等附加要求：

consthdConstraints={

video:{

width:{

min:1280

},

height:{

min:720

}

}

}

該MediaTrackConstraints規範列出了所有可能的約束類型，雖然不是所有的選項都被所有瀏覽器支持。如果當前選擇的攝像機不支持請求的解析度，getUserMedia()則會拒絕該解析度，OverconstrainedError並且用戶不會被提示允許訪問其攝像機。

如果getUserMedia()成功，則來自網路攝像頭的視頻流被設置為視頻元素的來源：

functionhandleSuccess(stream){

video.srcObject=stream;

}

——Happy Ending——

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！