在ubuntu上实现基于webrtc的多人在线视频聊天服务
生活随笔
收集整理的這篇文章主要介紹了
在ubuntu上实现基于webrtc的多人在线视频聊天服务
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近研究webrtc視頻直播技術，網上找了些教程最終都不太能順利跑起來的，可能是文章寫的比較老，使用的一些開源組件已經更新了，有些配置已經不太一樣了，所以按照以前的步驟會有問題。折騰了一陣終于跑起來了，記錄一下。
一個簡單的聊天室html頁面
這個頁面使用simple-webrtc來實現webrtc的通訊，simple-webrtc是對幾個webrtc核心對象的封裝，所以使用這個會比較簡單。
<!DOCTYPE html> <html> <head><title>webrtc chat room </title><style>video {height: 200px;width: 200px;border: 1px solid cornflowerblue;border-radius: 3px;margin: 10px;}</style> </head> <body><div>roomid: <input id="roomid" type="text" value=""/> <input type="button" id="btnStart" value="join room"></div><div>nick name: <input id ="nickname" readonly="readonly" type = "text" value=""></div><h3>self:</h3><video id="localVideo"></video><div id="remoteVideos"><h3>remote clients:</h3></div><script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script><script src="js/simplewebrtc-with-adapter.bundle.js"></script><script lang="javascript">$("#nickname").val(new Date().getTime()); var qs = function (key) {return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];};var roomid = qs("roomid");if (roomid) {$('#roomid').val(roomid);}else {$('#roomid').val('99999');}// $('#roomid').val(roomid);var smUrl = 'https://webrtc.xxx.com:8800';var webrtc = new SimpleWebRTC({// the id/element dom element that will hold "our" videolocalVideoEl: 'localVideo',// the id/element dom element that will hold remote videosremoteVideosEl: 'remoteVideos',// immediately ask for camera accessautoRequestMedia: true,url: smUrl,nick: $('#nickname').val(),});webrtc.on('readyToCall', function () {// you can name it anythingconsole.log('connectioned .');});webrtc.on("createdPeer", function (peer) {console.log('createdPeer', peer, peer.nick );if (peer.nick) {alert('client '+ peer.nick + ' joined');}});webrtc.on("joinedRoom", (roomName )=>{console.log('joinedRoom', roomName );alert('joined room ' + roomName );});webrtc.on("leftRoom", (roomName )=>{console.log('leftRoom', roomName );});webrtc.on("videoAdded", (videoEl, peer )=>{console.log('videoAdded', videoEl, peer );if (peer.nick) {alert('client '+ peer.nick + ' joined');}});webrtc.on("videoRemoved", (videoEl, peer )=>{console.log('videoRemoved', videoEl, peer );});$('#btnStart').click(function(){var roomId = $('#roomid').val();webrtc.joinRoom(roomId); // alert('join room '+ roomId +' success')})//$('#btnStart').click();</script> </body> </html>安裝nginx并部署聊天室頁面
安裝nginx：
sudo apt-get install nginx配置nginx：
server {listen 80;listen 443;server_name webrtc.xxx.com;location / {index index.html;root html/www;}ssl on;ssl_certificate /ssl/xxx.crt;ssl_certificate_key /ssl/xxx.key;ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;}安裝完成nginx后把上面的html頁面使用nginx部署到服務器。注意需要走https，因為chrome的設定不走https沒法調用起攝像頭跟麥克風。
安裝并配置signalmaster信令服務
信令服務是用來在客戶端之間傳輸webrtc的客戶端信息。因為在webrtc建立p2p連接的時候需要對方客戶端的相關信息，所以需要一個渠道來轉發客戶端之間的信息。signalmaster是一個基于nodejs的服務，使用socket.io實現websocket長連接。
安裝signalmaster:
git clone https://github.com/simplewebrtc/signalmaster.git配置signalmaster：
cd signalmaster cd config vim development.json //編輯 {"isDev": true,"server": {"port": 8800,"/* secure */": "/* whether this connects via https */","secure": true,"cert": "/ssl/xxx.crt","key": "/ssl/xxx.key","password": null},"rooms": {"/* maxClients */": "/* maximum number of clients per room. 0 = no limit */","maxClients": 0},"stunservers": [{"urls": "stun:webrtc.xxx.com:3478"}],"turnservers": [{"urls": ["turn:webrtc.xxx.com:3478"],"username": "abc","credential": "123","secret": "","expiry": 86400}] } ~這里主要注意的是也需要配置ssl證書，證書使用上面nginx那個證書即可。另外trunserver如果設置了密碼也需要配置正確的用戶名跟密碼。
安裝并配置coturn穿透服務
我們的客戶端一般都在局域網之內，所以p2p連接建立的時候需要進行內網穿透。使用coturn建立turnserver作為穿透服務。
安裝coturn：
# deps apt-get install -y \emacs-nox \build-essential \libssl-dev sqlite3 \libsqlite3-dev \libevent-dev \g++ \libboost-dev \libevent-dev # download wget https://github.com/coturn/coturn/archive/4.5.0.7.tar.gz tar xvf 4.5.0.7.tar.gz # build & install cd coturn-4.5.0.7 ./configure --prefix=/opt make make install # env echo "export PATH=/opt/bin:$PATH" >> ~/.bashrc source ~/.bashrc配置coturn：
cd coturn-4.5.0.7 vim coturn.conf #server listening-port=3478 listening-ip= relay-ip= alt-listening-port=0 external-ip= realm=abc # server-name={YOUR_SERVER_NAME} no-tls no-dtls mobility no-cli verbose fingerprint # auth lt-cred-mech stale-nonce=3600 # user # 這里是演示，不配置數據庫，通過 use={name}:{password} 方式配置 # userdb=/opt/var/db/turndb # 多用戶則寫多行 user=abc:123這里主要需要注意的是ip的配置listening-ip=內網ip，relay-ip=內網ip，external-ip=外網ip。還有user配置了話，信令服務器也要配置對應的用戶名密碼。
運行所有服務
運行信令服務：
cd signalmaster node server.js運行穿透服務器：
cd coturn-4.5.0.7 turnserver -c coturn.conf訪問一下nginx部署的靜態頁面就可以啦。開兩個網頁，自己可以跟自己試一下，最好找其他朋友試一下，有的時候穿透服務沒配置好的時候，自己跟自己是可以的，但是跟其他人就不可以了。
參考
Coturn: TURN and STUN Server
5分鐘快速打造WebRTC視頻聊天
Real-time communication for the web
coturn
signalmaster
總結
以上是生活随笔為你收集整理的在ubuntu上实现基于webrtc的多人在线视频聊天服务的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： .NET和.NET Core Web A
- 下一篇： 在 WSL Ubuntu 上使用 .NE