📚 课程目录第1章课程导入

1. 课程导入

各位同学好，我是老周。今天咱们正式开始《WebRTC编码参数设置与调优》的第一章。

做WebRTC开发，编码器是绕不开的核心。说白了，视频通话的质量好不好，一半看网络，一半看编码参数调得对不对。我见过太多项目，功能都跑通了，但画面糊成一团、延迟高得离谱，最后发现就是编码参数没配好。

这一章，我们先打好基础。把视频编码的原理、WebRTC支持的编码器、以及核心参数讲清楚。后面再深入调优，你才不会懵。

1.1 视频编码到底在做什么？

视频编码，本质上就是「压缩」。

你想啊，一帧1080p的画面，原始数据有多大？1920×1080×3字节 ≈ 6MB。30帧每秒，就是180MB/s。这带宽谁扛得住？

编码器干的事，就是利用人眼的视觉特性，把冗余信息去掉。主要靠两招：

空间冗余：同一帧里，相邻像素颜色差不多。用变换、量化、熵编码来压缩。
时间冗余：相邻帧之间，大部分内容没变。只传变化的部分，也就是运动估计+残差编码。

我刚开始做视频开发时，总觉得编码就是个黑盒子。直到有一次排查花屏问题，才发现是I帧间隔设得太长，丢包后解码器一直等不到关键帧。嗯，从那以后，我对编码原理再也不敢马虎了。

核心概念速记

I帧（关键帧）：完整的画面，解码起点。体积大，但能随机访问。
P帧（预测帧）：只记录与前一帧的差异。体积小，但依赖前序帧。
B帧（双向预测帧）：参考前后两帧。压缩率最高，但延迟大。WebRTC实时通信中基本不用。

1.2 WebRTC 支持的编码器

WebRTC 原生支持四种编码器：VP8、VP9、H.264、H.265。不过，不同浏览器、不同平台的支持情况不太一样。

我整理了一张表，方便你对照：

编码器	Chrome	Firefox	Safari	Edge	移动端（iOS/Android）
VP8	✅ 原生	✅ 原生	❌ 不支持	✅ 原生	✅ 大部分支持
VP9	✅ 原生	✅ 原生	❌ 不支持	✅ 原生	⚠️ 部分支持
H.264	✅ 原生	✅ 原生	✅ 原生	✅ 原生	✅ 硬件编码支持好
H.265 (HEVC)	⚠️ 实验性	❌ 不支持	✅ 原生	⚠️ 部分支持	⚠️ 部分硬件支持

我的建议：如果你做的是通用型产品，优先选 H.264。硬件编码支持最广，兼容性最好。VP8/VP9 在 Chrome 生态里表现不错，但 Safari 用户就尴尬了。H.265 虽然压缩率更高，但专利授权和浏览器支持都是坑，我建议先观望。

1.3 各编码器的特点对比

光知道支持情况还不够，你得了解每个编码器的脾气。

VP8：WebRTC 的「老黄牛」。成熟、稳定、专利免费。压缩率一般，但编码速度快。适合低延迟场景。
VP9：Google 的亲儿子。压缩率比 VP8 提升 30%-50%。但编码复杂度高，移动端软编码发热严重。我曾在低端手机上试过 VP9 编码，手机直接烫得拿不住。
H.264：行业标准。硬件编码几乎全覆盖，编码速度快，画质稳定。缺点是有专利授权费用，但 WebRTC 里用基本不用担心。
H.265：H.264 的继任者。压缩率再提升 30%-40%。但专利问题更复杂，浏览器支持参差不齐。目前主要用于 iOS 生态和部分硬件编码场景。

避坑指南：我曾经在一个跨平台项目中，默认用了 VP9 编码。结果 Safari 用户全部黑屏，排查了半天才发现是编码器协商失败。后来我改成优先 H.264，降级到 VP8，问题才解决。记住：编码器协商失败时，WebRTC 不会自动降级，你得自己处理 SDP 协商逻辑。

1.4 编码参数概览

编码参数，就是你和编码器沟通的语言。你告诉它「我要多清晰」、「我要多快」、「我要多稳」。下面是我认为最重要的几个参数：

参数	作用	典型值	注意事项
分辨率	画面尺寸	640×480, 1280×720, 1920×1080	分辨率越高，码率需求越大
帧率	每秒画面数	15, 24, 30	帧率越高，运动越流畅，但码率也高
码率	每秒数据量	500kbps, 1Mbps, 2Mbps	码率是质量和带宽的平衡点
码率控制模式	编码器如何分配码率	CBR, VBR, CRF	WebRTC 推荐 CBR 或 VBR
关键帧间隔	多久生成一个 I 帧	2-5 秒	太短浪费带宽，太长影响丢包恢复
CPU 使用率	编码复杂度	realtime, good, best	移动端建议用 realtime

你可能会问：「这么多参数，我该从哪个开始调？」

我个人习惯是：先定分辨率和帧率，再根据网络状况调码率。码率控制模式选 CBR（恒定码率），因为 WebRTC 的带宽估计模块就是基于 CBR 设计的。关键帧间隔设 2-3 秒，既能快速恢复丢包，又不会太浪费带宽。

1.5 编码参数设置示例

光说不练假把式。下面是一个实际的编码参数设置代码，我用的是 WebRTC 的 RTCRtpSender 的 setParameters 方法：

const sender = peerConnection.getSenders().find(s => s.track.kind === 'video');

const parameters = sender.getParameters();

// 设置编码参数
parameters.encodings[0] = {
  rid: 'high',
  active: true,
  maxBitrate: 1_000_000,      // 1 Mbps
  minBitrate: 300_000,        // 300 kbps
  maxFramerate: 30,
  scaleResolutionDownBy: 1.0, // 原始分辨率
  networkPriority: 'high'
};

// 应用参数
await sender.setParameters(parameters);

注意：setParameters 是异步操作，记得用 try/catch 捕获异常。我遇到过因为参数不合法导致编码器崩溃的情况，尤其是 maxBitrate 设得太低时，编码器会直接罢工。

1.6 本章知识体系

为了让你更直观地理解本章的知识结构，我画了一张图：

这张图把本章内容串起来了。左边是编码原理，中间是编码器选择，右边是参数设置。你想想看，调优的本质就是：在理解原理的基础上，选对编码器，配好参数。

好了，第一章就到这里。内容不多，但都是基础。后面每一章都会基于这些概念展开。你先把这些消化掉，我们第二章见。