2. 程式人生 > >使用WebRTC搭建前端視訊聊天室——入門篇

使用WebRTC搭建前端視訊聊天室——入門篇

阿新 • • 發佈：2019-01-05

什麼是WebRTC？

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

WebRTC是一個開源專案，旨在使得瀏覽器能為實時通訊（RTC）提供簡單的JavaScript介面。說的簡單明瞭一點就是讓瀏覽器提供JS的即時通訊介面。這個介面所創立的通道並不是像WebSocket一樣，打通一個瀏覽器與WebSocket伺服器之間的通訊，而是通過一系列的信令，建立一個瀏覽器與瀏覽器之間（peer-to-peer）的通道，這個通道可以傳送任何資料，而不需要經過伺服器。並且WebRTC通過實現MediaStream，通過瀏覽器呼叫裝置的攝像頭、話筒，使得瀏覽器之間可以傳遞音訊和視訊

WebRTC已經在我們的瀏覽器中

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

WebRTC瀏覽器相容性from caniuse.com

三個介面

WebRTC實現了三個API，分別是:
* MediaStream：通過MediaStream的API能夠通過裝置的攝像頭及話筒獲得視訊、音訊的同步流
* RTCPeerConnection：RTCPeerConnection是WebRTC用於構建點對點之間穩定、高效的流傳輸的元件
* RTCDataChannel：RTCDataChannel使得瀏覽器之間（點對點）建立一個高吞吐量、低延時的通道，用於傳輸任意資料

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

MediaStream（getUserMedia）

MediaStream API為WebRTC提供了從裝置的攝像頭、話筒獲取視訊、音訊流資料的功能

W3C標準

如何呼叫

同門可以通過呼叫navigator.getUserMedia()，這個方法接受三個引數：
1. 一個約束物件（constraints object），這個後面會單獨講
2. 一個呼叫成功的回撥函式，如果呼叫成功，傳遞給它一個流物件
3. 一個呼叫失敗的回撥函式，如果呼叫失敗，傳遞給它一個錯誤物件

瀏覽器相容性

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

var getUserMedia = (navigator.getUserMedia || 
                    navigator.webkitGetUserMedia || 
                    navigator.mozGetUserMedia || 
                    navigator.msGetUserMedia);

一個超級簡單的例子

這裡寫一個超級簡單的例子，用來展現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>

將這段內容儲存在一個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地址和埠啥的
* 媒體適配：傳送方和接收方的瀏覽器能夠接受什麼樣的編碼器和解析度

這些資訊的交換應該在點對點的流傳輸之前就全部完成，一個大致的架構圖如下：

JSEP架構

通過伺服器建立通道

這裡再次重申，就算WebRTC提供瀏覽器之間的點對點通道進行資料傳輸，但是建立這個通道，必須有伺服器的參與。WebRTC需要伺服器對其進行四方面的功能支援：
1. 使用者發現以及通訊
2. 信令傳輸
3. NAT/防火牆穿越
4. 如果點對點通訊建立失敗，可以作為中轉伺服器

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框架的架構應該長這個樣子

整合了ICE框架的WebRTC應用架構

瀏覽器相容

還是字首不同的問題，採用和上面類似的方法：

var PeerConnection = (window.PeerConnection ||
                    window.webkitPeerConnection00 || 
                    window.webkitRTCPeerConnection || 
                    window.mozRTCPeerConnection);

建立和使用

//使用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));
    }
};

例項

由於涉及較為複雜靈活的信令傳輸，故這裡不做簡短的例項，可以直接移步到最後

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。建立一個視訊聊天室，並能夠廣播檔案，當然也支援單對單檔案傳輸，寫得還很粗糙，後期會繼續完善

使用方式

  1. 下載解壓並cd到目錄下
  2. 執行npm install安裝依賴的庫（express, ws, node-uuid）
  3. 執行node server.js，訪問localhost:3000，允許攝像頭訪問
  4. 開啟另一臺電腦，在瀏覽器（Chrome和Opera，還未相容Firefox）開啟{server所在IP}:3000，允許攝像頭和話筒訪問
  5. 廣播檔案：在左下角選定一個檔案，點選“傳送檔案”按鈕
  6. 廣播資訊：左下角input框輸入資訊，點擊發送
  7. 可能會出錯，注意F12對話方塊，一般F5能解決

功能

視訊音訊聊天（連線了攝像頭和話筒，至少要有攝像頭），廣播檔案（可單獨傳播，提供API，廣播就是基於單獨傳播實現的，可同時傳播多個，小檔案還好說，大檔案坐等記憶體吃光），廣播聊天資訊

參考資料

相關推薦

使用WebRTC搭建前端視訊聊天室——入門篇

什麼是WebRTC？ 眾所周知，瀏覽器本身不支援相互之間直接建立通道進行通訊，都是通過伺服器進行中轉。比如現在有兩個客戶端，甲和乙，他們倆想要通訊，首先需要甲和伺服器、乙和伺服器之間建立通道。甲給乙傳送訊息時，甲先將訊息傳送到伺服器上，伺服器對甲的訊息進行中轉，傳送到乙處，反過來也是一樣。這樣甲與乙之間

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

如果需要搭建例項的話可以參照SkyRTC-demo：github地址 其中使用了兩個庫：SkyRTC(github地址)和SkyRTC-client(github地址) 這兩個庫和demo都是我寫的，如果有bug或是錯誤歡迎指出，我會盡力更正 前面的話 這篇文章講述了WebRTC中所涉及的信令交換以及

拋棄websocket，前端直接打通訊道，webRTC搭建音視訊聊天

什麼是WebRTC？ 眾所周知，瀏覽器本身不支援相互之間直接建立通道進行通訊，都是通過伺服器進行中轉。比如現在有兩個客戶端，甲和乙，他們倆想要通訊，首先需要甲和伺服器、乙和伺服器之間建立通道。甲給乙傳送訊息時，甲先將訊息傳送到伺服器上，伺服器對甲的訊息進行中轉，傳送到乙

WebRTC實現網頁版多人視訊聊天室

因為產品中要加入網頁中網路會議的功能，這幾天都在倒騰 WebRTC，現在分享下工作成果。 話說 WebRTC Real Time Communication 簡稱 RTC，是谷歌若干年前收購的一項技術，後來把這項技術應用到瀏覽器中並開源出來，而且搞了一套標準提交給W3C，稱為WebRTC，官方

搭建Websocket簡易聊天室

eui imp str %s 管理 關閉連接 string self stat 本文，我們通過Egret和Node.js實現一個在線聊天室的demo。主要包括：聊天，改用戶名，查看其他用戶在線狀態的功能。大致流程為，用戶訪問網頁，即進入聊天狀態，成為新遊客，通過底部的輸入框

視訊聊天室,視訊會議

    Ahead AAC Decoder library documentation Version 1.0.2.1, Menno Bakker ([email protected])   1&nbs

Netty+Android搭建一個簡易聊天室（實現群聊和私聊）

零，前言 JRBM專案中無論是好友私聊，公開聊天室，還是比賽平臺都需要用到長連線，之前沒有接觸過網路通訊等知識，更別說框架了，因此直接上手netty確實有些困難，在前期主要是在b站上看（https://www.bilibili.com/video/av26415011）這個

基於freeSWITCH的sip協議利用WebRTC 實現實時視訊聊天

1.FreeSWITCH windows版安裝FreeSWITCH 是一個電話的軟交換解決方案，包括一個軟電話和軟交換機用以提供語音和聊天的產品驅動。此經驗主要介紹FreeSWITCH windows版安裝過程。下載地址：http://files.freeswitch.org

基於WebRtc在H5視訊聊天、視訊教學、視訊會議、視訊直播、白板互動低延時方案

隨移動互聯應用加快，4G,5G網路上馬，低延時網路視訊應改越來越走近生活，在教學，會議，線上醫療，招聘交友及時視訊要求高等場景需求越來越大，傳統基於rtmp直播應用已經大量應用在各個方向，由於rtmp基於TCP延時上可控較差，有積累延時，互動效能差，而新興的Webrtc技術，

實現一個簡單的視訊聊天室（原始碼）

       在 《》一文釋出後，很多朋友建議我也實現一個視訊聊天室給他們參考一下，其實，視訊聊天室與語音聊天室的原理是差不多的，由於加入了攝像頭、視訊的處理，邏輯會繁雜一些，本文就實現一個簡單的多人視訊聊天系統，讓多個人可以進入同一個房間進行語音視訊溝通。先看看3個人進行視訊聊天的執行效果截圖： 　　  

通過JavaScript呼叫AnyChat實現視訊聊天室

視訊聊天室 最近公司做專案，需要找一套跨平臺的即時通訊解決方案，希望是Web瀏覽器的，聲音要清楚，視訊要清晰，流量小……但是目 前國內這類方案太少了，目前只找到一個，這是案例：(http://www.anychat.cn/web/)；我在CSDN網上看到的，這個案例整合了

即時通訊 音視訊聊天室開發建議

目前網上視訊聊天室、視訊會議軟體、可視IP電話軟體隨處可見，你是否想自己做一個玩玩？其實這類軟體無非是視訊加上網路而建成的。如果熟悉視訊捕 捉和網路傳輸技術，根本就難不倒你。本文詳細介紹瞭如何利用別人提供的sdk來開發視訊聊天室 首先介紹一下視訊聊天技術發展歷程 　　1、 

Electron前端開發桌面程式--入門篇

前言前端開發桌面程式這個概念已經出現有一段時間了，這項技術也已經走向成熟，Github上nw和光electron的star就差不多有10w顆星了，github也衍生出了很多開源的桌面專案儼然成了一個熱門專案。既然這麼熱，那就一個字：學。本文主要幫助js基礎比較薄弱，又沒有接觸

聊天室入門實戰（node，socket.io實現)--第一章（實現登入群聊功能）

這幾天花時間寫了一個聊天室的demo，實現了登入，使用者名稱檢測，群聊，單聊，圖片傳送等功能，這個系列部落格會分為幾章講解，由淺入深，逐步優化，章節間關聯性較大，建議從第一章開始閱讀。由於水平有限，有說的不對的地方還請各位大佬們留言指正。有不清楚的地方也可以留言提問。該部

FlexAir 開源版-多人視訊聊天室,網路遠端多人視訊會議系統((Flex,Fms3聯合開發))

整個軟體的圖片：   本系統是基於Flex的Air環境開發(air1.5版本)，伺服器端使用的是fms3.0(本人現在使用的是fms3.0學習版本(免費)) 介面分為3部分：左，中，右 左邊顯示使用者列表(點使用者頭像聊天，點攝像頭圖片看對方視訊,管理使用者等

WebRTC：一個視訊聊天的簡單例子

相關API簡介 在前面的章節中，已經對WebRTC相關的重要知識點進行了介紹，包括涉及的網路協議、會話描述協議、如何進行網路穿透等，剩下的就是WebRTC的API了。 WebRTC通訊相關的API非常多，主要完成了如下功能： 信令交換 通訊候選地址交換 音視訊採集 音視訊傳送、接收 相關API太多，為避免

5分鐘搭建一個HTML5視訊聊天Demo（WebRTC+NodeJS）

轉載自： http://blog.csdn.net/u012377333/article/category/2670379   謝謝版主 到 http://nodejs.org/ 下載最新版nodejs，我下的是“node-v0.10.7-x86.msi”。 安裝，

【入門篇】Nginx + FastCGI 程序（C/C++） 搭建高性能web service的Demo及部署發布

框架 logs ice term con scrip 什麽 5.1 cal 由於最近工作的需要，本人學習了一下利用高性能web server - Nginx，來發布C/C++編寫的fastCGI程序，詳細細節如下。 1.介紹 Nginx - 高性能w

php-GatewayWorker搭建實時聊天室

publish span ons 文件的 java 名稱 time() eva 一個 ├── Applications // 這裏是所有開發者應用項目 │ └── YourApp // 其中一個項目目錄，目錄名可以自定義 │ ├── Events.php

websocket搭建的聊天室

說明 原理 example port adc type htm 消息 var 在前後端數據交互的時候我們經常使用的是ajax，用的是傳統的http協議，而http協議有個致命的缺點，就是請求一結束，連接就斷開了， 我們為了保持這個鏈接的，通常會使用cookie，而自從h5出