背景

webRTC是Google在2010年收購GIP公司之后獲得的一項技術(shù)。如下圖所示，它提供了音視頻的采集、處理(降噪，回聲消除等)、編解碼、傳輸?shù)燃夹g(shù)。

webRTC的目標(biāo)是實現(xiàn)無需安裝任何插件就可以通過瀏覽器進行P2P的實時音視頻通話及文件傳輸，來看看Google的demo，是不是很酷？本文將帶你分析webRTC的原理，并逐步編寫一個簡單的demo。

原理

如圖，瀏覽器之間媒體流的傳輸是P2P的，但是這并不意味著webRTC不需要服務(wù)器支持。建立P2P視頻連接需要的信息，如用來初始化通信的session信息，雙方的ip、端口，視頻分辨率，編解碼格式等等，還是需要通過服務(wù)器來傳輸?shù)摹ebRTC沒有規(guī)定這些信息傳輸?shù)臋C制，XHR、webSocket、Socket.io等都是可以的，因為Socket.io自帶了房間的概念，便于雙向視頻的撮合，所以我在demo里選擇了Socket.io。

當(dāng)然，連接建立的過程不會這么簡單。首先，提到P2P就繞不開NAT(Network Address Translation)，webRTC使用ICE(Interactive Connectivity Establishment)框架，ICE是一種綜合性的NAT穿越技術(shù)，它整合了STUN、TURN。當(dāng)穿越網(wǎng)絡(luò)時，ICE會先嘗試STUN，查出自己位于哪種類型的NAT之后以及NAT為某一個本地端口所綁定的Internet端端口從而建立UDP連接，如果失敗了ICE就會再嘗試TCP(先嘗試HTTP，再嘗試HTTPS)，如果仍然失敗就使用中繼的TURN服務(wù)器。

再來看看建立連接過程中的具體步驟：

調(diào)用getUserMedia獲取本地的MediaStreams；

從STUN獲取自己的外網(wǎng)IP及端口，通過Signaling Server向?qū)Ψ桨l(fā)送Offer(SDP協(xié)議)，并收到Answer；

同時webRTC會生成一些包含自己的內(nèi)網(wǎng)、外網(wǎng)IP等信息的candidate，同樣通過Signaling Server相互傳輸；

建立P2P連接，傳輸媒體信息。

API

• getUserMedia: 獲取本地視頻、音頻，可以傳入constraints調(diào)整分辨率、幀率，返回一個promise；
• RTCPeerConnection: 生成一個RTCPeerConnection實例，傳輸視頻、音頻流；
• createOffer: 會話發(fā)起方生成SDP Offer，包含了本地媒體流信息；
• setLocalDescription：在此方法被調(diào)用之前oncandidate事件不會被觸發(fā)；
• setRemoteDescription: 接收到offer或者answer之后調(diào)用；
• addIceCandidate: 接收到icecandidate之后調(diào)用；

Steps

獲取媒體流

var constraints = {audio: false,video: true };navigator.mediaDevices.getUserMedia(constraints) .then(gotStream) .catch(function(e) {alert('getUserMedia() error: ' + e.name); });function gotStream(stream) {localVideo.srcObeject = stream;localStream = stream; }

getUserMedia存在兼容性問題，需要在項目中引用webRTC官方給出的adapter.js。constraints還可以配置video的分辨率、幀率、對移動端還可以選擇前后攝像頭：

var constraints = {video: {width: { min:640, ideal: 1280, max: 1920 },height: { min: 480 ideal: 720, max: 1080 },facingMode: 'user' // 前置攝像頭} };

定義RTCPeerConnection

var serverConfig = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}] };function createPeerConnection() {var pc = new RTCPeerConnection(serverConfig);pc.onicecandidate = function(e) {if (e.candidate) {pc.addIceCandidate(e.candidate);}};// 添加對方的媒體流pc.onaddstream = function(e) {remoteVideo.srcObeject = e.stream;remoteStream = stream;}; }

由STUN、TURN配置生成對應(yīng)的RTCPeerConnection實例，再定義相關(guān)的事件處理函數(shù)，如onicecandidate、onaddstream、onremovestream等。

創(chuàng)建連接

function start() {pc.addstream(localStream);if (isCaller) {pc.createOffer(function(sessionDescription) {pc.setLocalDescription(sessionDescription);send(sessionDescription); // 根據(jù)不同的Signaling方式實現(xiàn)});if (receiveAnswer) {pc.setRemoteDescription(answer.sessionDescription);}} else {if (receiveOffer) {pc.setRemoteDescription(offer.sessionDescription);}pc.createAnswer(function(sessionDescription) {pc.setLocalDescription(sessionDescription);send(sessionDescription);});} }

必須先getUserMedia后才能生成sessionDescription，并且只有在setLocalDescription后onicecandidate事件才會觸發(fā)。上面代碼中的只是為了說明大致流程，實際項目中結(jié)合socket.io的事件更容易實現(xiàn)。

中斷會話

function stop() {pc.stop();pc = null; }

關(guān)于socket.io有關(guān)的代碼本文沒有貼出，詳情可參考socket.io的用法。

可行性

按照上面的步驟可以成功地搭建webRTC的小demo，但是能否將webRTC運用到實際項目中去呢？下面從瀏覽器兼容性和webRTC本身的性能兩個方面去分析。

兼容性

• IOS: 只有最新的ios11支持webRTC，且僅限safari瀏覽器，微信內(nèi)置瀏覽器尚不支持getUserMedia,不支持DataChannel，視頻編解碼格式為H.264；
• Android: 安卓4.4以上(不含4.4)，經(jīng)測試各大手機廠商自帶瀏覽器均不支持getUserMedia，但微信內(nèi)置瀏覽器可以正常運行，另外61版本以上的Chrome for Android也都支持；
• PC: Chrome49以上，Firefox55以上，Edge支持，Safari只有11支持，IE不支持。

性能

誠然webRTC在回聲消除，圖像編解碼等方面已經(jīng)做得十分出色，但它在性能上的問題還是不可忽視的：

• 由于需要進行視頻編解碼，所以CPU占用率非常高，尤其是在移動設(shè)備上；
• 在移動設(shè)備上獲取的視頻分辨率有限，最高只能達到640 * 480；
• 帶寬有限時，音視頻質(zhì)量較差，延時明顯；

綜上所述，雖然webRTC具有不需安裝插件或者客戶端，開源免費，強大的網(wǎng)絡(luò)穿透能力，出色的音視頻處理技術(shù)等等優(yōu)點，但由于兼容性及性能上的問題，要投入到生產(chǎn)中還需要時間，主要是IOS11的普及以及CPU占用率和延時的問題。

參考文章

• WebRTC in the real world: STUN, TURN and signaling
• How to Select a Signaling Protocol for Your Next WebRTC Project?
• Getting Started with WebRTC
• 使用WebRTC搭建前端視頻聊天室——入門篇

總結(jié)

以上是生活随笔為你收集整理的webRTC——浏览器里的音视频通话的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。