基于 WebRTC 的 1 对 1 通话实战 (一) 环境搭建

注：该环境搭建基于 macOS，其他系统（windows、linux）搭建也基本类似。

一、VSCode 安装

Virsual Studio Code 官网地址：https://code.visualstudio.com/

VSCode 有 macOS、Windows x64、Linux x64 位版本，满足在不同系统的开发需求。效果如下：

注：如果小伙伴有自己喜欢的前端开发工具也可以不用下载 VSCode。使用 VSCode 主要用来编写 1 对 1 音视频通话 Web 端与信令服务器（nodejs）。如果不了解信令服务器是什么的话可以先看下之前的一篇文章：WebRTC 基础知识详解https://xie.infoq.cn/article/eeec80de90597e84a146cd353

二、Nodejs 安装

注：信令服务器使用 nodejs 实现。

使用命令行安装

mac 下终端命令行安装 nodejs 需要用到 Homebrew，homebrew 安装详细教程参考链接：https://zhuanlan.zhihu.com/p/90508170，教程很详细，并且还有教 Mac M1 芯片上如何安装Homebrew，另外教程提供了各种国内源，安装速度很快。

安装完 Homebrew 后我们来安装 nodejs，安装过程也很简单，如下：

brew install node

我之前安装过了，所以重新安装报以上错误。

安装成功后我们使用node -v 来查看安装的 nodejs 版本，还可以使用brew upgrade node来升级当前安装的 nodejs 版本。

使用 pkg 安装包安装

nodejs 官网链接：https://nodejs.org/en/，访问链接后点击 LTS 长期支持版本下载。

点击继续，按照步骤安装完成即可。

三、Coturn 穿透服务器安装

coturn 是 TURN 和 STUN Server 的免费开源实现。不懂 TURN 与 STUN 同样先看 WebRTC 基础知识详解https://xie.infoq.cn/article/eeec80de90597e84a146cd353这篇文章。

在编译 coturn 之前需要先安装一些第三方依赖，如openssl、libevent等，coturn 编译时会使用到这些库，所以我们先安装这些依赖，免得编译过程中报错。

mac 下使用命令行安装这些库很简单，如下

brew install openssl

brew install libevent

mac 的有些版本使用 brew 安装 openssl 是安装不成功的，所以我们采用源码编译的方式来安装。先在 github 上下载 openssl 源码，GitHub - openssl/openssl: TLS/SSL and crypto library ，然后使用如下命令安装：

cd openssl./Configure darwin64-x86_64-cc  --prefix=/usr/local/sudo make && make install

当然我们也可以使用源码方式安装libevent，如下

wget https://github.com/downloads/libevent/libevent/libevent-2.0.21-stable.tar.gztar zxvf libevent-2.0.21-stable.tar.gzcd libevent-2.0.21-stable && ./configuremake && make install

当以上两个第三方依赖安装完成后我们开始下载并编译 coturn，步骤如下

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

编译过程中出现以下图片中的错误是因为我们没有安装postgresql软件包，使用brew install postgresql命令安装后重新编译 coturn 即可。

编译安装完成后显示如下图。

查看 Coturn 是否安装成功

我们使用 nohub 命令行启动 coturn 来测试。

nohup 的英文全称是 no hang up（不挂起），用于在系统后台不挂断地运行命令，退出终端不会影响程序的运行。

nohup 命令，在默认情况下（非重定向时），会输出一个名叫 nohup.out 的文件到当前目录下，如果当前目录的 nohup.out 文件不可写，输出重定向到 $HOME/nohup.out 文件中。启动服务时如果在命令末尾加 &符号 ，后台执行起来后按 ctr+c, 服务不会停止运行。

启动 coturn 服务命令如下（后台启动）

sudo nohup turnserver ‐L 0.0.0.0 ‐a ‐u user:123456 ‐v ‐f ‐r nort.gov &

前台启动

sudo turnserver ‐L 0.0.0.0 ‐a ‐u user:123456 ‐v ‐f ‐r nort.gov

前台启动时，当我们关闭终端（命令行窗口）服务就关掉了。

启动服务后我们使用查看端口号 3478 是否存在进程来判断服务是否启动成功，命令如下

sudo lsof ‐i:3478

如果终端打印有监听 3478 端口，说明我们的 coturn 服务启动成功。

测试 Coturn 服务器

coturn 服务器启动成功后，我们来测试服务器中继转发与打洞是否可以成功。测试地址如下：

Trickle ICE (webrtc.github.io)

打开测试地址，然后在 ICE servers 配置处配置 STUN or TURN URI（例如 stun:172.16.40.254:3478）、TURN username（我们上边启动服务时写的 user）、TURN password（123456）,以上三个选项填写完成后点击 Add Server 添加配置，最后点击 Gather candidates 开始测试。

测试结果如下：

我们可以分别测试 turn 和 stun，并且使用 relay 模式检查 coturn 服务是否配置成功。

四、Nginx 服务器安装

注：在 web 端进行 1 对 1 通话打开摄像头时，要求必须是 https 的链接。因此我们使用 Nginx 服务来提供 wss 连接的支持，解决 https 必须调用 wss 连接的问题。当然，如果你有可使用的 https 域名，也可不用配置 nginx 服务器。

科普：ws 协议和 wss 协议两个均是 WebSocket 协议的 SCHEM，两者一个是非安全的，一个是安全的。就好比 HTTP 协议和 HTTPS 协议的差别。ws 是不安全的连接，类似 http。wss 是安全的连接，类似 https。https 的链接不能访问 ws，虽然它本身是安全的，但是它不能降级做不安全的访问。

好了，我们来开始安装配置 nginx 代理服务器，步骤如下

命令行方式安装：

brew install nginx

安装完成之后，我们来使用 openssl 生成签名证书，如下

mkdir ‐p ~/cert
cd ~/cert
#创建CA私钥
sudo openssl genrsa -out key.pem 2048

自签名证书：

sudo openssl req -new -x509 -key key.pem -out cert.pem -days 365

生成自签名证书时我们需要配置一些证书标识，如下

Country Name (2 letter code) [AU]:ch
State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:
Email Address []:

其中我们需要至少填一项，剩下其他项不想填可以直接回车（默认为空）跳过。

自签名证书生成完后我们来配置 nginx，如下

配置 nginx 前先来了解一个 brew 安装的必备知识点：

brew 安装软件所在目录

1、配置文件在/usr/local/etc 目录中

2、安装文件在/usr/local/Cellar 目录中

3、二进制可执行程序的软链接在/usr/local/bin 目录中

知道配置文件在哪里后我们就可以开始配置了，修改/usr/local/etc/nginx/nginx.conf 文件，不过我们一般不把配置写到/usr/local/etc/nginx/nginx.conf 里面，为了配置更清晰，我们写在当前 nginx 目录下面的 servers 的文件夹下，例如：我们可以在 servers 目录下建立一个 webrtc.conf 文件，然后在该文件中配置。

cd /usr/local/etc/nginx/servers/vim webrtc.conf

然后将以下配置文件粘贴进 webrtc.conf 文件中，并将ssl_certificate、ssl_certificate_key换为自己生产的证书地址，将 server_name 换为自己的服务地址，在 root 处配置自己的 web 页面目录地址。

server {listen 443 ssl;ssl_certificate ~/cert/cert.pem;ssl_certificate_key ~/cert/key.pem;charset utf‐8;# ip地址或域名server_name 192.168.1.11;location / {add_header 'Access‐Control‐Allow‐Origin' '*';add_header 'Access‐Control‐Allow‐Credentials' 'true';add_header 'Access‐Control‐Allow‐Methods' '*';add_header 'Access‐Control‐Allow‐Headers' 'Origin, X‐Requested‐With, Content‐Type,Accept';# web页面目录root /webrtc/app/client;index index.php index.html index.htm;  }}

配置完成后输入：wq 保存并退出。

接下来我们将我们配置好的 webrtc.conf 配置到 nginx.conf 中，如下

cd /usr/local/etc/nginxvim nginx.conf

将include /usr/local/etc/nginx/servers/webrtc.conf 配置在以上打开的 nginx.conf 末尾大括号前保存并退出。现在 nginx 就配置完成了，接下来我们来看如何启动、停止 nginx。

启动 nginx：

sudo nginx

停止 nginx：

sudo nginx  -s stop

重新加载 nginx 配置文件：

sudo nginx -s reload

当然，我们也可使用源码方式安装，如下

下载需要安装的 nginx 版本，下载地址：http://nginx.org/download/，下载完成解压后执行以下操作

cd nginx‐对应下载的版本# 配置支持https./configure --with-http_ssl_module# 编译make # 安装sudo make install

配置过程与以上命令行类似。

以上就是 nginx 的命令行、源码安装与配置了。

Nginx 安装常见问题

安装 Nginx 输入命令 brew install nginx 时报错：

You have not agreed to the Xcode license. Please resolve this by running:

sudo xcodebuild -license

nginx 设置本地跨域

在 mac 终端运行命令的时候会被提示没有同意 xcode 证书 ，这个时候需要在 Terminal 中

输入命令 sudo xcodebuild -license 空格到最后，然后输入 agree 同意就可以了。

结语

笔者尽量对 WebRTC 环境搭建做了比较详细的介绍，一些相关的细节需要读者自己做进一步的学习。另外由于本文旨在讲解 webrtc 环境搭建，并没有涉及 webrtc 开发相关知识，后续会有基于 WebRTC 的 1 对 1 通话实战(二)信令服务器实现、基于 WebRTC 的 1 对 1 通话实战(三)web 端实现、基于 WebRTC 的 1 对 1 通话实战(四)Android 端实现、基于 WebRTC 的 1 对 1 通话实战(五)iOS 端实现系列文章，欢迎关注了解。如果本篇文章有什么问题，欢迎留言交流。

参考：

https://www.jianshu.com/p/32f068922baf

https://www.jianshu.com/p/915eab39476d

https://blog.csdn.net/baidu_39578566/article/details/115974009

https://blog.csdn.net/lldouble/article/details/80805186