溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Ubuntu上如何搭建基于webrtc的多人視頻聊天服務”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Ubuntu上如何搭建基于webrtc的多人視頻聊天服務”吧！
webrtc，即web real-time communication，web實時通信技術。簡單地說就是在web瀏覽器里面引入實時通信，包括音視頻通話等。
一個簡單的聊天室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>
$("#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部署到服務器。注意需要走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部署的靜態頁面就可以啦。開兩個網頁，自己可以跟自己試一下，最好找其他朋友試一下，有的時候穿透服務沒配置好的時候，自己跟自己是可以的，但是跟其他人就不可以了。
感謝各位的閱讀，以上就是“Ubuntu上如何搭建基于webrtc的多人視頻聊天服務”的內容了，經過本文的學習后，相信大家對Ubuntu上如何搭建基于webrtc的多人視頻聊天服務這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
