WebRTC视频聊天系统

发表于 更新于

好的，我将为您整理这篇文章，使其结构更清晰、行文更连贯，同时保持原意不变。

WebRTC视频聊天系统快速搭建指南

概述

本文旨在指导读者在短时间内（约5分钟）搭建一个功能完整的WebRTC视频聊天系统。WebRTC（Web Real-Time Communication）是一项支持网页浏览器进行实时语音或视频对话的技术。

系统架构

一个能在公网运行的视频通信系统需要三个核心组件：

  1. NAT穿透服务器（ICE Server）：解决内网穿透和网络地址转换问题。
  2. 基于WebSocket的信令服务器（Signaling Server）：用于建立点对点连接前的信令交换。
  3. Web客户端：通过HTML5的WebRTC API调用摄像头并实现用户交互。

这三个部分可以部署在同一台或多台服务器上。演示环境需要开放以下端口：3478、8888、8080。

系统架构图如下：
![[WebRTC视频聊天系统/IMG-20260417144637992.png]]

一、准备工作

1.1 服务器环境

  • 操作系统：CentOS 7.3
  • 必备工具：Node.js、Git（请预先安装）

1.2 客户端环境

  • 推荐浏览器：Firefox（桌面版或手机版）
  • 注意：Chrome浏览器要求HTTPS环境，需要部署SSL证书。本文演示程序仅支持Firefox。

二、安装NAT穿透服务器（ICE Server）

2.1 安装coturn

我们使用coturn来搭建TURN服务器，以支持STUN和TURN两种内网穿透方式。

1
2
3
4
5
6
7
8
# 克隆coturn仓库
git clone https://github.com/coturn/coturn
cd coturn

# 配置、编译并安装
./configure
make
make install

2.2 安装依赖

如果./configure失败，请安装以下依赖：

1
yum install -y openssl openssl-devel libevent-devel

2.3 配置coturn

1
2
# 复制示例配置文件
cp examples/etc/turnserver.conf bin/turnserver.conf

编辑 bin/turnserver.conf 文件，关键配置如下：

1
2
3
4
listening-port=3478
listening-ip=10.214.31.57  # 服务器内网IP
external-ip=118.24.78.34   # 服务器公网IP
user=yubao:000000          # 访问用户名和密码

2.4 启动服务

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

2.5 测试ICE服务器

访问 WebRTC官方ICE测试页面，添加你的TURN服务器信息进行测试。
![[WebRTC视频聊天系统/IMG-20260417144638024.png]]

2.6 查看运行日志

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

三、安装信令服务器（Signaling Server）

3.1 安装signalmaster

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

3.2 修改源码以支持TURN认证

signalmaster默认不支持带用户名/密码的TURN服务器，需要修改 sockets.js 第110行附近的代码：

1
2
3
4
5
6
7
8
9
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
        });
    });
}

3.3 配置信令服务器

修改 config/production.json 配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    "isDev": true,
    "server": {
        "port": 8888,
        "secure": false
    },
    "rooms": {
        "maxClients": 0
    },
    "stunservers": [
        { "urls": "stun:stun.ekiga.net:3478" }
    ],
    "turnservers": [
        {
            "urls": ["turn:qq.openauth.me:3478"],
            "username": "yubao",
            "credential": "000000",
            "expiry": 86400
        }
    ]
}

3.4 启动信令服务器

1
nohup node server.js &

四、部署Web客户端

4.1 获取客户端代码

可以直接使用文末提供的完整HTML代码。

4.2 配置客户端

在客户端代码中，修改信令服务器地址和用户昵称：

1
2
3
4
5
6
7
var webrtc = new SimpleWebRTC({
    localVideoEl: 'localVideo',
    remoteVideosEl: 'remoteVideos',
    autoRequestMedia: true,
    url: 'http://qq.openauth.me:8888', // 改为你自己的信令服务器地址
    nick: 'yubaolee' // 用户昵称
});

4.3 部署并访问

将客户端文件（HTML、JS等）部署到Nginx或Apache等静态Web服务器。访问地址示例：http://qq.openauth.me:8080/baortc/index.html

五、测试效果

5.1 单用户访问

使用Firefox浏览器访问客户端地址，效果如下：
![[WebRTC视频聊天系统/IMG-20260417144638253.png]]

5.2 多用户视频聊天

使用另一台设备（电脑或手机）的Firefox浏览器访问同一地址，即可看到两个视频窗口，并可以进行文本和视频通信。
![[WebRTC视频聊天系统/IMG-20260417144638274.png]]

总结

通过以上步骤，我们快速搭建了一个包含三个核心组件的WebRTC视频聊天系统：

  1. NAT穿透服务器：基于coturn的TURN服务器。
  2. 信令服务器：基于signalmaster的WebSocket服务器。
  3. Web客户端：基于SimpleWebRTC库的HTML5客户端。

该系统虽然简洁，但完整实现了WebRTC的核心通信功能，可作为进一步开发和优化的基础。

附录：简易客户端完整代码

以下是一个基于SimpleWebRTC库的简易视频聊天室完整代码，复制保存为HTML文件即可使用（需将信令服务器地址url和昵称nick改为你自己的值）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://simplewebrtc.com/latest.js"></script>
    <script>
        var webrtc = new SimpleWebRTC({
            localVideoEl: 'localVideo',
            remoteVideosEl: 'remoteVideos',
            autoRequestMedia: true,
            url: 'http://your-signal-server:8888', // 请修改为你的信令服务器地址
            nick: 'YourName' // 请修改为你的昵称
        });

        webrtc.on('readyToCall', function () {
            webrtc.joinRoom('room1');

            // 发送文本消息
            $('#send').click(function () {
                var msg = $('#text').val();
                webrtc.sendToAll('chat', { message: msg, nick: webrtc.config.nick });
                $('#messages').append('<br>You:<br>' + msg + '\n');
                $('#text').val('');
            });
        });

        // 接收文本消息
        webrtc.connection.on('message', function (data) {
            if (data.type === 'chat') {
                $('#messages').append('<br>' + data.payload.nick + ':<br>' + data.payload.message + '\n');
            }
        });
    </script>
    <style>
        #remoteVideos video, #localVideo {
            height: 150px;
        }
    </style>
</head>
<body>
    <textarea id="messages" rows="5" cols="20"></textarea><br />
    <input id="text" type="text" />
    <input id="send" type="button" value="send" /><br />
    <video id="localVideo"></video>
    <div id="remoteVideos"></div>
</body>
</html>

说明：SimpleWebRTC是一个优秀的WebRTC封装库，它简化了建立连接、交换信令等复杂流程，并屏蔽了不同浏览器间的API差异，让开发者能更专注于应用逻辑。

参考资料：