5分鐘快速打造WebRTC視頻聊天

百度一下WebRTC，我想也是一堆。本以為用這位朋友（ 搭建WebRtc環境 ）的SkyRTC-demo 就可以一馬平川的實現聊天，結果折騰了半天，文本信息都發不出去，更別說視頻了。於是自己動手。

想在公網上實現視頻通信，需要下麵3個核心元素：

1. 一個是NAT穿透伺服器(ICE Server)，實現內網穿透，具體的作用可以自行百度。
2. 基於WebSocket的信令伺服器(Signaling Server)，用於建立點對點的通道。
3. Web客戶端。通過H5的WebRTC特性調用攝像頭，進行用戶交互。

三個部分的組成如下：

藍色的部分實際部署可以在三台伺服器，我這裡演示環境都在一臺伺服器。需要開的埠3478、8888、8080，當然也可以自行配置。下麵來詳細介紹具體的組合步驟：

準備工作

伺服器運行環境：centos 7.3

安裝工具：nodejs 、git  請自行百度安裝

客戶端環境：FireFox（或手機版FireFox)。因為chrome需要https支持，伺服器需要部署證書。所以演示程式只支持Firefox，如有需要我會再發一篇文章介紹。

安裝NAT穿透伺服器（ICE Server）

實現內網穿透的方式主要有stun,turn兩種方式，一般用的時候會把stun,turn的地址都配置上，如果連不上stun，會自動切換到turn伺服器。詳細介紹可以參考：STUN, TURN, ICE介紹 網上有很多開源的stun伺服器，但丫的我一個都沒成功過，有興趣的可以試試：http://blog.sina.com.cn/s/blog_683d26990100oucy.html 我這裡就直接使用coturn只搭建turn server，安裝命令如下：

git clone https://github.com/coturn/coturn
cd coturn
./configure
make
make install

附：如果./configure失敗的話，應該是需要openssl和Libevent2：

yum install -y openssl openssl-devel

yum -y install libevent-devel

 安裝完成後，把example/etc裡面的turnserver.conf拷貝到bin文件夾：

cp examples/etc/turnserver.conf bin/turnserver.conf

修改配置turnserver.conf，如下：

#監聽埠
listening-port=3478

#阿裡雲內網IP
listening-ip=10.214.31.57

#阿裡雲外網IP地址
external-ip=118.24.78.34
#訪問的用戶、密碼
user=yubao:000000

啟動服務：

cd bin
turnserver -v -r 118.24.78.34:3478 -a -o

搭建好後可以在 https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ 測試一下有沒有成功，如下：

也可以在/var/log文件夾中隨時查看運行日誌，比如我的：

tail -f /var/log/turn_12447_2018-04-20.log 

  信令伺服器(Signaling Server)

 信令伺服器使用的是 signalmaster ，基於websocket。選用它的原因是可以直接集成turn server伺服器。

git clone https://github.com/andyet/signalmaster.git
cd signalmaster
npm install express
npm install yetify
npm install getconfig
npm install node-uuid
npm install socket.io

signalmaster可以連接turnserver，但不支持用戶名/密碼方式，需要對源碼sockets.js 110行進行調整，調整後的代碼如下：

        if (!config.turnorigins || config.turnorigins.indexOf(origin) !== -1) {
            config.turnservers.forEach(function (server) {
                credentials.push({
                    username: server.username,
                    credential: server.credential,
                    urls: server.urls || server.url
                });
            });
        }

完成後，修改config/production.json，配置turnserver的用戶和密碼，如下：

{
  "isDev": true,
  "server": {
    "port": 8888,
    "/* secure */": "/* whether this connects via https */",
    "secure": false,
    "key": null,
    "cert": null,
    "password": null
  },
  "rooms": {
    "/* maxClients */": "/* maximum number of clients per room. 0 = no limit */",
    "maxClients": 0
  },
  "stunservers": [
    {
      "urls": "stun:stun.ekiga.net:3478"
    }
  ],
  "turnservers": [
    {
      "urls": ["turn:qq.openauth.me:3478"],
      "username": "yubao",
      "credential":"000000",  
      "expiry": 86400
    }
  ]
}

 啟動：

nohup node server.js &

Web客戶端

客戶端可以快速做一個html的頁面，可以參考：一步一步搭建客服系統 (1) 3分鐘實現網頁版多人文本、視頻聊天室 （含完整源碼) 當然如果你實在是太懶，直接點擊下載吧。可以找個靜態的Web伺服器，部署上就可以了。註意修改第二部的signal伺服器地址：

var webrtc = new SimpleWebRTC({

    localVideoEl: 'localVideo',
   
    remoteVideosEl: 'remoteVideos',

    autoRequestMedia: true,

    url:'http://qq.openauth.me:8888',  //配置成自己的signal伺服器

    nick: 'yubaolee'   //文本聊天時，用戶的昵稱

});

 我部署的地址：http://qq.openauth.me:8080/baortc/index.html（別隨便訪問，突然看到我....我會害羞的