WebRTC 质量优化: 码率、延迟、卡顿、丢包

本文是 WebRTC 系列专栏的第二十七篇,将深入探讨 WebRTC 的质量优化策略,包括推荐参数配置、网络环境模拟以及带宽管理策略。

---

目录

1. 质量优化概述
2. 码率优化
3. 延迟优化
4. 卡顿优化
5. 丢包处理
6. 网络自适应
7. 测试与验证
8. 总结

---

1. 质量优化概述

1.1 质量指标

WebRTC 质量核心指标:

1. 视频质量
   - 分辨率
   - 帧率
   - 清晰度 (PSNR/SSIM)

2. 音频质量
   - 采样率
   - 音量
   - 清晰度 (MOS)

3. 实时性
   - 端到端延迟
   - 抖动

4. 流畅性
   - 卡顿率
   - 丢帧率

5. 可靠性
   - 连接成功率
   - 掉线率

1.2 质量与资源权衡

质量权衡三角:

        质量
         /\
        /  \
       /    \
      /      \
     /________\
  带宽      延迟

高质量 = 高带宽 + 高延迟
低延迟 = 低质量 或 高带宽
低带宽 = 低质量 或 高延迟

优化目标: 在约束条件下最大化质量

---

2. 码率优化

2.1 推荐码率配置

视频码率推荐值:

分辨率      帧率    最小码率    推荐码率    最大码率
320x240     15fps   100 kbps   200 kbps   400 kbps
640x360     30fps   300 kbps   600 kbps   1000 kbps
640x480     30fps   400 kbps   800 kbps   1500 kbps
1280x720    30fps   1000 kbps  2000 kbps  3500 kbps
1920x1080   30fps   2000 kbps  4000 kbps  6000 kbps

2.2 码率配置代码

async function setVideoBitrate(sender, minBitrate, maxBitrate) {
    const params = sender.getParameters();
    
    if (!params.encodings || params.encodings.length === 0) {
        params.encodings = [{}];
    }
    
    params.encodings[0].minBitrate = minBitrate;
    params.encodings[0].maxBitrate = maxBitrate;
    
    await sender.setParameters(params);
}

const bitrateProfiles = {
    low: { min: 100000, max: 500000 },
    medium: { min: 500000, max: 1500000 },
    high: { min: 1500000, max: 4000000 }
};

2.3 动态码率调整

class DynamicBitrateController {
    constructor(sender) {
        this.sender = sender;
        this.currentBitrate = 1500000;
        this.minBitrate = 100000;
        this.maxBitrate = 4000000;
    }
    
    async onNetworkFeedback(stats) {
        const lossRate = stats.packetsLost / stats.packetsReceived;
        const rtt = stats.roundTripTime;
        
        if (lossRate > 0.1 || rtt > 300) {
            this.currentBitrate *= 0.7;
        } else if (lossRate < 0.02 && rtt < 100) {
            this.currentBitrate *= 1.1;
        }
        
        this.currentBitrate = Math.max(this.minBitrate, 
            Math.min(this.maxBitrate, this.currentBitrate));
        
        await this.applyBitrate();
    }
    
    async applyBitrate() {
        const params = this.sender.getParameters();
        params.encodings[0].maxBitrate = this.currentBitrate;
        await this.sender.setParameters(params);
    }
}

---

3. 延迟优化

3.1 延迟组成

端到端延迟分解:

采集延迟:     10-30 ms
编码延迟:     20-50 ms
发送缓冲:     0-20 ms
网络传输:     20-200 ms
接收缓冲:     20-100 ms (Jitter Buffer)
解码延迟:     10-30 ms
渲染延迟:     10-30 ms
-----------------------
总延迟:       90-460 ms

3.2 低延迟配置

// 低延迟编码配置
const lowLatencyConstraints = {
    video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        frameRate: { ideal: 30 }
    }
};

// SDP 修改: 降低缓冲
function setLowLatency(sdp) {
    sdp = sdp.replace(/a=fmtp:(\d+) /g, 
        'a=fmtp:$1 x-google-max-bitrate=2500;x-google-min-bitrate=1000;');
    return sdp;
}

// 禁用 B 帧 (H.264)
function disableBFrames(sdp) {
    return sdp.replace(
        /profile-level-id=42e01f/g,
        'profile-level-id=42001f'
    );
}

3.3 Jitter Buffer 优化

// 自适应 Jitter Buffer 配置
class AdaptiveJitterBuffer {
    constructor() {
        this.minDelay = 20;
        this.maxDelay = 200;
        this.targetDelay = 50;
    }
    
    adjustDelay(jitter, lossRate) {
        if (lossRate > 0.05) {
            this.targetDelay = Math.min(this.maxDelay, this.targetDelay + 20);
        } else if (jitter < 10 && lossRate < 0.01) {
            this.targetDelay = Math.max(this.minDelay, this.targetDelay - 10);
        }
        
        return this.targetDelay;
    }
}

---

4. 卡顿优化

4.1 卡顿原因分析

卡顿原因:

1. 网络层
   - 丢包重传
   - 带宽不足
   - 网络抖动

2. 编码层
   - CPU 过载
   - 关键帧过大
   - 编码延迟

3. 解码层
   - 解码能力不足
   - 缓冲区欠载
   - 帧依赖丢失

4. 渲染层
   - GPU 过载
   - 帧率不匹配

4.2 卡顿检测

class StutterDetector {
    constructor() {
        this.lastFrameTime = 0;
        this.stutterCount = 0;
        this.stutterThreshold = 100;
    }
    
    onFrame(timestamp) {
        if (this.lastFrameTime > 0) {
            const interval = timestamp - this.lastFrameTime;
            const expectedInterval = 1000 / 30;
            
            if (interval > expectedInterval * 2) {
                this.stutterCount++;
                this.onStutter(interval);
            }
        }
        this.lastFrameTime = timestamp;
    }
    
    onStutter(duration) {
        console.log('Stutter detected:', duration, 'ms');
    }
    
    getStutterRate(duration) {
        return this.stutterCount / (duration / 1000);
    }
}

4.3 卡顿预防

class StutterPrevention {
    constructor(pc) {
        this.pc = pc;
        this.monitor();
    }
    
    async monitor() {
        setInterval(async () => {
            const stats = await this.pc.getStats();
            this.analyze(stats);
        }, 1000);
    }
    
    analyze(stats) {
        stats.forEach(report => {
            if (report.type === 'inbound-rtp' && report.kind === 'video') {
                const dropRate = report.framesDropped / report.framesDecoded;
                
                if (dropRate > 0.05) {
                    this.reduceQuality();
                }
            }
            
            if (report.type === 'outbound-rtp' && report.kind === 'video') {
                if (report.qualityLimitationReason === 'cpu') {
                    this.reduceCpuLoad();
                } else if (report.qualityLimitationReason === 'bandwidth') {
                    this.reduceBandwidth();
                }
            }
        });
    }
    
    reduceQuality() {
        console.log('Reducing quality to prevent stutter');
    }
    
    reduceCpuLoad() {
        console.log('Reducing resolution/framerate for CPU');
    }
    
    reduceBandwidth() {
        console.log('Reducing bitrate for bandwidth');
    }
}

---

5. 丢包处理

5.1 丢包恢复策略

丢包恢复方法:

1. NACK 重传
   - 适用: RTT < 100ms
   - 延迟: RTT
   - 带宽: 低

2. FEC 前向纠错
   - 适用: RTT > 100ms
   - 延迟: 0
   - 带宽: 高 (冗余)

3. 关键帧请求 (PLI/FIR)
   - 适用: 严重丢包
   - 延迟: 高
   - 带宽: 高 (关键帧大)

4. 丢包隐藏
   - 音频: 插值/重复
   - 视频: 帧复制/运动补偿

5.2 自适应丢包恢复

class PacketLossRecovery {
    constructor() {
        this.useNack = true;
        this.useFec = false;
        this.fecRate = 0;
    }
    
    adapt(lossRate, rtt) {
        if (rtt < 100) {
            this.useNack = true;
            this.useFec = lossRate > 0.05;
            this.fecRate = Math.min(0.3, lossRate * 2);
        } else {
            this.useNack = false;
            this.useFec = true;
            this.fecRate = Math.min(0.5, lossRate * 3);
        }
        
        return {
            nack: this.useNack,
            fec: this.useFec,
            fecRate: this.fecRate
        };
    }
}

5.3 FEC 配置

// SDP 中启用 FEC
function enableFec(sdp) {
    // 添加 RED 和 ULPFEC
    if (!sdp.includes('red/90000')) {
        sdp = sdp.replace(
            /(m=video.*)/,
            '$1\r\na=rtpmap:116 red/90000\r\na=rtpmap:117 ulpfec/90000'
        );
    }
    return sdp;
}

// FlexFEC 配置
function enableFlexFec(sdp) {
    if (!sdp.includes('flexfec')) {
        sdp = sdp.replace(
            /(m=video.*)/,
            '$1\r\na=rtpmap:118 flexfec-03/90000'
        );
    }
    return sdp;
}

---

6. 网络自适应

6.1 带宽估计

class BandwidthEstimator {
    constructor() {
        this.estimates = [];
        this.windowSize = 10;
    }
    
    update(availableBandwidth) {
        this.estimates.push({
            timestamp: Date.now(),
            bandwidth: availableBandwidth
        });
        
        if (this.estimates.length > this.windowSize) {
            this.estimates.shift();
        }
    }
    
    getEstimate() {
        if (this.estimates.length === 0) return 0;
        
        const sum = this.estimates.reduce((a, b) => a + b.bandwidth, 0);
        return sum / this.estimates.length;
    }
    
    getTrend() {
        if (this.estimates.length < 2) return 'stable';
        
        const recent = this.estimates.slice(-3);
        const older = this.estimates.slice(0, 3);
        
        const recentAvg = recent.reduce((a, b) => a + b.bandwidth, 0) / recent.length;
        const olderAvg = older.reduce((a, b) => a + b.bandwidth, 0) / older.length;
        
        if (recentAvg > olderAvg * 1.1) return 'increasing';
        if (recentAvg < olderAvg * 0.9) return 'decreasing';
        return 'stable';
    }
}

6.2 质量降级策略

class QualityDegradation {
    constructor() {
        this.levels = [
            { resolution: '1080p', fps: 30, bitrate: 4000000 },
            { resolution: '720p', fps: 30, bitrate: 2000000 },
            { resolution: '720p', fps: 15, bitrate: 1000000 },
            { resolution: '480p', fps: 30, bitrate: 800000 },
            { resolution: '480p', fps: 15, bitrate: 500000 },
            { resolution: '360p', fps: 15, bitrate: 300000 },
            { resolution: '240p', fps: 15, bitrate: 150000 }
        ];
        this.currentLevel = 0;
    }
    
    degrade() {
        if (this.currentLevel < this.levels.length - 1) {
            this.currentLevel++;
            return this.levels[this.currentLevel];
        }
        return null;
    }
    
    upgrade() {
        if (this.currentLevel > 0) {
            this.currentLevel--;
            return this.levels[this.currentLevel];
        }
        return null;
    }
    
    getCurrentLevel() {
        return this.levels[this.currentLevel];
    }
}

6.3 完整自适应控制器

class AdaptiveQualityController {
    constructor(pc, sender) {
        this.pc = pc;
        this.sender = sender;
        this.bandwidthEstimator = new BandwidthEstimator();
        this.degradation = new QualityDegradation();
        this.stableCount = 0;
    }
    
    async start() {
        setInterval(() => this.adapt(), 2000);
    }
    
    async adapt() {
        const stats = await this.pc.getStats();
        let bandwidth = 0;
        let lossRate = 0;
        let rtt = 0;
        
        stats.forEach(report => {
            if (report.type === 'candidate-pair' && report.state === 'succeeded') {
                bandwidth = report.availableOutgoingBitrate || 0;
                rtt = (report.currentRoundTripTime || 0) * 1000;
            }
            if (report.type === 'remote-inbound-rtp') {
                lossRate = report.fractionLost || 0;
            }
        });
        
        this.bandwidthEstimator.update(bandwidth);
        
        const trend = this.bandwidthEstimator.getTrend();
        const currentLevel = this.degradation.getCurrentLevel();
        
        if (lossRate > 0.1 || bandwidth < currentLevel.bitrate * 0.8) {
            const newLevel = this.degradation.degrade();
            if (newLevel) {
                await this.applyLevel(newLevel);
                this.stableCount = 0;
            }
        } else if (trend === 'increasing' && lossRate < 0.02) {
            this.stableCount++;
            if (this.stableCount > 5) {
                const newLevel = this.degradation.upgrade();
                if (newLevel) {
                    await this.applyLevel(newLevel);
                    this.stableCount = 0;
                }
            }
        }
    }
    
    async applyLevel(level) {
        const params = this.sender.getParameters();
        params.encodings[0].maxBitrate = level.bitrate;
        params.encodings[0].maxFramerate = level.fps;
        await this.sender.setParameters(params);
        
        console.log('Quality level changed:', level);
    }
}

---

7. 测试与验证

7.1 网络模拟

# Linux tc 命令模拟网络条件

# 添加延迟
tc qdisc add dev eth0 root netem delay 100ms 20ms

# 添加丢包
tc qdisc add dev eth0 root netem loss 5%

# 添加带宽限制
tc qdisc add dev eth0 root tbf rate 1mbit burst 32kbit latency 400ms

# 组合条件
tc qdisc add dev eth0 root netem delay 50ms 10ms loss 2% rate 2mbit

# 清除规则
tc qdisc del dev eth0 root

7.2 Chrome 网络模拟

// Chrome DevTools 网络节流
// 或使用 Chrome 命令行参数

// 启动时模拟网络
// chrome --force-fieldtrials=WebRTC-Bwe-LossBasedControl/Enabled/

// 使用 webrtc-internals 观察效果

7.3 自动化测试

class QualityTester {
    constructor(pc) {
        this.pc = pc;
        this.results = [];
    }
    
    async runTest(duration = 60000) {
        const startTime = Date.now();
        
        while (Date.now() - startTime < duration) {
            const stats = await this.collectStats();
            this.results.push(stats);
            await this.sleep(1000);
        }
        
        return this.analyze();
    }
    
    async collectStats() {
        const stats = await this.pc.getStats();
        const result = { timestamp: Date.now() };
        
        stats.forEach(report => {
            if (report.type === 'inbound-rtp' && report.kind === 'video') {
                result.packetsLost = report.packetsLost;
                result.jitter = report.jitter;
                result.framesDecoded = report.framesDecoded;
            }
            if (report.type === 'candidate-pair' && report.state === 'succeeded') {
                result.rtt = report.currentRoundTripTime;
                result.bandwidth = report.availableOutgoingBitrate;
            }
        });
        
        return result;
    }
    
    analyze() {
        const avgRtt = this.average(this.results.map(r => r.rtt));
        const avgJitter = this.average(this.results.map(r => r.jitter));
        const totalLost = this.results[this.results.length - 1].packetsLost;
        
        return {
            avgRtt: avgRtt * 1000,
            avgJitter: avgJitter * 1000,
            totalPacketsLost: totalLost,
            samples: this.results.length
        };
    }
    
    average(arr) {
        return arr.reduce((a, b) => a + (b || 0), 0) / arr.length;
    }
    
    sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

---

8. 总结

8.1 优化检查清单

质量优化检查清单:

[ ] 码率配置合理
[ ] 分辨率/帧率匹配场景
[ ] Jitter Buffer 大小适当
[ ] NACK/FEC 策略正确
[ ] 自适应降级策略
[ ] 网络监控告警
[ ] 定期质量测试

8.2 推荐参数

场景	分辨率	帧率	码率	延迟目标
1:1 通话	720p	30fps	1.5-2.5 Mbps	< 200ms
多人会议	360-720p	15-30fps	0.5-1.5 Mbps	< 300ms
屏幕共享	1080p	5-15fps	1-3 Mbps	< 500ms
直播	1080p	30fps	3-6 Mbps	< 1000ms

8.3 下一篇预告

在下一篇文章中,我们将探讨 WebRTC 安全机制。

---

参考资料

1. WebRTC Congestion Control
2. Video Quality Metrics
3. Network Emulation

---