5分鐘快速打造WebRTC視頻聊天

百度一下WebRTC，我想也是一堆。本覺得用這位朋友（ 搭建WebRtc環境 ）的SkyRTC-demo 就能夠一馬平川的實現聊天，結果折騰了半天，文本信息都發不出去，更別說視頻了。因而本身動手。

想在公網上實現視頻通訊，須要下面3個核心元素：

1. 一個是NAT穿透服務器(ICE Server)，實現內網穿透，具體的做用能夠自行百度。
2. 基於WebSocket的信令服務器(Signaling Server)，用於創建點對點的通道。
3. Web客戶端。經過H5的WebRTC特性調用攝像頭，進行用戶交互。

三個部分的組成以下：

 

藍色的部分實際部署能夠在三臺服務器，我這裏演示環境都在一臺服務器。須要開的端口347八、888八、8080，固然也能夠自行配置。下面來詳細介紹具體的組合步驟：

準備工做

服務器運行環境：centos 7.3

安裝工具：nodejs 、git  請自行百度安裝

客戶端環境：FireFox（或手機版FireFox)。由於chrome須要https支持，服務器須要部署證書。因此演示程序只支持Firefox，若有須要我會再發一篇文章介紹。

安裝NAT穿透服務器（ICE Server）

實現內網穿透的方式主要有stun,turn兩種方式，通常用的時候會把stun,turn的地址都配置上，若是連不上stun，會自動切換到turn服務器。詳細介紹能夠參考：STUN, TURN, ICE介紹 網上有不少開源的stun服務器，但丫的我一個都沒成功過，有興趣的能夠試試：http://blog.sina.com.cn/s/blog_683d26990100oucy.html 我這裏就直接使用coturn只搭建turn server，安裝命令以下：

git clone https://github.com/coturn/coturn cd coturn ./configure make make install

附：若是./configure失敗的話，應該是須要openssl和Libevent2：

yum install -y openssl openssl-devel

yum -y install libevent-devel

 安裝完成後，把example/etc裏面的turnserver.conf拷貝到bin文件夾：

cp examples/etc/turnserver.conf bin/turnserver.conf

修改配置turnserver.conf，以下：

#監聽端口 listening-port=3478

#阿里雲內網IP listening-ip=10.214.31.57

#阿里雲外網IP地址 external-ip=118.24.78.34 #訪問的用戶、密碼 user=yubao:000000

啓動服務：

cd bin turnserver -v -r 118.24.78.34:3478 -a -o

搭建好後能夠在 https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ 測試一下有沒有成功，以下：

也能夠在/var/log文件夾中隨時查看運行日誌，好比個人：

tail -f /var/log/turn_12447_2018-04-20.log

  信令服務器(Signaling Server)

 信令服務器使用的是 signalmaster ，基於websocket。選用它的緣由是能夠直接集成turn server服務器。

git clone https://github.com/andyet/signalmaster.git cd signalmaster npm install express npm install yetify npm install getconfig npm install node-uuid npm install socket.io

signalmaster能夠鏈接turnserver，但不支持用戶名/密碼方式，須要對源碼sockets.js 110行進行調整，調整後的代碼以下：

if (!config.turnorigins || config.turnorigins.indexOf(origin) !== -1) { config.turnservers.forEach(function (server) { credentials.push({ username: server.username, credential: server.credential, urls: server.urls || server.url }); }); }

完成後，修改config/production.json，配置turnserver的用戶和密碼，以下：

{ "isDev": true, "server": { "port": 8888, "/* secure */": "/* whether this connects via https */", "secure": false, "key": null, "cert": null, "password": null }, "rooms": { "/* maxClients */": "/* maximum number of clients per room. 0 = no limit */", "maxClients": 0 }, "stunservers": [ { "urls": "stun:stun.ekiga.net:3478" } ], "turnservers": [ { "urls": ["turn:qq.openauth.me:3478"], "username": "yubao", "credential":"000000", "expiry": 86400 } ] }

 啓動：

nohup node server.js &

Web客戶端

客戶端能夠快速作一個html的頁面，能夠參考：一步一步搭建客服系統 (1) 3分鐘實現網頁版多人文本、視頻聊天室 （含完整源碼) 固然若是你實在是太懶，直接點擊下載吧。能夠找個靜態的Web服務器，部署上就能夠了。注意修改第二部的signal服務器地址：

var webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true, url:'http://qq.openauth.me:8888',  //配置成本身的signal服務器
 nick: 'yubaolee'   //文本聊天時，用戶的暱稱
 });

 我部署的地址：http://qq.openauth.me:8080/baortc/index.html（別隨便訪問，忽然看到我....我會害羞的🙂(✿◡‿◡)），電腦FireFox（chrome安全要求比較高，必須用https，暫時用firefox測試）訪問效果：

 

再用另外一臺電腦或手機firefox訪問，能夠發現已經有兩個視頻窗口（剛剛電腦打開的頁面也會自動有兩個視頻窗口），而且能夠文本，視頻通訊：

 自此，一個WebRTC的程序搭建完成。