IT教程 ·

在Ubuntu上布置一个基于webrtc的多人视频谈天效劳

Python应用——自定义排序全套方案

近来研讨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布置的静态页面就能够啦。开两个网页,本身能够跟本身试一下,最好找其他朋侪试一下,有的时刻穿透效劳没设置好的时刻,本身跟本身是能够的,然则跟其他人就不能够了。

win10打开自带wifi热点共享

参与评论