Web 音视频原理与实践

沿着麦克风输入观察连续信号如何按固定频率取样，再被有限位深映射为可存储的整数。

理解 PCM（Pulse Code Modulation，脉冲编码调制）如何把采样、量化后的幅度编码成数字样本，再计算采样率、位深和声道数共同决定的原始音频数据量。

从一张像素网格扩展到连续帧，理解 RGB 与 YUV/YCbCr 表示，以及 4:4:4、4:2:2、4:2:0 如何减少色度数据。

计算 1080p、4K 视频和 PCM 音频的原始数据量，建立“压缩不是优化而是前提”的数量级直觉。

拆开现代编码器的共同骨架：先预测，再编码残差，经过变换、量化和熵编码得到更短码流。

用帧依赖图理解 I 帧独立编码、P 帧向前参考、B 帧双向预测，以及解码顺序为何可能不同于显示顺序。

理解一组图像如何围绕随机访问点组织，以及 GOP 长度对压缩率、启动、Seek、直播延迟和错误恢复的影响。

理解编码器如何为简单和复杂画面分配比特，以及 CBR、VBR、CRF、QP 和缓冲模型分别解决什么问题。

进入编码器输出层，理解 H.264 NAL Unit、Start Code 与长度前缀、SPS/PPS 和一帧数据的边界。

理解 MP4、WebM、Matroska 如何把多条音视频码流、时间戳、索引和元数据组织成可定位的媒体资源。

用 B 帧重排和音频连续播放理解 DTS、PTS、Time Base，以及播放器如何用主时钟决定等待、展示或丢帧。

解释一个 MP4 具备什么布局和服务条件才能尽早起播、支持 Seek，以及普通渐进下载与 fMP4 分段流的区别。

把前面的概念连成一条端到端播放管线，观察每个队列的输入输出、线程边界、缓冲目标和失败模式。

用 FFmpeg 对象关系理解打开输入、查找流、读取 Packet、send/receive 解码和 flush 的完整协议。

把解码出的任意音频格式转换为设备格式，用环形缓冲连接解码线程和实时音频回调。

理解软件解码帧的 YUV Plane、Stride 与色彩转换，以及硬件解码 Surface 通过零拷贝进入 GPU 合成器的路径。

实现以音频为主时钟的视频调度，处理早到等待、轻微漂移校正、严重迟到丢帧与 Seek 后时钟重置。

把输入、解封装、音视频解码、输出、同步和控制组织成可停止、可 Seek、可恢复的播放器状态机。

先区分容器、编解码器与浏览器 API，再用能力检测决定播放、处理和录制方案。

用程序生成的音频理解媒体元素的资源加载、播放状态、事件与浏览器自动播放限制。

并排观察页面时钟、媒体播放头与音频时钟，理解调度、展示和同步为何不能只靠 setInterval。

创建最小 Web Audio 节点图，用按钮启动振荡器，并观察 AudioContext 的 suspended/running 状态。

搭建可交互声音图，用滑杆控制响度与左右声像，并用 AudioParam 安排平滑变化。

将 AnalyserNode 插入声音图，读取时域与频域数据，并绘制实时波形和频谱。

用生成的视频流观察逐帧回调，读取 mediaTime、presentedFrames，并和页面刷新回调对照。

把生成的视频帧绘制到 Canvas，实时做亮度分级和扫描线效果，观察像素级处理的成本。

在明确点击后申请设备权限，查看 MediaStreamTrack 设置，并学习如何可靠停止采集。

录制一个程序生成的 Canvas 媒体流，收集数据块并生成可回放、可下载的 WebM 文件。

创建并检查 VideoFrame，理解 WebCodecs 为何比媒体元素更底层，以及队列背压与 close() 的重要性。