自学内容网 自学内容网

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广告设计等各种技术研发。

 


原文地址:https://blog.csdn.net/ufrontend/article/details/145257581

免责声明:本站文章内容转载自网络资源,如侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!