Web 音视频（一）基础知识

前言

阅读后续文章或开始使用 WebAV 处理音视频数据之前，需要一点点背景知识。

本篇主要简单介绍音视频最基础的知识，以及 WebCodecs 的核心 API。

视频结构

视频文件可以理解为容器包含了元数据和编码数据（压缩的音频或视频）；
不同的容器格式有各种区别，比如用不同方式组织管理元数据和编码数据。

编码格式

编码的目的是为了压缩，各种编码格式就是不同的压缩算法；
因为采样获取的原始数据（图像、音频）体积过于庞大，不压缩几乎无法存储、传输；

不同的编码格式有不同的压缩率、兼容性、复杂度；
一般来说越新的格式压缩率越高、兼容性越差、复杂度越高；
不同的业务场景（点播、直播、视频会议）的诉求会在这三个因素之间做权衡选择。

常见视频编码格式

• H264 (AVC), 2003

• H265 (HEVC), 2013

• AV1, 2015

常见音频编码格式

• MP3, 1991

• AAC, 2000

• Opus, 2012

封装（容器）格式

编码数据是压缩后的原始数据，需要元数据来描述才能被正确解析播放；
常见的元数据包括：时间信息，编码格式，分辨率，码率等等。

在 Web 平台最常见、兼容性最好的视频格式是 MP4，所以后续示例程序处理的都是 MP4 文件。

MP4 封装 AVC（视频编码）、AAC（音频编码）是兼容性最优的组合

其他常见格式

• FLV，flv.js 主要是将 FLV 转封装成 fMP4，使得浏览器能播放 FLV 格式的视频

• WebM，免费， MediaRecorder 输出的就是 WebM 格式

WebCodecs 核心 API

由上图可知，WebCodecs 工作在编解码阶段，不涉及封装、解封装

上图节点与 API 的对应关系
视频

• 原始图像数据：[VideoFrame]

• 图像编码器：[VideoEncoder]

• 压缩图像数据：[EncodedVideoChunk]

• 图像解码器：[VideoDecoder]

数据转换关系：
VideoFrame -> VideoEncoder => EncodedVideoChunk -> VideoDecoder => VideoFrame

音频

• 原始音频数据：[AudioData]

• 音频编码器：[AudioEncoder]

• 压图音频数据：[EncodedAudioChunk]

• 音频解码器：[AudioDecoder]

音频数据转换跟视频对称

编解码、音视频这种对称易于理解掌握，这也是 WebCodecs 目标之一。

Symmetry: have similar patterns for encoding and decoding

WebCodecs API 注意事项

记录新手容易碰到的陷阱

• VideoFrame 可能占用大量显存，及时 close 避免影响性能

• VideoDecoder 维护了队列，其输出（output）的 VideoFrame 需要及时 close 否则它将暂停输出 VideoFrame

• 要及时检查 [encodeQueueSize] ， 编码器若来不及处理则需要暂停生产新的 VideoFrame

• 编解码器使用完后需要主动 close，比如 [VideoEncoder.close]，否则可能阻塞其他编解码器正常工作

关于优联前端

        武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。承接Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。