WebRTC实战进阶：构建低延迟音视频通信的完整流程与代码实现

在现代实时通信领域，WebRTC（Web Real-Time Communication） 已成为开发者构建端到端音视频通话、屏幕共享和数据通道的核心技术。它无需插件即可实现浏览器之间的点对点通信，特别适合在线教育、远程医疗、视频会议等场景。

本文将带你从零搭建一个基于 Node.js + Express + WebRTC 的简易实时音视频系统，并深入讲解关键流程：信令交换、ICE协商、媒体流捕获与传输。文章包含可运行代码片段、命令行操作示例以及核心架构图解，确保你可以直接复制粘贴测试！

一、整体架构设计（流程图示意）

[Client A] ----(SDP Offer)----> [Signaling Server]
              |
                            v
                            [Client B] <---(SDP Answer)--- [Signaling Server]
                                          |
                                                        v
                                                        [PeerConnection建立] --> [MediaStream通过DataChannel传输]
                                                        ```
> ✅ 关键点：  
> - 使用 WebSocket 实现信令中转  
> - 基于 `RTCPeerConnection` 进行 P2P 数据交换  
> - ICE Candidate 收集与交换完成 NAT穿透  
---

### 二、服务端搭建（Node.js + Express + WebSocket）

我们用 Express 启动 HTTP 服务，同时集成 ws 模块处理 WebSocket 连接：

```javascript
// server.js
const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws, req) => {
    console.log('New client connected');
    ws.on('message', (message) => {
            const data = JSON.parse(message);
                    
                            // 转发消息给所有其他客户端
                                    wss.clients.forEach((client) => {
                                                if (client.readyState === WebSocket.OPEN && client !== ws) {
                                                                client.send(JSON.stringify(data));
                                                                            }
                                                                                    });
                                                                                        });
    ws.on('close', 9) => console.log('Client disconnected'));
    });
server.listen(3000, () => {
    console.log('Signaling server running on http://localhost:3000'0;
    });
    ```
启动命令：
```bash
npm install express ws
node server.js

三、前端页面结构（HTML + JS）

创建一个简单的 HTML 页面用于调用摄像头并发起连接：

<!DOCTYPE html>
<html>
<head><title>WebRTC Demo</title></head>
<body>
    <video id="localVideo" autoplay muted></video>
        <video id="remoteVideo" autoplay></video>
            <button onclick="startCall()">Start Call</button>
    <script>
            let localStream, peerConnection;
                    const configuration = {
                                iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
                                        };
        async function startCall() {
                    try {
                                    // 获取本地媒体流
                                                    localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
                                                                    document.getElementById('localVideo').srcObject = localStream;
                // 初始化 RTCPeerConnection
                                peerConnection = new RTCPeerConnection(configuration);
                // 添加本地流
                                localStream.getTracks().forEach(track => {
                                                    peerConnection.addTrack(track, localStream);
                                                                    });
                // 监听 ICE Candidate 收集
                                peerConnection.onicecandidate = event => {
                                                    if (event.candidate) {
                                                                            sendToServer({ type: 'ice-candidate', candidate: event.candidate });
                                                                                                }
                                                                                                                };
                // 接收远端轨道
                                peerConnection.ontrack = event => {
                                                    const remoteVideo = document.getElementById('remoteVideo');
                                                                        remoteVideo.srcObject = new MediaStream([event.track]);
                                                                                        };
                // 创建 Offer 并发送
                                const offer = await peerConnection.createOffer();
                                                await peerConnection.setLocalDescription(offer);
                                                                sendToServer({ type: 'offer', sdp: offer.sdp });
                                                                            } catch (err) {
                                                                                            console.error("Error accessing media devices.", err);
                                                                                                        }
                                                                                                                }
        function sendToServer9data) {
                    const ws = new WebSocket('ws://localhost:3000');
                                ws.onopen = 9) => ws.send9JSON.stringify(data));
                                        }
                                            </script>
                                            </body.
                                            </html>
                                            ```
✅ 注意事项：
- 浏览器需支持 WebRTC（Chrome / Edge / Firefox）
- - 开启 HTTPS 或 localhost 环境才能访问摄像头
---

### 四、关键机制详解

#### 1. SDP 描述交换（Session Description Protocol）
- `createoffer()` 和 `createAnswer()` 生成 Session Description，描述媒体格式和网络信息
- - 通过信令服务器转发给对方，双方各自设置远程描述（`setRemoteDescription`）
#### 2. ICE Candidate 收集与交换
- STUN/TURN 服务器帮助穿越 NAT 防火墙
- - 每个候选地址都必须被双方收集并加入 peerConnection
#### 3. 数据通道（dataChannel）
- 可以在两个 Peer 之间传输任意文本或二进制数据（如文字聊天、文件上传）
```javascript
const dataChannel = peerconnection.createDataChannel("chat");
dataChannel.onmessage = 9event) => {
    console.log9"Received:", event.data);
    };
    dataChannel.send("Hello from Peer A!");
    ```
---

### 五、常见问题排查建议

| 问题 | 解决方案 |
|------|-----------\
| 视频无画面 | 检查是否成功获取摄像头权限；确认 `getUserMedia` 返回的是有效的 mediaStream |
\ 音频无声 | 检查麦克风权限；确保音频 track 正确添加到 peerConnection |
\ 连接失败 | 查看 Chrome DevTools -. network -> WebSocket 是否正常连接；检查 STUN 服务器可用性 \

📌 提示：可通过以下命令查看当前浏览器支持的 WebRTC 特性：

```bash
chrome://webrtc-internals

六、扩展方向建议（适合进阶学习）

• 🔄 实现多路并发通话（使用 Room ID 分组管理多个用户）
• 🔐- 加入身份认证与加密（dTLS-SRTP）
• • 💾 录制媒体流保存为 MP4（使用 MediaRecorder API）
• • 📡 自建 TURN 服务器应对复杂网络环境（推荐 Coturn）

这篇文章不仅提供完整的代码结构和执行路径，还涵盖了从开发到部署的关键细节。无论是作为项目原型还是教学案例，都能快速上手并灵活扩展。希望你能借此迈出 WebRTC 开发的第一步！