在上篇文章給大家介紹了在Ubuntu上搭建一個(gè)基于webrtc的多人視頻聊天服務(wù)實(shí)例代碼詳解，感興趣的朋友可以參考下。今天給大家分享一篇關(guān)于5分鐘搭建一個(gè)WebRTC視頻聊天。
百度一下WebRTC，我想也是一堆。本以為用這位朋友（ 搭建WebRtc環(huán)境 ）的SkyRTC-demo 就可以一馬平川的實(shí)現(xiàn)聊天，結(jié)果折騰了半天，文本信息都發(fā)不出去，更別說(shuō)視頻了。于是自己動(dòng)手。
想在公網(wǎng)上實(shí)現(xiàn)視頻通信，需要下面3個(gè)核心元素：
- 一個(gè)是NAT穿透服務(wù)器(ICE Server)，實(shí)現(xiàn)內(nèi)網(wǎng)穿透，具體的作用可以自行百度。
- 基于WebSocket的信令服務(wù)器(Signaling Server)，用于建立點(diǎn)對(duì)點(diǎn)的通道。Web客戶端。
- 通過(guò)H5的WebRTC特性調(diào)用攝像頭，進(jìn)行用戶交互。
三個(gè)部分的組成如下：
藍(lán)色的部分實(shí)際部署可以在三臺(tái)服務(wù)器，我這里演示環(huán)境都在一臺(tái)服務(wù)器。需要開的端口3478、8888、8080，當(dāng)然也可以自行配置。下面來(lái)詳細(xì)介紹具體的組合步驟：
準(zhǔn)備工作
服務(wù)器運(yùn)行環(huán)境：centos 7.3
安裝工具：nodejs 、git 請(qǐng)自行百度安裝
客戶端環(huán)境：FireFox（或手機(jī)版FireFox)。因?yàn)閏hrome需要https支持，服務(wù)器需要部署證書。所以演示程序只支持Firefox，如有需要我會(huì)再發(fā)一篇文章介紹。
安裝NAT穿透服務(wù)器（ICE Server）
實(shí)現(xiàn)內(nèi)網(wǎng)穿透的方式主要有stun,turn兩種方式，一般用的時(shí)候會(huì)把stun,turn的地址都配置上，如果連不上stun，會(huì)自動(dòng)切換到turn服務(wù)器。詳細(xì)介紹可以參考：STUN, TURN, ICE介紹 網(wǎng)上有很多開源的stun服務(wù)器，但丫的我一個(gè)都沒(méi)成功過(guò)，有興趣的可以試試：https://www.jb51.net/article/181287.htm我這里就直接使用coturn只搭建turn server，安裝命令如下：
git clone https://github.com/coturn/coturn
cd coturn
./configure
make
make install
附：如果./configure失敗的話，應(yīng)該是需要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，如下：
#監(jiān)聽端口
listening-port=3478
#阿里云內(nèi)網(wǎng)IP
listening-ip=10.214.31.57
#阿里云外網(wǎng)IP地址
external-ip=118.24.78.34
#訪問(wèn)的用戶、密碼
user=yubao:000000
啟動(dòng)服務(wù)：
cd bin
turnserver -v -r 118.24.78.34:3478 -a -o
搭建好后可以在 https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ 測(cè)試一下有沒(méi)有成功，如下：
也可以在/var/log文件夾中隨時(shí)查看運(yùn)行日志，比如我的：
tail -f /var/log/turn_12447_2018-04-20.log
信令服務(wù)器(Signaling Server)
信令服務(wù)器使用的是 signalmaster ，基于websocket。選用它的原因是可以直接集成turn server服務(wù)器。
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，但不支持用戶名/密碼方式，需要對(duì)源碼sockets.js 110行進(jìn)行調(diào)整，調(diào)整后的代碼如下：
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
}
]
}
啟動(dòng)：
Web客戶端
客戶端可以快速做一個(gè)html的頁(yè)面，可以參考：一步一步搭建客服系統(tǒng) (1) 3分鐘實(shí)現(xiàn)網(wǎng)頁(yè)版多人文本、視頻聊天室 （含完整源碼) 當(dāng)然如果你實(shí)在是太懶，直接點(diǎn)擊下載吧?？梢哉覀€(gè)靜態(tài)的Web服務(wù)器，部署上就可以了。注意修改第二部的signal服務(wù)器地址：
var webrtc = new SimpleWebRTC({
localVideoEl: 'localVideo',
remoteVideosEl: 'remoteVideos',
autoRequestMedia: true,
url:'http://qq.openauth.me:8888', //配置成自己的signal服務(wù)器
nick: 'yubaolee' //文本聊天時(shí)，用戶的昵稱
});
我部署的地址：http://qq.openauth.me:8080/baortc/index.html（別隨便訪問(wèn)，突然看到我....我會(huì)害羞的🙂(✿◡‿◡)），電腦FireFox（chrome安全要求比較高，必須用https，暫時(shí)用firefox測(cè)試）訪問(wèn)效果：
再用另一臺(tái)電腦或手機(jī)firefox訪問(wèn)，可以發(fā)現(xiàn)已經(jīng)有兩個(gè)視頻窗口（剛剛電腦打開的頁(yè)面也會(huì)自動(dòng)有兩個(gè)視頻窗口），并且可以文本，視頻通信：
自此，一個(gè)WebRTC的程序搭建完成。
總結(jié)
到此這篇關(guān)于5分鐘搭建一個(gè)WebRTC視頻聊天的文章就介紹到這了,更多相關(guān)WebRTC視頻聊天內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
