在Ubuntu上部署一个基于webrtc的多人视频聊天服务

最近研究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视频聊天

 Real-time communication for the web

coturn

signalmaster