• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    在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="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部署到服务器。注意需要走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

    总结

    到此这篇关于在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解的文章就介绍到这了,更多相关Ubuntu webrtc视频聊天内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

    上一篇:Linux运维工具Supervisor的安装使用(进程管理工具)
    下一篇:5分钟搭建一个WebRTC视频聊天
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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