这篇文章主要讲解了“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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。