网站内页是什么企业网站优化方案案例
前言
阅读后续文章或开始使用 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广告设计等各种技术研发。
