溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Ubuntu上如何搭建基于webrtc的多人視頻聊天服務(wù)

發(fā)布時間：2022-10-26 10:18:15 來源：億速云 閱讀：163 作者：iii 欄目：服務(wù)器

這篇文章主要講解了“Ubuntu上如何搭建基于webrtc的多人視頻聊天服務(wù)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Ubuntu上如何搭建基于webrtc的多人視頻聊天服務(wù)”吧！

webrtc，即web real-time communication，web實時通信技術(shù)。簡單地說就是在web瀏覽器里面引入實時通信，包括音視頻通話等。

一個簡單的聊天室html頁面

這個頁面使用simple-webrtc來實現(xiàn)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>
 $("#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" video
 localvideoel: 'localvideo',
 // the id/element dom element that will hold remote videos
 remotevideosel: 'remotevideos',
 // immediately ask for camera access
 autorequestmedia: true,
 url: smurl,
 nick: $('#nickname').val(),
 });

 webrtc.on('readytocall', function () {
 // you can name it anything
 console.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部署到服務(wù)器。注意需要走h(yuǎn)ttps，因為chrome的設(shè)定不走h(yuǎn)ttps沒法調(diào)用起攝像頭跟麥克風(fēng)。

安裝并配置signalmaster信令服務(wù)

信令服務(wù)是用來在客戶端之間傳輸webrtc的客戶端信息。因為在webrtc建立p2p連接的時候需要對方客戶端的相關(guān)信息，所以需要一個渠道來轉(zhuǎn)發(fā)客戶端之間的信息。signalmaster是一個基于nodejs的服務(wù)，使用socket.io實現(xiàn)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如果設(shè)置了密碼也需要配置正確的用戶名跟密碼。

安裝并配置coturn穿透服務(wù)

我們的客戶端一般都在局域網(wǎng)之內(nèi)，所以p2p連接建立的時候需要進行內(nèi)網(wǎng)穿透。使用coturn建立turnserver作為穿透服務(wù)。

安裝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
# 這里是演示，不配置數(shù)據(jù)庫，通過 use={name}:{password} 方式配置
# userdb=/opt/var/db/turndb
# 多用戶則寫多行
user=abc:123

這里主要需要注意的是ip的配置listening-ip=內(nèi)網(wǎng)ip，relay-ip=內(nèi)網(wǎng)ip，external-ip=外網(wǎng)ip。還有user配置了話，信令服務(wù)器也要配置對應(yīng)的用戶名密碼。

運行所有服務(wù)

運行信令服務(wù)：

cd signalmaster
node server.js

運行穿透服務(wù)器：

cd coturn-4.5.0.7
turnserver -c coturn.conf

訪問一下nginx部署的靜態(tài)頁面就可以啦。開兩個網(wǎng)頁，自己可以跟自己試一下，最好找其他朋友試一下，有的時候穿透服務(wù)沒配置好的時候，自己跟自己是可以的，但是跟其他人就不可以了。

感謝各位的閱讀，以上就是“Ubuntu上如何搭建基于webrtc的多人視頻聊天服務(wù)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Ubuntu上如何搭建基于webrtc的多人視頻聊天服務(wù)這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手