在Ubuntu上搭建一个基于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部署的静态页面就可以啦。开两个网页,自己可以跟自己试一下,最好找其他朋友试一下,有的时候穿透服务没配置好的时候,自己跟自己是可以的,但是跟其他人就不可以了。
参考
Coturn: TURN and STUN Server
5分钟快速打造WebRTC视频聊天
coturn
总结
下一篇:Docker镜像存储overlayfs的使用