Web 音视频流媒体 API 全景
目录
- 概述
- [渲染入口：<video> / <audio>](#渲染入口：
- 媒体源控制：MSE
- 实时通信：WebRTC
- 底层编解码：WebCodecs
- [音频处理：Web Audio API](#音频处理：Web Audio API)
- [手动渲染：Canvas / WebGL / WebGPU](#手动渲染：Canvas / WebGL / WebGPU)
- 传输层：WebTransport
- 辅助技术与基础概念
- 技术路线选择建议
一、概述
本文梳理浏览器端与音视频流媒体相关的核心 API，从渲染入口、媒体源、编解码、传输到辅助技术，构成一张可快速查阅的「全景图」。各 API 的详细用法（如 MSE 的 MediaSource/SourceBuffer）请参阅对应专题文档。
二、渲染入口： /
所有方案的终点：浏览器内置的播放 UI 和基础控制（播放、暂停、音量等）都由它们提供。
| 能力 | 说明 |
|---|---|
| 直接播放 | 支持 MP4、WebM 等浏览器原生支持的媒体文件（src 指向 URL）。 |
| 接收流 | 可接收 srcObject 传入的 MediaStream （常用于 WebRTC），或通过 MSE 提供的 MediaSource 对象进行播放。 |
三、媒体源控制：MSE
当 src 无法满足需求时（如播放 HLS/FLV、实现清晰度无缝切换），MSE (Media Source Extensions) 提供 JavaScript 接口，动态向 <video> 喂入媒体片段。
| 项目 | 内容 |
|---|---|
| 核心概念 | MediaSource ：代表动态媒体数据源，挂载到 <video>.src。SourceBuffer ：存放音视频片段，通过 appendBuffer() 喂数据，浏览器负责解码和渲染。 |
| 典型应用 | 播放 HLS（hls.js）、FLV（flv.js）、HTTP-FLV、fMP4；实现 ABR、无缝清晰度切换、广告插入。 |
| 渲染方式 | 浏览器内置解封装 + 解码 + <video> 渲染。 |
MSE 的详细说明与示例见 Media Source Extensions (MSE) 详解。
四、实时通信：WebRTC
专为低延迟、实时互动场景设计，如视频会议、在线教育、云游戏等。
| 项目 | 内容 |
|---|---|
| 核心 API | navigator.mediaDevices.getUserMedia()：获取摄像头/麦克风流（MediaStream）。getDisplayMedia()：屏幕共享。RTCPeerConnection ：建立 P2P 连接，负责媒体传输、ICE/STUN/TURN、拥塞控制。RTCDataChannel：低延迟数据通道，传文本、文件等。 |
| 渲染方式 | 将获取的 MediaStream 赋给 <video> 或 <audio> 的 srcObject 即可渲染。 |
五、底层编解码：WebCodecs
提供对浏览器内置编解码器（如 H.264、VP8、AV1、AAC、Opus）的直接、低层级访问，用于需要精细控制编解码或操作原始帧的场景。
5.1 核心组件
| 类别 | API |
|---|---|
| 编解码器 | VideoEncoder / VideoDecoder，AudioEncoder / AudioDecoder |
| 数据对象 | EncodedVideoChunk / EncodedAudioChunk，VideoFrame / AudioData |
| 图像解码 | ImageDecoder |
5.2 典型工作流程
- 获取编码数据：从网络或文件得到压缩数据块（如解封装 MP4 得到 H.264 码流）。
- 配置与解码 ：用 VideoDecoder/AudioDecoder 配置 codec（如
codec: 'vp8'），喂入数据块。 - 处理输出 ：通过
output回调拿到 VideoFrame/AudioData，可绘制到 Canvas、送 Web Audio、做特效等。 - 编码（可选）：用 VideoEncoder/AudioEncoder 将原始帧编码为数据块，用于上传或存储。
注意：WebCodecs 不处理封装格式（如 MP4/FLV 解析），需配合解封装库（如 MP4Box.js）使用。
5.3 VideoDecoder 简要用法
javascript
const decoder = new VideoDecoder({
output: (frame) => { /* 绘制到 Canvas 等；用毕 frame.close() */ },
error: (e) => console.error(e)
});
decoder.configure({ codec: 'vp8', codedWidth: 1280, codedHeight: 720 });
decoder.decode(new EncodedVideoChunk({ type: 'key', timestamp: 0, data: encodedData }));
// 结束时：decoder.flush(); decoder.close();5.4 与 MSE 的关系
| 维度 | MSE | WebCodecs |
|---|---|---|
| 角色 | 媒体容器拼接器 | 底层编解码工具箱 |
| 职责 | 把已封装的片段（如 fMP4）喂给 <video>，由浏览器解封装+解码+渲染。 |
直接处理压缩码流与原始帧，需自行解封装与渲染。 |
| 渲染 | 浏览器 + <video> |
解码后需用 Canvas/WebGL/WebGPU 等手动渲染。 |
六、音频处理：Web Audio API
除 <audio> 外，Web Audio API 提供更灵活的音频处理管线。
| 项目 | 内容 |
|---|---|
| 核心概念 | AudioContext ：音频处理上下文。AudioNode ：音源（如 MediaElementAudioSourceNode）、效果器、音量、分析器等。AudioWorklet：在独立线程运行自定义音频处理，实现低延迟。 |
| 渲染方式 | 将音频流连接到 AudioDestinationNode 即可输出；通过 AudioWorklet 可先分析或处理再输出。 |
七、手动渲染：Canvas / WebGL / WebGPU
当需要完全自定义视频视觉效果（滤镜、转场、VR/AR）时，需用这些图形 API 绘制解码后的帧。
| API | 典型用途 |
|---|---|
| Canvas 2D | 将 VideoFrame 或 ImageBitmap 绘制到 2D 画布，适合简单图像处理。 |
| WebGL | 将视频帧作为纹理，用于 3D、全景、VR 播放器等。 |
| WebGPU | 新一代图形 API，更高性能、更低 CPU 开销，适合复杂特效与后处理。 |
与 WebCodecs 配合：VideoDecoder 输出 VideoFrame，再绘制到 Canvas/WebGL/WebGPU。
八、传输层：WebTransport
WebTransport 是浏览器端基于 HTTP/3 + QUIC (UDP) 的传输 API，是传输层管道，不处理音视频编码，只负责高效、可靠或不可靠地传字节。
| 项目 | 内容 |
|---|---|
| 目标 | 替代/补充 WebSocket，解决队头阻塞、连接迁移等；与 MSE、WebCodecs 结合可做低延迟推拉流。 |
| 核心特性 | 多路复用、无队头阻塞；可靠流 + 不可靠数据报；低延迟（1-RTT/0-RTT）、连接迁移；强制 TLS 1.3。 |
| 三种原语 | 单向流 ：createUnidirectionalStream() / incomingUnidirectionalStreams。双向流 ：createBidirectionalStream() / incomingBidirectionalStreams。数据报 ：transport.datagrams.writable / .readable。 |
| 音视频应用 | 低延迟推流（VideoEncoder + WebTransport 单向流）；低延迟播放（服务端经 WebTransport 下发，前端 WebCodecs 解码 + Canvas/WebGL 渲染）。 |
在技术栈中的位置：渲染层 （video/audio、Canvas、WebGL、WebGPU）← 媒体处理层 （WebCodecs、Web Audio）← 媒体源/控制层 （MSE）← 传输层 （WebTransport ） / 实时通信层（WebRTC）。
九、辅助技术与基础概念
| 技术 | 作用 |
|---|---|
| WebAssembly (Wasm) | 将 C/C++ 等编写的高性能编解码、加解密、滤镜编译到浏览器，弥补 JS 性能短板；常用于不支持的编解码器（如 H.265）或复杂滤镜。 |
| MediaRecorder | 录制 MediaStream，生成 WebM、MP4 等文件。 |
| 全屏 API | 让视频或播放器进入全屏，提升观看体验。 |
| 网络 API | Fetch / Streams 拉取媒体数据；WebSocket 常用于 WebRTC 信令等。 |
基础概念：编码格式（H.264、AAC、VP8...）、封装格式（MP4、FLV、TS、m3u8...）、分辨率/帧率/码率、音视频同步。
十、技术路线选择建议
| 场景 | 推荐技术组合 |
|---|---|
| 普通点播/直播 (HLS/DASH) | <video> + MSE + 播放器库（如 hls.js、video.js） |
| 实时互动（视频会议、低延迟直播） | WebRTC + <video> |
| 浏览器 → 服务器低延迟推流/数据 | WebTransport + WebCodecs |
| 自定义渲染 / 特效 / 滤镜 | WebCodecs + Canvas/WebGL/WebGPU；（可选）WebTransport 接收数据 |
| 复杂音频处理 | Web Audio API + AudioWorklet |
全景结构示意（思维导图式）
text
Web 端音视频流媒体 API 全景
├─ 1. 渲染入口：<video> / <audio>
│ ├─ 直接播放 (MP4, WebM...)
│ ├─ MediaStream (WebRTC)
│ └─ MediaSource (MSE)
│
├─ 2. 媒体源控制：MSE → 见《MSE 详解》
├─ 3. 实时通信：WebRTC (getUserMedia, RTCPeerConnection, RTCDataChannel)
├─ 4. 底层编解码：WebCodecs (VideoDecoder/Encoder, VideoFrame, AudioData)
├─ 5. 音频处理：Web Audio API (AudioContext, AudioWorklet)
├─ 6. 手动渲染：Canvas 2D / WebGL / WebGPU
├─ 7. 传输层：WebTransport (QUIC, 流与数据报)
└─ 8. 辅助：Wasm, MediaRecorder, 全屏, Fetch/Streams, WebSocket总结
- MSE 负责向
<video>分段喂已封装数据（fMP4 等），是 HLS、DASH、ABR 的常见基础。 - WebCodecs 提供编解码与原始帧，适合自定义渲染与精细控制。
- WebRTC 解决点对点实时音视频；WebTransport 解决浏览器与服务器间低延迟、多路复用传输。
- 选型时按「点播/直播 / 实时互动 / 推流 / 自定义渲染」等需求，在上述组合中选取即可。