WebRTC，即Web Real-Time Communication，web實(shí)時(shí)通信技術(shù)。簡(jiǎn)單地說就是在web瀏覽器里面引入實(shí)時(shí)通信，包括音視頻通話等。
在疫情期間哪里也去不了，在家沒事就研究webrtc視頻直播技術(shù)，網(wǎng)上找了些教程最終都不太能順利跑起來的，可能是文章寫的比較老，使用的一些開源組件已經(jīng)更新了，有些配置已經(jīng)不太一樣了，所以按照以前的步驟會(huì)有問題。折騰了一陣終于跑起來了，記錄一下。
一個(gè)簡(jiǎn)單的聊天室html頁面
這個(gè)頁面使用simple-webrtc來實(shí)現(xiàn)webrtc的通訊，simple-webrtc是對(duì)幾個(gè)webrtc核心對(duì)象的封裝，所以使用這個(gè)會(huì)比較簡(jiǎn)單。
<!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" 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，因?yàn)閏hrome的設(shè)定不走h(yuǎn)ttps沒法調(diào)用起攝像頭跟麥克風(fēng)。
安裝并配置signalmaster信令服務(wù)
信令服務(wù)是用來在客戶端之間傳輸webrtc的客戶端信息。因?yàn)樵趙ebrtc建立p2p連接的時(shí)候需要對(duì)方客戶端的相關(guān)信息，所以需要一個(gè)渠道來轉(zhuǎn)發(fā)客戶端之間的信息。signalmaster是一個(gè)基于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那個(gè)證書即可。另外trunserver如果設(shè)置了密碼也需要配置正確的用戶名跟密碼。
安裝并配置coturn穿透服務(wù)
我們的客戶端一般都在局域網(wǎng)之內(nèi)，所以p2p連接建立的時(shí)候需要進(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
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ù)器也要配置對(duì)應(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)頁面就可以啦。開兩個(gè)網(wǎng)頁，自己可以跟自己試一下，最好找其他朋友試一下，有的時(shí)候穿透服務(wù)沒配置好的時(shí)候，自己跟自己是可以的，但是跟其他人就不可以了。
參考
Coturn: TURN and STUN Server
5分鐘快速打造WebRTC視頻聊天
coturn
總結(jié)
到此這篇關(guān)于在Ubuntu上搭建一個(gè)基于webrtc的多人視頻聊天服務(wù)實(shí)例代碼詳解的文章就介紹到這了,更多相關(guān)Ubuntu webrtc視頻聊天內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
