原文地址：

5分鐘快速打造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ù)器。需要開(kāi)的端口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ù)器需要部署證書(shū)。所以演示程序只支持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)上有很多開(kāi)源的stun服務(wù)器，但丫的我一個(gè)都沒(méi)成功過(guò)，有興趣的可以試試：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

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

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

修改配置turnserver.conf，如下：

#監(jiān)聽(tīng)端口 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}] }

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è)視頻窗口（剛剛電腦打開(kāi)的頁(yè)面也會(huì)自動(dòng)有兩個(gè)視頻窗口），并且可以文本，視頻通信：

自此，一個(gè)WebRTC的程序搭建完成。

===================================

原貼地址：https://www.cnblogs.com/yubaolee/p/webrtc.html

總結(jié)

以上是生活随笔為你收集整理的5分钟快速打造WebRTC视频聊天转的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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