Build a WebRTC video chat in 5 minutes

In the previous article, I introduced the detailed code of a multi-person video chat service based on webrtc on Ubuntu. Interested friends can refer to it. Today I will share with you an article about building a WebRTC video chat in 5 minutes.

Just search WebRTC on Baidu, I think there are a lot of them. I thought I could use SkyRTC-demo from this friend (Building WebRtc Environment) to chat easily, but after struggling for a long time, I couldn't even send text messages, let alone video. So I did it myself.

To achieve video communication on the public Internet, the following three core elements are required:

• One is the NAT penetration server (ICE Server), which realizes intranet penetration. You can search Baidu for its specific function.
• A WebSocket-based signaling server used to establish a point-to-point channel. Web client.
• The camera is called through the WebRTC feature of H5 for user interaction.

The three parts are composed as follows:

The blue part can actually be deployed on three servers, but the demonstration environment here is on one server. The ports that need to be opened are 3478, 8888, and 8080. Of course, you can also configure them yourself. The following are the detailed combination steps:

Preparation

Server operating environment: centos 7.3

Installation tools: nodejs, git, please install it by Baidu

Client environment: FireFox (or mobile version of FireFox). Because Chrome requires https support, the server needs to deploy a certificate. So the demo program only supports Firefox. If necessary, I will post another article to introduce it.

Installing NAT Traversal Server (ICE Server)

There are two main ways to achieve intranet penetration: stun and turn. Generally, the addresses of stun and turn are configured. If stun cannot be connected, it will automatically switch to the turn server. For detailed introduction, please refer to: STUN, TURN, ICE Introduction There are many open source stun servers on the Internet, but I have never succeeded with any of them. If you are interested, you can try: https://www.jb51.net/article/181287.htm I will directly use coturn to build the turn server. The installation command is as follows:

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

P.S. If ./configure fails, openssl and Libevent2 are probably needed:

yum install -y openssl openssl-devel

yum -y install libevent-devel

After the installation is complete, copy turnserver.conf in example/etc to the bin folder:

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

Modify the configuration turnserver.conf as follows:

#Listening port listening-port=3478

#Alibaba Cloud Intranet IP
listening-ip=10.214.31.57

#Alibaba Cloud external network IP address external-ip=118.24.78.34
#Access user and password user=yubao:000000

Start the service:

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

After setting up, you can test whether it is successful at https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/, as follows:

You can also view the running log at any time in the /var/log folder, such as mine:

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

Signaling Server

The signaling server uses signalmaster, based on websocket. The reason for choosing it is that it can be directly integrated with the 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 can connect to turnserver, but does not support username/password mode. Line 110 of the source code sockets.js needs to be adjusted. The adjusted code is as follows:

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
  });
  });
 }

After completion, modify config/production.json and configure the user and password of turnserver as follows:

{
 "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
 }
 ]
}

start up:

nohup node server.js &

Web Client

The client can quickly make an HTML page. You can refer to: Building a customer service system step by step (1) Implementing a web version of a multi-person text and video chat room in 3 minutes (including complete source code) Of course, if you are too lazy, just click to download. You can find a static web server and deploy it. Note to modify the signal server address in the second part:

var webrtc = new SimpleWebRTC({

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

 autoRequestMedia: true,

 url:'http://qq.openauth.me:8888', //Configure as your own signal server nick: 'yubaolee' //User's nickname during text chat});

The address I deployed is: http://qq.openauth.me:8080/baortc/index.html (don’t visit it casually, I’ll be shy if you see me suddenly 🙂 (✿◡‿◡)), computer FireFox (chrome has higher security requirements and must use https, temporarily use firefox for testing) access effect:

If you use another computer or mobile phone to access the page using Firefox, you will find that there are already two video windows (the page just opened on the computer will also automatically have two video windows), and you can communicate via text and video:

From then on, a WebRTC program has been built.

Summarize

This is the end of this article about building a WebRTC video chat in 5 minutes. For more related WebRTC video chat content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!