阶段 1 · 信号数字化基础22 分钟
原始媒体有多大:为什么必须压缩?
Bandwidth、Storage、Frame Size 与实时吞吐
计算 1080p、4K 视频和 PCM 音频的原始数据量,建立“压缩不是优化而是前提”的数量级直觉。
LEARNING GOALS
先明确本课目标
1
计算原始视频帧大小
2
从帧大小推导带宽与存储
3
理解压缩比的数量级
MENTAL MODEL · 再建立心智模型
原始媒体像每秒搬运几十到几百张未压缩大图再加多路采样表;编码器的首要任务是把重复信息变成更短的描述。
MINIMAL EXAMPLE
4K60 真的需要多大内存带宽?
原始视频吞吐由每帧有效字节数乘帧率得到。4:2:0 8-bit 平均每像素约 1.5 字节,但实际缓冲还可能因为 stride 对齐更大。
javascriptconst pixels = 3840 * 2160;
const bytesPerFrame = pixels * 1.5; // 8-bit YUV420
const bytesPerSecond = bytesPerFrame * 60;
const gibPerSecond = bytesPerSecond / (1024 ** 3);- 计算像素总数 4K UHD 一帧包含约 829 万亮度像素。
- 套用像素格式 YUV420 8-bit 平均每像素约 1.5 字节。
- 乘以帧率 60 帧每秒让持续吞吐接近 0.7 GiB/s。
即使不编码,单次读取 4K60 帧就已接近每秒 0.7 GiB;多次拷贝会成倍放大压力。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开,不打断主线实验。
展开⌄
音视频原理Raw Video尚未经过视频编码压缩的像素帧序列,数据量由分辨率、格式与帧率直接决定。音视频原理Compression Ratio原始数据大小与压缩后数据大小的比值,用来表达编码减少数据量的程度。音视频原理Bitrate单位时间内传输或保存的比特数,可指平均、瞬时或峰值码率。音视频原理Audio Bitrate音频每秒传输或保存的比特数;未压缩 PCM 码率等于采样率×单样本位数×声道数,压缩音频则由编码器决定。音视频原理Resolution图像或视频帧在宽、高方向包含的像素数量,例如 1920×1080;它描述采样网格大小,不直接等同于清晰度。音视频原理Raw Audio尚未经过有损或无损 Codec 压缩的音频样本序列,通常以 PCM 及其采样率、格式和声道布局描述。音视频原理Bandwidth单位时间内链路或内存系统可搬运的数据上限;原始媒体数据率超过它时就无法实时传输或处理。音视频原理Frame Size单个未压缩视频帧占用的字节数,由分辨率、像素格式、位深和各平面步长共同决定。音视频原理Throughput系统实际每秒完成的数据处理或传输量;它受 CPU、GPU、内存、存储和网络中最慢环节限制。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
输入目标时长和磁盘容量,反推可接受的平均编码码率。
回到原理,解释刚才发生了什么
先用结果建立反馈,再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
视频数据量是乘法增长
宽 × 高 × 每像素字节 × FPS。分辨率边长翻倍会让像素数约变四倍,再提高帧率会继续线性扩大。
目标码率反推出压缩比
如果 1080p60 4:2:0 原始流约 1.5 Gbps,而交付码率是 6 Mbps,整体压缩比超过 250:1。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后,再用完整映射处理跨平台或跨 API 迁移。
展开⌄
Web 和原生都受内存带宽约束,原生只是更容易看到每一次帧拷贝。
WebGL
播放器必须规划 Packet、Frame、GPU Surface 与音频环形缓冲的数量和所有权。
WebGPU
浏览器尽量隐藏解码表面和拷贝;Canvas 像素读回会突然暴露巨大的数据成本。
性能问题先数清每帧字节数和拷贝次数,再讨论函数级优化。