5分鐘搭建一個WebRTC視頻聊天
在上篇文章給大家介紹了在Ubuntu上搭建一個基于webrtc的多人視頻聊天服務實例代碼詳解,感興趣的朋友可以參考下。今天給大家分享一篇關于5分鐘搭建一個WebRTC視頻聊天。
百度一下WebRTC,我想也是一堆。本以為用這位朋友( 搭建WebRtc環(huán)境 )的SkyRTC-demo 就可以一馬平川的實現(xiàn)聊天,結果折騰了半天,文本信息都發(fā)不出去,更別說視頻了。于是自己動手。
想在公網(wǎng)上實現(xiàn)視頻通信,需要下面3個核心元素:
- 一個是NAT穿透服務器(ICE Server),實現(xiàn)內(nèi)網(wǎng)穿透,具體的作用可以自行百度。
- 基于WebSocket的信令服務器(Signaling Server),用于建立點對點的通道。Web客戶端。
- 通過H5的WebRTC特性調(diào)用攝像頭,進行用戶交互。
三個部分的組成如下:
藍色的部分實際部署可以在三臺服務器,我這里演示環(huán)境都在一臺服務器。需要開的端口3478、8888、8080,當然也可以自行配置。下面來詳細介紹具體的組合步驟:
準備工作
服務器運行環(huán)境:centos 7.3
安裝工具:nodejs 、git 請自行百度安裝
客戶端環(huán)境:FireFox(或手機版FireFox)。因為chrome需要https支持,服務器需要部署證書。所以演示程序只支持Firefox,如有需要我會再發(fā)一篇文章介紹。
安裝NAT穿透服務器(ICE Server)
實現(xiàn)內(nèi)網(wǎng)穿透的方式主要有stun,turn兩種方式,一般用的時候會把stun,turn的地址都配置上,如果連不上stun,會自動切換到turn服務器。詳細介紹可以參考:STUN, TURN, ICE介紹 網(wǎng)上有很多開源的stun服務器,但丫的我一個都沒成功過,有興趣的可以試試:http://chabaoo.cn/article/181287.htm我這里就直接使用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,如下:
#監(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 #訪問的用戶、密碼 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行進行調(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 } ] }
啟動:
nohup node server.js &
Web客戶端
客戶端可以快速做一個html的頁面,可以參考:一步一步搭建客服系統(tǒng) (1) 3分鐘實現(xiàn)網(wǎng)頁版多人文本、視頻聊天室 (含完整源碼) 當然如果你實在是太懶,直接點擊下載吧??梢哉覀€靜態(tài)的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訪問,可以發(fā)現(xiàn)已經(jīng)有兩個視頻窗口(剛剛電腦打開的頁面也會自動有兩個視頻窗口),并且可以文本,視頻通信:
自此,一個WebRTC的程序搭建完成。
總結
到此這篇關于5分鐘搭建一個WebRTC視頻聊天的文章就介紹到這了,更多相關WebRTC視頻聊天內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用networkctl查詢Linux中網(wǎng)絡鏈接狀態(tài)的方法
networkctl?是?systemd?網(wǎng)絡管理工具的一個命令行工具,它用于查看和管理網(wǎng)絡鏈接狀態(tài),在這篇文章中,我們將詳細介紹如何使用?networkctl?查詢和管理?Linux?系統(tǒng)中的網(wǎng)絡連接狀態(tài),需要的朋友可以參考下2024-05-05如何linux環(huán)境下配置環(huán)境變量過程圖解
這篇文章主要介紹了如何linux環(huán)境下配置環(huán)境變量過程圖解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05修改.htaccess實現(xiàn)301域名重定向示例分享
這篇文章主要介紹了修改.htaccess實現(xiàn)301域名重定向示例,需要的朋友可以參考下2014-03-03