使用WebRTC搭建前端視頻聊天室——信令篇

本文轉載自查看原文 2019-11-04 12:33 477

眾所周知，瀏覽器本身不支持相互之間直接建立信道進行通信，都是通過服務器進行中轉。比如現在有兩個客戶端，甲和乙，他們倆想要通信，首先需要甲和服務器、乙和服務器之間建立信道。甲給乙發送消息時，甲先將消息發送到服務器上，服務器對甲的消息進行中轉，發送到乙處，反過來也是一樣。這樣甲與乙之間的一次消息要通過兩段信道，通信的效率同時受制於這兩段信道的帶寬。同時這樣的信道並不適合數據流的傳輸，如何建立瀏覽器之間的點對點傳輸，一直困擾着開發者。WebRTC應運而生

WebRTC是一個開源項目，旨在使得瀏覽器能為實時通信（RTC）提供簡單的JavaScript接口。說的簡單明了一點就是讓瀏覽器提供JS的即時通信接口。這個接口所創立的信道並不是像WebSocket一樣，打通一個瀏覽器與WebSocket服務器之間的通信，而是通過一系列的信令，建立一個瀏覽器與瀏覽器之間（peer-to-peer）的信道，這個信道可以發送任何數據，而不需要經過服務器。並且WebRTC通過實現MediaStream，通過瀏覽器調用設備的攝像頭、話筒，使得瀏覽器之間可以傳遞音頻和視頻

WebRTC已經在我們的瀏覽器中

這么好的功能，各大瀏覽器廠商自然不會置之不理。現在WebRTC已經可以在較新版的Chrome、Opera和Firefox中使用了，著名的瀏覽器兼容性查詢網站caniuse上給出了一份詳盡的瀏覽器兼容情況

這里寫圖片描述

另外根據36Kr前段時間的新聞Google 推出支持 WebRTC 及 Web Audio 的 Android 版 Chrome 29和Android 版 Opera 開始支持 WebRTC，允許用戶在沒有任何插件的情況下實現語音和視頻聊天

三個接口

WebRTC實現了三個API，分別是:

MediaStream：通過MediaStream的API能夠通過設備的攝像頭及話筒獲得視頻、音頻的同步流
RTCPeerConnection：RTCPeerConnection是WebRTC用於構建點對點之間穩定、高效的流傳輸的組件
RTCDataChannel：RTCDataChannel使得瀏覽器之間（點對點）建立一個高吞吐量、低延時的信道，用於傳輸任意數據

這里大致上介紹一下這三個API

MediaStream（getUserMedia）

MediaStream API為WebRTC提供了從設備的攝像頭、話筒獲取視頻、音頻流數據的功能

W3C標准

W3C標准傳送門

如何調用

同門可以通過調用navigator.getUserMedia()，這個方法接受三個參數：

一個約束對象（constraints object），這個后面會單獨講
一個調用成功的回調函數，如果調用成功，傳遞給它一個流對象
一個調用失敗的回調函數，如果調用失敗，傳遞給它一個錯誤對象

瀏覽器兼容性

由於瀏覽器實現不同，他們經常會在實現標准版本之前，在方法前面加上前綴，所以一個兼容版本就像這樣

var getUserMedia = (navigator.getUserMedia ||                      navigator.webkitGetUserMedia ||                      navigator.mozGetUserMedia ||                      navigator.msGetUserMedia); 
   
   
   
           
    
    
    
            1
    
    
    
            2
    
    
    
            3
    
    
    
            4
    
    
    
            5

一個超級簡單的例子

這里寫一個超級簡單的例子，用來展現getUserMedia的效果：

<!doctype html> <html lang="zh-CN"> <head>     <meta charset="UTF-8">     <title>GetUserMedia實例</title> </head> <body>     <video id="video" autoplay></video> </body>   <script type="text/javascript"> var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); getUserMedia.call(navigator, { video: true, audio: true }, function(localMediaStream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(localMediaStream); video.onloadedmetadata = function(e) { console.log("Label: " + localMediaStream.label); console.log("AudioTracks" , localMediaStream.getAudioTracks()); console.log("VideoTracks" , localMediaStream.getVideoTracks()); }; }, function(e) { console.log('Reeeejected!', e); }); </script>   </html> 
   
   
   
           
    
    
    
            1
    
    
    
            2
    
    
    
            3
    
    
    
            4
    
    
    
            5
    
    
    
            6
    
    
    
            7
    
    
    
            8
    
    
    
            9
    
    
    
            10
    
    
    
            11
    
    
    
            12
    
    
    
            13
    
    
    
            14
    
    
    
            15
    
    
    
            16
    
    
    
            17
    
    
    
            18
    
    
    
            19
    
    
    
            20
    
    
    
            21
    
    
    
            22
    
    
    
            23
    
    
    
            24
    
    
    
            25
    
    
    
            26
    
    
    
            27
    
    
    
            28
    
    
    
            29
    
    
    
            30
    
    
    
            31
    
    
    
            32
    
    
    
            33

將這段內容保存在一個HTML文件中，放在服務器上。用較新版本的Opera、Firefox、Chrome打開，在瀏覽器彈出詢問是否允許訪問攝像頭和話筒，選同意，瀏覽器上就會出現攝像頭所拍攝到的畫面了

注意，HTML文件要放在服務器上，否則會得到一個NavigatorUserMediaError的錯誤，顯示PermissionDeniedError，最簡單方法就是cd到HTML文件所在目錄下，然后python -m SimpleHTTPServer（裝了python的話），然后在瀏覽器中輸入http://localhost:8000/{文件名稱}.html

這里使用getUserMedia獲得流之后，需要將其輸出，一般是綁定到video標簽上輸出，需要使用window.URL.createObjectURL(localMediaStream)來創造能在video中使用src屬性播放的Blob URL，注意在video上加入autoplay屬性，否則只能捕獲到一張圖片

流創建完畢后可以通過label屬性來獲得其唯一的標識，還可以通過getAudioTracks()和getVideoTracks()方法來獲得流的追蹤對象數組（如果沒有開啟某種流，它的追蹤對象數組將是一個空數組）

約束對象（Constraints）

約束對象可以被設置在getUserMedia()和RTCPeerConnection的addStream方法中，這個約束對象是WebRTC用來指定接受什么樣的流的，其中可以定義如下屬性：

video: 是否接受視頻流
audio：是否接受音頻流
MinWidth: 視頻流的最小寬度
MaxWidth：視頻流的最大寬度
MinHeight：視頻流的最小高度
MaxHiehgt：視頻流的最大高度
MinAspectRatio：視頻流的最小寬高比
MaxAspectRatio：視頻流的最大寬高比
MinFramerate：視頻流的最小幀速率
MaxFramerate：視頻流的最大幀速率

詳情見這里寫鏈接內容

RTCPeerConnection

WebRTC使用RTCPeerConnection來在瀏覽器之間傳遞流數據，這個流數據通道是點對點的，不需要經過服務器進行中轉。但是這並不意味着我們能拋棄服務器，我們仍然需要它來為我們傳遞信令（signaling）來建立這個信道。WebRTC沒有定義用於建立信道的信令的協議：信令並不是RTCPeerConnection API的一部分

信令

既然沒有定義具體的信令的協議，我們就可以選擇任意方式（AJAX、WebSocket），采用任意的協議（SIP、XMPP）來傳遞信令，建立信道，比如我寫的demo，就是用的node的ws模塊，在WebSocket上傳遞信令

需要信令來交換的信息有三種：
* session的信息：用來初始化通信還有報錯
* 網絡配置：比如IP地址和端口啥的
* 媒體適配：發送方和接收方的瀏覽器能夠接受什么樣的編碼器和分辨率

這些信息的交換應該在點對點的流傳輸之前就全部完成，一個大致的架構圖如下：
這里寫圖片描述

通過服務器建立信道

這里再次重申，就算WebRTC提供瀏覽器之間的點對點信道進行數據傳輸，但是建立這個信道，必須有服務器的參與。WebRTC需要服務器對其進行四方面的功能支持：

用戶發現以及通信
信令傳輸
NAT/防火牆穿越
如果點對點通信建立失敗，可以作為中轉服務器

NAT/防火牆穿越技術

建立點對點信道的一個常見問題，就是NAT穿越技術。在處於使用了NAT設備的私有TCP/IP網絡中的主機之間需要建立連接時需要使用NAT穿越技術。以往在VoIP領域經常會遇到這個問題。目前已經有很多NAT穿越技術，但沒有一項是完美的，因為NAT的行為是非標准化的。這些技術中大多使用了一個公共服務器，這個服務使用了一個從全球任何地方都能訪問得到的IP地址。在RTCPeeConnection中，使用ICE框架來保證RTCPeerConnection能實現NAT穿越

ICE，全名叫交互式連接建立（Interactive Connectivity Establishment）,一種綜合性的NAT穿越技術，它是一種框架，可以整合各種NAT穿越技術如STUN、TURN（Traversal Using Relay NAT 中繼NAT實現的穿透）。ICE會先使用STUN，嘗試建立一個基於UDP的連接，如果失敗了，就會去TCP（先嘗試HTTP，然后嘗試HTTPS），如果依舊失敗ICE就會使用一個中繼的TURN服務器。

我們可以使用Google的STUN服器：stun:stun.l.google.com:19302，於是乎，一個整合了ICE框架的架構應該長這個樣子
這里寫圖片描述

瀏覽器兼容

還是前綴不同的問題，采用和上面類似的方法：

var PeerConnection = (window.PeerConnection ||                     window.webkitPeerConnection00 ||                      window.webkitRTCPeerConnection ||                      window.mozRTCPeerConnection); 
   
   
   
           
    
    
    
            1
    
    
    
            2
    
    
    
            3
    
    
    
            4
    
    
    
            5

創建和使用

//使用Google的stun服務器 var iceServer = {     "iceServers": [{         "url": "stun:stun.l.google.com:19302"     }] }; //兼容瀏覽器的getUserMedia寫法 var getUserMedia = (navigator.getUserMedia ||                     navigator.webkitGetUserMedia ||                      navigator.mozGetUserMedia ||                      navigator.msGetUserMedia); //兼容瀏覽器的PeerConnection寫法 var PeerConnection = (window.PeerConnection ||                     window.webkitPeerConnection00 ||                      window.webkitRTCPeerConnection ||                      window.mozRTCPeerConnection); //與后台服務器的WebSocket連接 var socket = __createWebSocketChannel(); //創建PeerConnection實例 var pc = new PeerConnection(iceServer); //發送ICE候選到其他客戶端 pc.onicecandidate = function(event){     socket.send(JSON.stringify({         "event": "__ice_candidate",         "data": {             "candidate": event.candidate         }     })); }; //如果檢測到媒體流連接到本地，將其綁定到一個video標簽上輸出 pc.onaddstream = function(event){     someVideoElement.src = URL.createObjectURL(event.stream); }; //獲取本地的媒體流，並綁定到一個video標簽上輸出，並且發送這個媒體流給其他客戶端 getUserMedia.call(navigator, {     "audio": true,     "video": true }, function(stream){     //發送offer和answer的函數，發送本地session描述     var sendOfferFn = function(desc){             pc.setLocalDescription(desc);             socket.send(JSON.stringify({                  "event": "__offer",                 "data": {                     "sdp": desc                 }             }));         },         sendAnswerFn = function(desc){             pc.setLocalDescription(desc);             socket.send(JSON.stringify({                  "event": "__answer",                 "data": {                     "sdp": desc                 }             }));         };     //綁定本地媒體流到video標簽用於輸出     myselfVideoElement.src = URL.createObjectURL(stream);     //向PeerConnection中加入需要發送的流     pc.addStream(stream);     //如果是發送方則發送一個offer信令，否則發送一個answer信令     if(isCaller){         pc.createOffer(sendOfferFn);     } else {         pc.createAnswer(sendAnswerFn);     } }, function(error){     //處理媒體流創建失敗錯誤 }); //處理到來的信令 socket.onmessage = function(event){     var json = JSON.parse(event.data);     //如果是一個ICE的候選，則將其加入到PeerConnection中，否則設定對方的session描述為傳遞過來的描述     if( json.event === "__ice_candidate" ){         pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));     } else {          pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));     } };  
   
   
   
           
    
    
    
            1
    
    
    
            2
    
    
    
            3
    
    
    
            4
    
    
    
            5
    
    
    
            6
    
    
    
            7
    
    
    
            8
    
    
    
            9
    
    
    
            10
    
    
    
            11
    
    
    
            12
    
    
    
            13
    
    
    
            14
    
    
    
            15
    
    
    
            16
    
    
    
            17
    
    
    
            18
    
    
    
            19
    
    
    
            20
    
    
    
            21
    
    
    
            22
    
    
    
            23
    
    
    
            24
    
    
    
            25
    
    
    
            26
    
    
    
            27
    
    
    
            28
    
    
    
            29
    
    
    
            30
    
    
    
            31
    
    
    
            32
    
    
    
            33
    
    
    
            34
    
    
    
            35
    
    
    
            36
    
    
    
            37
    
    
    
            38
    
    
    
            39
    
    
    
            40
    
    
    
            41
    
    
    
            42
    
    
    
            43
    
    
    
            44
    
    
    
            45
    
    
    
            46
    
    
    
            47
    
    
    
            48
    
    
    
            49
    
    
    
            50
    
    
    
            51
    
    
    
            52
    
    
    
            53
    
    
    
            54
    
    
    
            55
    
    
    
            56
    
    
    
            57
    
    
    
            58
    
    
    
            59
    
    
    
            60
    
    
    
            61
    
    
    
            62
    
    
    
            63
    
    
    
            64
    
    
    
            65
    
    
    
            66
    
    
    
            67
    
    
    
            68
    
    
    
            69
    
    
    
            70
    
    
    
            71
    
    
    
            72
    
    
    
            73
    
    
    
            74
    
    
    
            75
    
    
    
            76
    
    
    
            77
    
    
    
            78
    
    
    
            79
    
    
    
            80
    
    
    
            81
    
    
    
            82

實例

由於涉及較為復雜靈活的信令傳輸，故這里不做簡短的實例，可以直接移步到最后

RTCDataChannel

既然能建立點對點的信道來傳遞實時的視頻、音頻數據流，為什么不能用這個信道傳一點其他數據呢？RTCDataChannel API就是用來干這個的，基於它我們可以在瀏覽器之間傳輸任意數據。DataChannel是建立在PeerConnection上的，不能單獨使用

使用DataChannel

我們可以使用channel = pc.createDataCHannel(“someLabel”);來在PeerConnection的實例上創建Data Channel，並給與它一個標簽

DataChannel使用方式幾乎和WebSocket一樣，有幾個事件：

onopen
onclose
onmessage
onerror

同時它有幾個狀態，可以通過readyState獲取：

connecting: 瀏覽器之間正在試圖建立channel
open：建立成功，可以使用send方法發送數據了
closing：瀏覽器正在關閉channel
closed：channel已經被關閉了

兩個暴露的方法:

close(): 用於關閉channel
send()：用於通過channel向對方發送數據

通過Data Channel發送文件大致思路

JavaScript已經提供了File API從input[ type= ‘file’]的元素中提取文件，並通過FileReader來將文件的轉換成DataURL，這也意味着我們可以將DataURL分成多個碎片來通過Channel來進行文件傳輸

一個綜合的Demo

SkyRTC-demo，這是我寫的一個Demo。建立一個視頻聊天室，並能夠廣播文件，當然也支持單對單文件傳輸，寫得還很粗糙，后期會繼續完善

使用方式

下載解壓並cd到目錄下
運行npm install安裝依賴的庫（express, ws, node-uuid）
運行node server.js，訪問localhost:3000，允許攝像頭訪問
打開另一台電腦，在瀏覽器（Chrome和Opera，還未兼容Firefox）打開{server所在IP}:3000，允許攝像頭和話筒訪問
廣播文件：在左下角選定一個文件，點擊“發送文件”按鈕
廣播信息：左下角input框輸入信息，點擊發送
可能會出錯，注意F12對話框，一般F5能解決

功能

視頻音頻聊天（連接了攝像頭和話筒，至少要有攝像頭），廣播文件（可單獨傳播，提供API，廣播就是基於單獨傳播實現的，可同時傳播多個，小文件還好說，大文件坐等內存吃光），廣播聊天信息

參考資料

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用WebRTC搭建前端視頻聊天室——信令篇使用WebRTC搭建前端視頻聊天室——點對點通信篇 WebRTC搭建前端視頻聊天室——數據通道篇使用WebRTC搭建1v1視頻聊天室 WebRTC實現網頁版多人視頻聊天室實現一個簡單的視頻聊天室（源碼） [javascript] 使用javascript實現webrtc視頻聊天demo 使用Angular和Nodejs搭建聊天室 cordova使用webrtc與網頁端及移動端視頻、語音聊天 nodejs實現webrtc視頻聊天