WebRTC实战教程：从零构建P2P视频聊天应用

1. WebRTC技术概述

WebRTC（Web Real-Time Communication）是一项支持浏览器之间进行实时音视频通信的开放标准。与传统客户端-服务器架构不同，WebRTC建立了直接的端对端连接，显著降低延迟并提高通信质量。

核心优势：

低延迟通信：P2P连接避免服务器中转
高质量媒体传输：自适应码率与网络状况调整
无需插件：现代浏览器原生支持
安全加密：DTLS和SRTP保障通信安全

典型应用场景：

视频会议系统
在线教育平台
远程医疗咨询
游戏实时通信

2. WebRTC核心技术组件

理解WebRTC的三个核心API是构建应用的基础：

2.1 MediaStream（获取媒体设备）

// 获取用户摄像头和麦克风权限
async function getUserMedia() {
    try {
        const constraints = {
            video: {
                width: { ideal: 1280 },
                height: { ideal: 720 }
            },
            audio: {
                echoCancellation: true,
                noiseSuppression: true
            }
        };
        
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        return stream;
    } catch (error) {
        console.error('获取媒体设备失败:', error);
        throw error;
    }
}

// 使用示例
const localVideo = document.getElementById('localVideo');
getUserMedia().then(stream => {
    localVideo.srcObject = stream;
});

2.2 RTCPeerConnection（建立P2P连接）

// 创建PeerConnection实例
function createPeerConnection() {
    const configuration = {
        iceServers: [
            { urls: 'stun:stun.l.google.com:19302' },
            { urls: 'stun:stun1.l.google.com:19302' }
        ]
    };
    
    return new RTCPeerConnection(configuration);
}

// 设置媒体轨道
function setupMediaTracks(pc, stream) {
    stream.getTracks().forEach(track => {
        pc.addTrack(track, stream);
    });
}

2.3 RTCDataChannel（数据传输通道）

// 创建数据通道传输文本或文件
function createDataChannel(pc, label) {
    const dataChannel = pc.createDataChannel(label, {
        ordered: true, // 保证消息顺序
        maxRetransmits: 3 // 最大重传次数
    });
    
    dataChannel.onopen = () => {
        console.log('数据通道已建立');
    };
    
    dataChannel.onmessage = (event) => {
        console.log('收到消息:', event.data);
    };
    
    return dataChannel;
}

3. 信令系统设计与实现

WebRTC本身不包含信令机制，需要开发者自行实现连接协商过程。

3.1 WebSocket信令服务器

// Node.js + WebSocket信令服务器
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

const rooms = new Map();

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        const data = JSON.parse(message);
        
        switch (data.type) {
            case 'join':
                handleJoin(ws, data);
                break;
            case 'offer':
            case 'answer':
            case 'ice-candidate':
                forwardMessage(data);
                break;
        }
    });
});

function handleJoin(ws, data) {
    const { roomId, userId } = data;
    
    if (!rooms.has(roomId)) {
        rooms.set(roomId, new Map());
    }
    
    const room = rooms.get(roomId);
    room.set(userId, ws);
    
    // 通知房间内其他用户
    room.forEach((client, id) => {
        if (id !== userId) {
            client.send(JSON.stringify({
                type: 'user-joined',
                userId: userId
            }));
        }
    });
}

3.2 客户端信令处理

class SignalingClient {
    constructor() {
        this.ws = new WebSocket('ws://localhost:8080');
        this.setupEventHandlers();
    }
    
    setupEventHandlers() {
        this.ws.onopen = () => {
            console.log('信令服务器连接成功');
        };
        
        this.ws.onmessage = (event) => {
            this.handleSignalingMessage(JSON.parse(event.data));
        };
    }
    
    handleSignalingMessage(message) {
        switch (message.type) {
            case 'offer':
                this.handleOffer(message);
                break;
            case 'answer':
                this.handleAnswer(message);
                break;
            case 'ice-candidate':
                this.handleICECandidate(message);
                break;
        }
    }
    
    send(message) {
        if (this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify(message));
        }
    }
}

4. 完整视频聊天应用实现

整合所有组件构建完整的P2P视频聊天应用。

4.1 应用架构设计

class VideoChatApp {
    constructor() {
        this.localStream = null;
        this.remoteStreams = new Map();
        this.peerConnections = new Map();
        this.signaling = new SignalingClient();
        this.initialize();
    }
    
    async initialize() {
        try {
            // 获取本地媒体流
            this.localStream = await this.getUserMedia();
            this.setupLocalVideo();
            
            // 设置信令处理器
            this.setupSignalingHandlers();
            
        } catch (error) {
            console.error('初始化失败:', error);
        }
    }
    
    async joinRoom(roomId, userId) {
        this.signaling.send({
            type: 'join',
            roomId: roomId,
            userId: userId
        });
    }
    
    async createOffer(targetUserId) {
        const pc = this.createPeerConnection(targetUserId);
        
        try {
            const offer = await pc.createOffer();
            await pc.setLocalDescription(offer);
            
            this.signaling.send({
                type: 'offer',
                targetUserId: targetUserId,
                offer: offer
            });
            
        } catch (error) {
            console.error('创建offer失败:', error);
        }
    }
    
    async handleOffer(message) {
        const { userId, offer } = message;
        const pc = this.createPeerConnection(userId);
        
        try {
            await pc.setRemoteDescription(offer);
            const answer = await pc.createAnswer();
            await pc.setLocalDescription(answer);
            
            this.signaling.send({
                type: 'answer',
                targetUserId: userId,
                answer: answer
            });
            
        } catch (error) {
            console.error('处理offer失败:', error);
        }
    }
}

4.2 ICE候选处理与连接建立

// ICE候选收集与交换
setupICECandidateHandling(pc, targetUserId) {
    pc.onicecandidate = (event) => {
        if (event.candidate) {
            this.signaling.send({
                type: 'ice-candidate',
                targetUserId: targetUserId,
                candidate: event.candidate
            });
        }
    };
    
    pc.onconnectionstatechange = () => {
        console.log('连接状态:', pc.connectionState);
        if (pc.connectionState === 'connected') {
            this.onConnectionEstablished(targetUserId);
        }
    };
}

// 处理远程媒体流
pc.ontrack = (event) => {
    const remoteStream = event.streams[0];
    this.remoteStreams.set(targetUserId, remoteStream);
    this.setupRemoteVideo(targetUserId, remoteStream);
};

5. 高级特性与优化

提升应用体验的高级功能实现。

5.1 屏幕共享功能

// 实现屏幕共享
async function shareScreen() {
    try {
        const screenStream = await navigator.mediaDevices.getDisplayMedia({
            video: {
                cursor: 'always',
                displaySurface: 'window'
            },
            audio: false
        });
        
        // 替换视频轨道
        const videoTrack = screenStream.getVideoTracks()[0];
        const sender = this.getVideoSender();
        await sender.replaceTrack(videoTrack);
        
        // 监听屏幕共享结束
        videoTrack.onended = () => {
            this.switchBackToCamera();
        };
        
    } catch (error) {
        console.error('屏幕共享失败:', error);
    }
}

5.2 网络状况监控

// 监控网络统计数据
async function monitorNetworkStats(pc) {
    const stats = await pc.getStats();
    
    stats.forEach(report => {
        if (report.type === 'candidate-pair' && report.nominated) {
            const rtt = report.currentRoundTripTime;
            const availableBitrate = report.availableOutgoingBitrate;
            
            this.updateNetworkIndicator(rtt, availableBitrate);
        }
    });
    
    // 定期更新
    setTimeout(() => this.monitorNetworkStats(pc), 5000);
}

// 自适应码率调整
function adjustBitrateBasedOnNetwork(quality) {
    const constraints = {
        video: {
            width: { ideal: quality === 'high' ? 1280 : 640 },
            height: { ideal: quality === 'high' ? 720 : 480 },
            frameRate: { ideal: quality === 'high' ? 30 : 15 }
        }
    };
    
    return constraints;
}

6. 总结与部署建议

通过本教程，我们完整实现了基于WebRTC的P2P视频聊天应用，涵盖：

媒体设备获取与流管理
P2P连接建立与维护
信令系统设计与实现
高级功能扩展

生产环境部署建议：

TURN服务器配置：处理NAT穿透失败情况
SSL证书：HTTPS环境保障媒体获取权限
负载均衡：信令服务器集群部署
监控告警：实时监控连接质量与服务器状态

性能优化方向：

实现SFU架构支持多人会议
集成AI降噪与视频增强
开发移动端原生体验
实现端到端加密保障隐私

// 简化版WebRTC演示（需要HTTPS环境）
document.addEventListener(‘DOMContentLoaded’, function() {
const demoContainer = document.createElement(‘div’);
demoContainer.innerHTML = `

WebRTC基础功能演示

document.getElementById(‘startDemo’).addEventListener(‘click’, async function() {
try {
// 获取本地媒体流
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
});

const localVideo = document.getElementById(‘demoLocalVideo’);
localVideo.srcObject = stream;

// 创建模拟的PeerConnection（实际应用中需要信令服务器）
const pc1 = new RTCPeerConnection();
const pc2 = new RTCPeerConnection();

// 添加本地轨道到pc1
stream.getTracks().forEach(track => {
pc1.addTrack(track, stream);
});

// 处理pc2接收的远程轨道
pc2.ontrack = (event) => {
const remoteVideo = document.getElementById(‘demoRemoteVideo’);
remoteVideo.srcObject = event.streams[0];
};

// 模拟信令交换过程
pc1.onicecandidate = (event) => {
if (event.candidate) {
pc2.addIceCandidate(event.candidate);
}
};

pc2.onicecandidate = (event) => {
if (event.candidate) {
pc1.addIceCandidate(event.candidate);
}
};

// 创建offer/answer建立连接
const offer = await pc1.createOffer();
await pc1.setLocalDescription(offer);
await pc2.setRemoteDescription(offer);

const answer = await pc2.createAnswer();
await pc2.setLocalDescription(answer);
await pc1.setRemoteDescription(answer);

} catch (error) {
console.error(‘演示失败:’, error);
alert(‘演示需要安全上下文(HTTPS)或localhost环境’);
}
});
});