5分钟快速打造WebRTC视频聊天

百度一下WebRTC，我想也是一堆。本觉得用这位朋友（ 搭建WebRtc环境 ）的SkyRTC-demo 就能够一马平川的实现聊天，结果折腾了半天，文本信息都发不出去，更别说视频了。因而本身动手。

想在公网上实现视频通讯，须要下面3个核心元素：

1. 一个是NAT穿透服务器(ICE Server)，实现内网穿透，具体的做用能够自行百度。
2. 基于WebSocket的信令服务器(Signaling Server)，用于创建点对点的通道。
3. Web客户端。经过H5的WebRTC特性调用摄像头，进行用户交互。

三个部分的组成以下：

 

蓝色的部分实际部署能够在三台服务器，我这里演示环境都在一台服务器。须要开的端口347八、888八、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（别随便访问，忽然看到我....我会害羞的🙂(✿◡‿◡)），电脑FireFox（chrome安全要求比较高，必须用https，暂时用firefox测试）访问效果：

 

再用另外一台电脑或手机firefox访问，能够发现已经有两个视频窗口（刚刚电脑打开的页面也会自动有两个视频窗口），而且能够文本，视频通讯：

 自此，一个WebRTC的程序搭建完成。