免费网站模板无需注册,android游戏开发教程,wordpress页面怎么添加背景音乐,建设银行网站怎么登陆不前言
阅读后续文章或开始使用 WebAV 处理音视频数据之前#xff0c;需要一点点背景知识。
本篇主要简单介绍音视频最基础的知识#xff0c;以及 WebCodecs 的核心 API。
视频结构
视频文件可以理解为容器包含了元数据和编码数据#xff08;压缩的音频或视频#xff09;…前言
阅读后续文章或开始使用 WebAV 处理音视频数据之前需要一点点背景知识。
本篇主要简单介绍音视频最基础的知识以及 WebCodecs 的核心 API。
视频结构
视频文件可以理解为容器包含了元数据和编码数据压缩的音频或视频 不同的容器格式有各种区别比如用不同方式组织管理元数据和编码数据。 编码格式
编码的目的是为了压缩各种编码格式就是不同的压缩算法 因为采样获取的原始数据图像、音频体积过于庞大不压缩几乎无法存储、传输
不同的编码格式有不同的压缩率、兼容性、复杂度 一般来说越新的格式压缩率越高、兼容性越差、复杂度越高 不同的业务场景点播、直播、视频会议的诉求会在这三个因素之间做权衡选择。
常见视频编码格式 H264 (AVC), 2003 H265 (HEVC), 2013 AV1, 2015
常见音频编码格式 MP3, 1991 AAC, 2000 Opus, 2012
封装容器格式
编码数据是压缩后的原始数据需要元数据来描述才能被正确解析播放 常见的元数据包括时间信息编码格式分辨率码率等等。
在 Web 平台最常见、兼容性最好的视频格式是 MP4所以后续示例程序处理的都是 MP4 文件。
MP4 封装 AVC视频编码、AAC音频编码是兼容性最优的组合
其他常见格式 FLVflv.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广告设计等各种技术研发。
