目录
按顺序读下去,会从模型原理一路走到 Agent 与 Harness 的工程视角。
- 01 第一章|数字音视频基础:面向前端工程师的音视频入门心智模型 导读 从采样率、位深、声道、PCM、帧率、分辨率、像素格式、码率、编码和容器开始,建立前端工程师理解音视频的第一层心智模型。
- 02 第二章|容器格式 vs 编码格式:MP4、WebM、H.264、AAC 到底是什么关系 系统区分容器格式、编码格式、封装、解封装、裸流、MIME type 和 codec string,解释为什么文件后缀不能决定浏览器是否能播放。
- 03 第三章|MP4 内部结构:从 box/atom、moov、mdat 到 stbl 采样表 拆解 MP4 的 box/atom 树、ftyp、moov、mdat、trak、stbl、fast start 和 fragmented MP4,并写一个浏览器端最小 MP4 box parser。
- 04 第四章|MP3 内部结构:Frame、ID3、CBR/VBR 从 ID3v2、MPEG Audio Frame、frame header、bitrate、sample rate、CBR/VBR 和 Xing/VBRI 入手,理解 MP3 文件结构与时长、seek 的工程问题。
- 05 第五章|编解码基础:压缩到底在压什么 从 codec、PCM、RGB/YUV、有损压缩、心理声学、帧内压缩、帧间压缩、I/P/B 帧、GOP 和码率控制出发,建立音视频编解码的基础心智模型。
- 06 第六章|Muxing / Demuxing / Remuxing / Transcoding:音视频合成与处理流程 串联 demux、decode、process、encode、mux 的完整媒体处理链路,区分 remux 与 transcode,并解释 PTS、DTS、timebase、duration 和 WebCodecs 的工程边界。
- 07 第七章|WebCodecs API 入门 从 VideoFrame、AudioData、EncodedVideoChunk、EncodedAudioChunk、VideoDecoder、VideoEncoder、AudioDecoder 和 AudioEncoder 入手,理解 WebCodecs 在浏览器音视频 pipeline 中的 codec 层位置与工程边界。
- 08 第八章|WebCodecs 视频处理实战:浏览器端视频处理 Pipeline 把用户上传 MP4、demux、VideoDecoder、Canvas/WebGL/WebGPU 逐帧处理、VideoEncoder、mux 输出串成完整浏览器端视频处理链路,并解释 WebCodecs 与容器、Muxer、MSE 的边界。
- 09 第九章|Web Audio API 基础 从 AudioContext、AudioNode graph、AudioBuffer、AudioBufferSourceNode、MediaElementAudioSourceNode、GainNode、BiquadFilterNode、AnalyserNode、AudioWorklet 和 OfflineAudioContext 入手,建立浏览器音频处理的基础心智模型。
- 10 第十章|Web Audio 实战:浏览器端音频处理与混音 实现浏览器端多轨音频编辑器 MVP:上传解码、时间线调度、音量控制、淡入淡出、变速、归一化、波形频谱、静音检测、离线混音和 WAV 导出。
- 11 第十一章|音视频同步:时间戳、同步与播放控制 围绕 timestamp、duration、PTS、DTS、timebase、timescale、sampleRate、frameRate、A/V sync、seek 和 WebCodecs timestamp 传递,建立浏览器音视频处理中的时间线心智模型。
- 12 第十二章|浏览器音视频工程化:性能、内存、Worker 与兼容性 把 WebCodecs 和 Web Audio Demo 升级成项目级浏览器音视频处理系统,系统梳理主线程与 Worker 拆分、ArrayBuffer transfer、VideoFrame 和 AudioData 生命周期、背压、大文件分片、WASM 边界与兼容性 fallback。
- 13 第十三章|基础专题一:像素、颜色与原始帧 从像素、颜色分量、位深、RGB/RGBA、YUV420P、NV12、stride、颜色参数和 VideoFrame 生命周期入手,建立未压缩视频帧的底层心智模型。
- 14 第十三章|基础专题二:压缩所需的数学基础 用信息熵、预测、残差、DCT、量化、熵编码、率失真优化、PSNR、SSIM 和 VMAF 串起音视频压缩所需的数学基础。
- 15 第十三章|基础专题三:JPEG 底层原理 沿着 RGB 到 YCbCr、色度下采样、8x8 DCT、量化、Zig-Zag、RLE、Huffman、marker segment 和浏览器解码管线理解 JPEG。
- 16 第十三章|基础专题四:PNG 底层原理 从 PNG Signature、Chunk、扫描线、Filter、zlib、DEFLATE、Alpha、颜色管理、Canvas 和 WebCodecs ImageDecoder 理解 PNG 的无损压缩链路。
- 17 第十三章|基础专题五:视频编码共性 从 I/P/B 图像、GOP、帧内预测、帧间预测、运动估计、残差、变换、量化、熵编码、参考帧和 DPB 理解块式视频编码共同框架。
- 18 第十三章|基础专题六:H.264 码流与解码器 从 Annex B、NAL Unit、RBSP、SPS、PPS、Slice Header、Exp-Golomb、宏块、CAVLC/CABAC、DPB 和 WebCodecs 解码流程理解 H.264。
- 19 第十四章|项目二:WebCodecs 视频抽帧与水印 实现浏览器端视频处理主链路:MP4 demux、EncodedVideoChunk、VideoDecoder、VideoFrame、Canvas/OffscreenCanvas 抽帧与水印、VideoEncoder 重新编码、mux 输出与 Worker 化工程边界。