站长资源服务器

在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解

整理:jimmy2024/12/29浏览2
简介WebRTC,即Web Real-Time Communication,web实时通信技术。简单地说就是在web浏览器里面引入实时通信,包括音视频通话等。在疫情期间哪里也去不了,在家没事就研究webrtc视频直播技术,网上找了些教程最终都不太能顺利跑起来的,可能是文章写的比较老,使用的一些开源组件

WebRTC,即Web Real-Time Communication,web实时通信技术。简单地说就是在web浏览器里面引入实时通信,包括音视频通话等。

在疫情期间哪里也去不了,在家没事就研究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="/UploadFiles/2021-04-10/jquery.min.js">

安装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的多人视频聊天服务实例代码详解

参考

Coturn: TURN and STUN Server
5分钟快速打造WebRTC视频聊天

coturn

总结