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 解决浏览器与服务器间低延迟、多路复用传输。
选型时按「点播/直播 / 实时互动 / 推流 / 自定义渲染」等需求，在上述组合中选取即可。

Web 音视频流媒体 API 全景