【Web 流媒体三部曲之一】直播、点播与 WebRTC 是什么？

小小前端--可笑可笑2026-06-03 12:40

系列： Web 端流媒体入门（共 3 篇）

本篇： 一. 概念科普 二. 数据链路图解 三. 声网 Web SDK 上手

适用： 要在浏览器里做直播/连麦的前端开发者

范围： 仅 Web（getUserMedia + 声网 Web SDK）

摘要

很多前端同学会把「直播推流」「观众看直播」「刷短视频点播」当成一回事。本文用生活化比喻讲清流媒体是什么、Web 上 RTC 与点播有何不同，并单独说明 H.264（视频）与 AAC/Opus（音频） 怎么压缩、I/P 帧是什么、和 encoderConfig 怎么配，再汇总 MediaStream 与声网频道术语。

关键词： WebRTC、H.264、AAC、流媒体、getUserMedia、声网

30 秒结论

摄像头不会自己变成直播流。 在 Web 上，完整路径是：

  1. 浏览器 navigator.mediaDevices.getUserMedia() 拿到原始音视频；
  2. RTC SDK（如声网 Web SDK agora-rtc-sdk-ng）编码（视频常见 H.264，音频常见 AAC 或 Opus）；
  3. 主播 client.publish() 推到媒体服务器；
  4. 观众 subscribe 后通过 remoteTrack.play(容器) 渲染画面（SDK 会在容器内挂载 <video>）。

一句话：浏览器采集 → SDK 编码传输 → 服务器转发 → 观众播放。

一、流媒体 vs 下载：自来水 vs 桶装水

流媒体（Streaming） 的特点是：内容边产生、边传输、边播放，不必等整个文件下载完。

方式 体验 生活比喻
下载后播放 先下完再点开 桶装水：货到才能喝
流媒体 打开就能看/听 自来水：拧开水龙头就有

流媒体还有三个常见特征：连续性 （一直有新数据）、实时性 （延迟可控）、可互动（连麦、弹幕）。

延伸阅读：流媒体技术科普（知乎专栏）

二、Web 上三种「看视频」，别混了

初学者最容易混淆下面三种场景------技术栈和数据方向完全不同：

场景 典型技术 数据方向 要不要本机摄像头
直播推流（主播） WebRTC + 声网 Web SDK 本机 → 服务器 → 观众 ✅ 要
直播拉流（观众） 同上 服务器 → 本机播放 ❌ 不要
点播 VOD HLS / MP4 + CDN 存储 → 本机播放 ❌ 不要
  • 直播 RTC：像视频通话，强调低延迟，主播实时采集上传。
  • 点播 VOD ：像网盘看电影，视频早就存好了，播放器按分片拉取，不需要 getUserMedia。

本系列只讲 Web 实时直播（RTC） 。点播是另一套体系：Safari 可直接播 HLS，Chrome 等浏览器通常需 hls.js 等播放器 + <video>，或接入云点播 SDK。

对比 直播 RTC 点播 HLS
延迟 通常 1--3 秒 往往 5--30 秒
传输 WebRTC + SFU（媒体服务器转发，详见第②篇） HTTP + CDN
浏览器 getUserMedia + RTC SDK <video> + 分片协议

参考：MDN：Media streaming basics

三、为什么 Web 直播「看起来简单、做起来难」

在网页里开直播，至少要过四关：

  1. 安全上下文 ：getUserMedia 仅在安全上下文（HTTPS 或 localhost）可用；页面在 iframe 中时还可能受 Permissions Policy 限制。
  2. 用户授权 ：须用户主动允许摄像头/麦克风，拒绝后会抛 NotAllowedError，需单独处理 UI 提示。
  3. 设备与编解码：各浏览器支持的采集分辨率、H.264 硬编能力不同，移动端 WebView 限制更多。
  4. 网络复杂 ：NAT、弱网、丢包需 WebRTC 的 ICE/STUN/TURN 与 UDP 传输，业务侧一般交给 RTC SDK （如 agora-rtc-sdk-ng）而非手写 RTCPeerConnection 全流程。

生活比喻：在陌生城市打电话------不仅要会拨号，还要找信号、过防火墙、让对方听得清。SDK 相当于帮你包办了运营商那一层。

参考：MDN：WebRTC API

四、浏览器里的「原始水管」：MediaStream

在调用任何 RTC SDK 之前，浏览器先用标准 API 拿到设备数据：

  • MediaStream：一条多媒体流，里面可以有多条轨道。
  • MediaStreamTrack ：单条轨，要么视频、要么音频，持续输出（视频按帧率产帧，音频按采样率产 PCM 样本）。
javascript 复制代码 
let stream;
try {
  stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  });
} catch (err) {
  // 常见 err.name：NotAllowedError（用户拒绝）、NotFoundError（无设备）、NotReadableError（被占用）
  throw err;
}

const videoTrack = stream.getVideoTracks()[0];
const audioTrack = stream.getAudioTracks()[0];

// 不用时务必 stop，否则会一直占用设备（摄像头指示灯常亮）
function releaseTracks() {
  stream.getTracks().forEach((track) => track.stop());
}

可以把 MediaStream 想成一根水管，Track 是水管里的「视频支管」和「音频支管」。SDK 会在后面把这支管接上加压泵（编码）和快递网络（WebRTC）。

参考：MDN：MediaStream · MDN：getUserMedia

五、为什么要编码？H.264 与 AAC/Opus 怎么理解

5.1 先算一笔账：不编码根本传不动

原始视频太大，无法直接实时上传。以 720p、30 帧、未压缩 RGB 粗算：

复制代码 
1280 × 720 × 3 字节 × 30 帧/秒 ≈ 83 MB/s

普通家庭上行带宽通常只有几 Mbps 量级，不压缩就无法稳定直播。编码的作用就是把「巨型原始帧」变成「能在网络上实时跑的小数据包」。

5.2 编解码器 vs 容器：别和 MP4 混在一起

概念 是什么 生活比喻
编解码器（Codec） 压缩/解压音视频的算法，如 H.264、AAC 把货物压进集装箱的「打包规则」
容器（Container） 把音视频装在一起的文件格式，如 MP4、FLV 集装箱本身（.mp4 文件）

Web 实时直播走的是 WebRTC 媒体轨 ，传输的是 已编码的 H.264 / AAC（或 Opus）码流 ，不是先录成一个 .mp4 再上传。点播才常见「MP4 / HLS 分片文件 + CDN」。

5.3 H.264（视频）：前端最常打交道的格式

H.264 ，也叫 AVC（Advanced Video Coding），是目前 Web 直播里兼容性最好的视频编码之一。声网 Web SDK 创建客户端时常写：

javascript 复制代码 
AgoraRTC.createClient({ mode: 'live', codec: 'h264' });
它怎么把体积压下去？

视频本质是连续图片。H.264 不会 30 次/秒都传「完整大图」，而是混用三类帧：

帧类型 俗称 内容 比喻
I 帧 关键帧 可独立解码的完整画面 相册里的一张完整照片
P 帧 预测帧 相对前一帧的「差异」 「和上一张比，只多了举手」
B 帧 双向预测帧 参考前后帧的差异（直播里较少用） 对照前后两张找变化

背景不动、人动得少时，大量 P 帧只传变化区域 ，码率就能从几十 MB/s 降到 约 1--2 Mbps。

两个你会在文档里看到的词
  • GOP（Group of Pictures） ：从上一个 I 帧到下一个 I 帧之间的一组帧。GOP 越长，压缩率往往越高，但seek / 丢包恢复可能更慢。
  • 关键帧间隔 ：多久强制出一个 I 帧。直播里 SDK 会按场景自动调节，前端一般只配分辨率、帧率、码率（bitrate）。
Web 直播里 H.264 的常用参数
参数 含义 720p 直播常见值
分辨率 宽 × 高 1280 × 720
帧率（fps） 每秒帧数 30
码率（bitrate） 每秒视频数据量 约 800--2500 kbps

码率不是越大越好：上行带宽不够时会卡；太大浪费流量，太小则糊。弱网时 SDK 可能自动降码率（自适应）。

和 H.265 / AV1 的关系： H.265（HEVC）、AV1 压缩率更高，但 Web 端硬解与互通性不如 H.264 普遍；声网 Web 互动直播默认仍以 H.264 为主，入门先掌握 H.264 即可。

参考：H.264（维基百科） · MDN：Codec 概念

5.4 AAC 与 Opus（音频）：听清比看清更省带宽

格式 特点 Web 直播里
AAC 成熟、兼容好，常见于 RTMP/直播链路 声网 Web SDK 音频轨默认常用 AAC（如 48 kHz）
Opus 低码率下音质好，WebRTC 原生更偏爱 部分纯 WebRTC 场景或厂商配置会使用

音频原始 PCM 也比视频小得多，但仍要压缩。直播常见：

  • 采样率 48 kHz（每秒采样 48000 次）
  • 码率 约 32--128 kbps（人声 48 kbps 左右往往够用）

和 H.264 一样，你不需要手写 AAC/Opus 编码器 ；createMicrophoneAndCameraTracks 的第一个参数就是音频 encoderConfig：

javascript 复制代码 
await AgoraRTC.createMicrophoneAndCameraTracks(
  // 音频：AAC，48kHz，码率 48kbps 量级
  { encoderConfig: { bitrate: 48, sampleRate: 48000 } },
  // 视频：H.264，720p30
  { encoderConfig: { width: 1280, height: 720, frameRate: 30, bitrate: 1500 } },
);

参考：Opus 编解码器官网

5.5 和前端工作的关系：你要配什么、不用碰什么

你要做的 你不必做的
在 SDK 里设 encoderConfig（分辨率、帧率、码率） 手写 H.264 NAL、AAC 帧封装
创建 Client 时指定 codec: 'h264' 自己实现 FFmpeg 式转码管线
根据产品要求选 720p / 1080p、横竖屏 深入 Profile/Level 的每一档差异（除非做极致优化）

一句话： H.264 负责「画面怎么变小」、AAC/Opus 负责「声音怎么变小」；Web 前端管 参数与业务 ，具体编码由 浏览器 + SDK + 硬件编解码 完成。

六、WebRTC 与声网：各管哪一段

WebRTC 是浏览器提供的实时通信能力（核心 API 如 RTCPeerConnection），负责协商编解码、建立连接，并通过 RTP/UDP 传输媒体包、配合 ICE 做 NAT 穿透。日常业务开发很少手写全套信令与 PeerConnection，而是使用 RTC SDK。

声网（Agora）Web SDK 在 WebRTC 之上封装采集、入会、推流/拉流，并由云端 SFU 媒体服务器转发，可理解为「实时音视频的运营商交换机」：

text 复制代码 
主播浏览器 --publish--> 声网 SFU --转发--> 观众浏览器

声网 Web SDK 必知术语（10 个）

以下多为声网 agora-rtc-sdk-ng 在 直播模式（mode: 'live'） 下的概念，其他 RTC 厂商命名可能不同。

术语 含义 比喻
appId 声网控制台项目的应用 ID 小区门牌号
channel / channelName 频道名，同频道用户才能互通 房间号
uid 频道内用户数字 ID（join 时传入） 座位号
token 临时入会凭证，必须由业务后端签发 临时门禁卡
host setClientRole('host')，可 publish 推流 广播站
audience setClientRole('audience')，通常只 subscribe 听众
publish client.publish([...])，发布本地轨（上行） 开始广播
subscribe client.subscribe(user, mediaType)，拉远端轨（下行） 调频收听
LocalTrack 本机 createMicrophoneAndCameraTracks 等得到的轨 自己的话筒
RemoteTrack 订阅后挂在 user.audioTrack / user.videoTrack 上 对方的声音

安全提醒： token 和 App Certificate 绝不能写死在前端或提交到 Git，必须由业务后端按用户身份动态生成。

参考：声网 Web Token 鉴权

七、本篇小结

要点 记住这一句
流媒体 边传边播，不是下完再看
Web 直播 主播：getUserMedia + publish；观众：join + 监听 user-published + subscribe
点播 HLS/MP4，与 getUserMedia 无关
编码 H.264 压画面（I/P 帧）；AAC/Opus 压声音
术语 channel = 房间，token = 后端发的门禁卡

下一篇预告

② 从 getUserMedia 到 publish：Web 直播数据链路图解 --- 用一张流水线 + 时序图串起七站数据流，并讲清「预览 ≠ 推流」等 3 个易错点。

参考文献

资料 链接
MDN 安全上下文 https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts
MDN Media streaming https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Streaming
MDN WebRTC API https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
MDN 音视频 Codec https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Codecs
MDN getUserMedia https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
H.264（维基百科） https://en.wikipedia.org/wiki/Advanced_Video_Coding
Opus 编解码器 https://opus-codec.org/
WebRTC 开源电子书 https://webrtcforthecurious.com/
声网 Web 产品概述 https://doc.shengwang.cn/doc/rtc/javascript/overview/product-overview
相关推荐
gCode Teacher 格码致知1 小时前
Javascript提高:冒泡和捕获的典型案例-由Deepseek产生
前端·javascript
蒟蒻星球住民1 小时前
web应用技术作业01
前端·javascript·firefox
Csvn1 小时前
前端团队协作
前端
道友可好1 小时前
Superpowers：给 AI 编程助手装上超能力
前端·人工智能·后端
协享科技1 小时前
Vue 3 实现抖音式卡片滑动交互：从零到完整方案
前端·vue.js·交互·ai编程·英语·自考英语
_xaboy2 小时前
开源Vue组件FormCreate通过 JSON 生成TinyVue表单
前端·vue.js·低代码·开源·json·表单设计器
ZC跨境爬虫2 小时前
跟着 MDN 学CSS day_44：响应式设计——让网页适配所有屏幕的完整指南
前端·css·ui·html·tensorflow
前端不太难2 小时前
Edge AI 时代：从数据中心到终端，算力如何无处不在？
前端·人工智能·edge
Highcharts.js2 小时前
Highcharts v13 全新时间轴标签边界格式｜让时间维度表达更智能
前端·信息可视化·时间序列·图表开发·chart·自定义标签·可视化开发
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03【AI】2026 年具身智能模型和世界模型总结04Codex 下载安装指南：Windows 和 macOS 官方版下载05【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法06裂开！ChatGPT 居然开始要手机号验证，附详细解决方法07CC-Switch 下载、安装与使用配置指南【2026.5.29】08CC-Switch & Claude 基于 Linux 服务器安装使用指南09Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用，怎么排查和修复10Codex 接入 DeepSeek API 完整配置文档