共計(jì) 4760 個字符，預(yù)計(jì)需要花費(fèi) 12 分鐘才能閱讀完成。
這篇文章主要講解了“Ubuntu 上如何搭建基于 webrtc 的多人視頻聊天服務(wù)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著丸趣 TV 小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Ubuntu 上如何搭建基于 webrtc 的多人視頻聊天服務(wù)”吧！
webrtc，即 web real-time communication，web 實(shí)時通信技術(shù)。簡單地說就是在 web 瀏覽器里面引入實(shí)時通信，包括音視頻通話等。
一個簡單的聊天室 html 頁面
這個頁面使用 simple-webrtc 來實(shí)現(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ù)器。注意需要走 https，因?yàn)?chrome 的設(shè)定不走 https 沒法調(diào)用起攝像頭跟麥克風(fēng)。
安裝并配置 signalmaster 信令服務(wù)
信令服務(wù)是用來在客戶端之間傳輸 webrtc 的客戶端信息。因?yàn)樵?webrtc 建立 p2p 連接的時候需要對方客戶端的相關(guān)信息，所以需要一個渠道來轉(zhuǎn)發(fā)客戶端之間的信息。signalmaster 是一個基于 nodejs 的服務(wù)，使用 socket.io 實(shí)現(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 連接建立的時候需要進(jìn)行內(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 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)的用戶名密碼。
運(yùn)行所有服務(wù)
運(yùn)行信令服務(wù)：
cd signalmaster
node server.js運(yùn)行穿透服務(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ù)這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是丸趣 TV，丸趣 TV 小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！
