手把手搭建WebRTC测试环境，实现1对1视频通话

问题背景：

疫情除了火了电商直播、短视频也火了视频会议，其中看zoom和声网市值就能窥探实时音视频的目前发展情况。其中视频会议相关的技术栈基本都是建立在WebRTC基础上，为了了解学习WebRTC，首先需要搭建一个能测试和抓包的环境，然后调用WebAPI写写DEMO熟悉下相应接口和抓抓包看看基本交互流程。最后再逐渐深入到协议和相关的源代码中。本文就是帮助大家一步步搭建一个DEMO的运行环境，只要严格按照教程，基本都能搭建出来，后续再讲解接口调用和WebRTC一些源码编译和内部情况。

相关资料和链接：

DEMO演示链接：

https://srs.stg.closeli.cn/index.html

本人DEMO源代码下载链接：

https://github.com/ty6815/webRTCDemo.git

或者去官网下载DEMO也可以，但是估计需要做一些适配和兼容工作，本DEMO也是在这个基础上改改后实现的。

DEMO涉及的API：

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API

WebRTC源代码：

git clone https://webrtc.googlesource.com/src

中英社区：

https://webrtc.org.cn/

https://webrtc.org/

准备工作：

要实现这套系统，运行环境是特别关键的，其中有三个条件是必须要满足的：云主机、2M 以上的带宽和 HTTPS 证书，这些需要你提前准备好。其中云主机尽量要能申请一个域名并且能够通过后台开放相应的端口。

云主机和带宽要求：搭建Web服务器（分发客户端的代码）、信令服务器（客户端加入房间交互SDP信息确定媒体协商和ICE中的候选者信息）以及stun/turn服务器（获取客户端的ICE信息），CPU内存一般的够用，但是带宽上下行要至少2M以上，至少要能撑起两路视频的带宽。

HTTPS证书：想在浏览器上实现1对1的视频通话，肯定需要访问主机或者手机上的音视频设备，出于安全的原因，浏览器要求我们使用 HTTPS 协议从服务器请求 JavaScript 脚本，只有通过 HTTPS 请求的脚本才能访问音视频设备。

核心步骤：

要运行这个DEMO，基本需要下面几个核心步骤：

1. 搭建nodejs环境；

2. 创建免费的https证书；

3. 安装express Web服务器和信令服务器；

4. 安装coturn服务；

5. 代码兼容和适配；

搭建nodejs环境：

Step1:进入nodejs官网

https://nodejs.org/en/download/

找到想要下载的版本链接。

Step2:进入linux云主机

二进制程序安装nodejs，安装在/user/local/nodejs下面

cd /home/dev/

wget https://nodejs.org/dist/v14.15.0/node-v14.15.0-linux-x64.tar.xz

cd /usr/local

cp /home/tianye/node-v14.15.0-linux-x64.tar.xz ./

tar -xvf node-v14.15.0-linux-x64.tar.xz

mv node-v14.15.0-linux-x64 nodejs

Step3:添加环境变量

vim /etc/profile

里面添加：

export NODE_HOME=/usr/local/nodejs

export PATH=$PATH:{$NODE_HOME}/bin

或者

export PATH=$PATH:/usr/local/nodejs/bin

配置生效：

source /etc/profile

Step4:添加软连接

ln -s /usr/local/nodejs/bin/npm /usr/local/bin/

ln -s /usr/local/nodejs/bin/node /usr/local/bin/

Step5:验证结果：

由于npm安装的依赖库有些经常在国外，网络有时不通所以需要添加国内镜像：

安装cnpm工具和注册阿里巴巴镜像地址：

npm install -g cnpm --registry=https://registry.npm.taobao.org

结果：

cnpm -v

创建免费的https证书：

参考文档:

https://blog.csdn.net/qq_15092079/article/details/82149807

https://www.cnblogs.com/tugenhua0707/p/10927722.html

openssl命令行：

openssl req -x509 -newkey rsa:2048 -keyout /etc/turn_server_pkey.pem -out /etc/turn_server_cert.pem -days 99999 -nodes

安装express Web服务器和搭建信令服务器：

参考：

https://www.cnblogs.com/handongyu/p/6260209.html

https://blog.csdn.net/qq_41154298/article/details/108916018

Step1. 安装express服务极其依赖：

npm init -y

npm install log4js

npm install socket.io

npm install express

mkdir etc

将https证书放到etc下面，并修改代码加载改文件名称和这里名称保持一致

Step2. 发布静态文件到express服务：

将css/html/js文件放到跟目录下面

代码里面也直接指定前端资源和代码的路径:

Step3. 启动信令服务：

方法1：直接启动

node server.js

缺点：需要ctrl+c停掉程序，并且命令窗口一直存在并且不能关闭；

方法2：forever启动

安装forever工具

npm install forever -g

或者

cnpm install forever -g

注：forever简单使用

Git地址：

https://github.com/foreversd/forever

参考文档：

https://www.cnblogs.com/KDSER/p/9099454.html

启动示例：

/usr/local/nodejs/bin/forever start server.js

查看进程示例：

/usr/local/nodejs/bin/forever list

停掉程序示例：

/usr/local/nodejs/bin/forever stop server.js

或者

forever stop [id]

Step4. 效果展示：

信令服务有没有搭建成功，就是用那个域名地址直接是否可以访问：

再就是连接信令服务是否成功，点击Connect Sig Server置灰，同时客户端控制台有如下输出则说明连接上信令服务器：

Step5. 注意事项：

1.https证书要提前准备好，可以利用openssl免费生成也可以提交csr文件到CA认证机构进行认证；

2.域名要备案，要把云主机的服务器服务器外网ip跟dns挂钩，用域名则直接可以访问还可以用ip直接访问；

3.启动服务要先去安装一系列依赖库，这个手动安装，要想用forever启动进程还需要安装该工具，如果npm不行就用cnpm安装；

安装coturn服务：

Step1. 安装coturn依赖库：

yum install git

yum install openssl

yum -y install openssl-devel

yum install libevent

yum install libevent2

yum install libevent-devel

Step2. 编译安装：

git clone https://github.com/coturn/coturn.git

./configure --prefix=/usr/local/coturn

sudo make -j 4

make install

或者

yum install coturn

Step3. 配置配置文件：

安装coturn 完成后可能还不知道配置文件在哪里，需要找下

find / -name turnserver.conf

Step4. 修改配置文件：

一般配置下面几项

实际配置文件配置：

Step5. 开放防火墙或者端口:

添加

firewall-cmd --zone=public --add-port=3478/udp --permanent

firewall-cmd --zone=public --add-port=3478/tcp --permanent

重新载入

firewall-cmd --reload

重启防火墙

systemctl restart firewalld

注意：特别要对3478端口即开放UDP也需要开放TCP，如果是阿里云主机需要在Web界面上配置和开放。

Step6. 启动服务:

cd /usr/local/coturn/bin

方式1：

turnserver -v -r 114.115.201.109 -a -o -c /usr/local/coturn/etc/turnserver.conf

方式2：

turnserver -o -a -f -user=tianye:123456 -r tianye -c /usr/local/coturn/etc/turnserver.conf

Step7. 查看进程端口：

ps -ef|grep turnserver

netstat -tunlp|grep 14503

Step8. 结果验证：

测试地址：

https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/

添加turnserver的服务信息，包括域名、端口、用户名和密码

stun srs.stg.closeli.cn:3478

turn srs.stg.closeli.cn:3478

如果这里返回了rtp realy的地址IP是你turnserver服务的外网IP和端口，则说明coturn服务搭建成功，测试有效。

代码兼容和适配：

由于示例信令程序太老，所以本次进行升级后发现一些问题，要修改前后端代码，否则整个链路有问题。

Step1. 前端代码升级socket.io依赖库版本：

由于房间管理是通过socket.io做的，利用websocket接口进行全双工通信，服务端当时安装了3.0.1的socket.io版本，所以客户端的版本要升级，否则前端和服务器端connect时失败。

Step2. 前端代码main.js里面添加turn服务器信息：

P2P打洞的时候需要和前面建立的coturn服务进行通信，所以这里需要改成实际建立的coturn服务信息。

Step3. 服务器信令服务需要修改监听事件：

房间服务监听客户端链接事件，如果收到有人加入到同一个房间则同时判断该房间的其它人数，如果该房间有2个人及以上加入则会给客户端发送otherjoin事件，由于这里求解users出现问题，导致即使有两个人加入，客户端也收不到otherjoin事件进而导致不能进行p2p通信以及其他流程，所以这里采用计数法cunt为全局变量，统计该房间人数，后面再看下socket.io这块问题。

效果演示：

演示环境建议选择chrome浏览器和Safari浏览器测试和使用。

Step1. 两端加入房间，打开画面

电脑端先加入房间1234，其次手机（和电脑连的同一局域网）也加入该房间，最后看到双方的通信的实时音视频画面：

由于电脑和手机连的同一个局域网，这里其实没有用P2P而是HOST直连方式，所以即使你不安装coturn服务器，按道理也是可以的。

Step2.不同局域网和4G测试：

如果两端分别在两个不同局域网，比如你工作电脑和家里的电脑，或者你工作电脑和4G这个时候必须安装coturn服务器，走P2P打洞方式，如果打洞失败则需要走中继方式。目前测试下来基本都是可以的。

Step3. 电脑无摄像头测试：

本示例还多了一个桌面分享按钮，就是说你电脑端采集的视频可以不是摄像头是桌面，这样可以在无摄像头的电脑上跑通该用例，记得电脑端进入房间后，分享桌面share desktpo前面打钩，再连服务器。但是该功能仅限在PC端，因为移动端还不支持该接口，无法使用。

总结：

整体来说，要顺利运行本DEMO还是需要有一些前端和音视频背景知识的，因为有很多专业词汇和代码需要浏览。入门学习者建议先搜索下这块内容。其次WebRTC是集音视频大成者，值得研究和学习，本文只是起到抛砖引玉作用，后续内容敬请关注本公众号和视频号。