Webcodecs音视频编解码与封装技术探索
1.背景
在web端处理音视频是一个复杂而又重要的课题，市场上主流的视频编辑通常采用服务端进行渲染导出，因为专用的服务器对音视频的编解码能力更强，所以服务端渲染导出的速度很不错；
少数编辑器在浏览器本地对视频进行处理，一方面对服务器成本非常友好，另一方面可以不需要注册等流程，在小型视频的渲染上用户体验更好。但是浏览器本地渲染对用户设备有一定要求，对浏览器的兼容性等等也有要求。
而经典的在浏览器本地处理视频的方案是通过ffmpeg.wasm，近些年Webcodecs API的出现与普及逐渐改变了这一现象。
ffmpeg.wasm的底层webassembly对ffmpeg多线程处理视频的兼容很差，GPU调用效果也不尽人如意，导致渲染视频的速度非常不理想，并且还要额外下载编解码器，整体使用体验存在很多不适。
而WebCodecs API可以利用浏览器自带的FFmpeg，而且可以充分利用GPU，所以其执行效率是远高于webassembly的。
（该图取自Bilibili团队实验[1]）
1.1功能对比
| 特性/功能 | ffmpeg.wasm | WebCodecs |
|---|---|---|
| 目标 | 在浏览器中实现音视频处理 | 提供底层音视频操作API |
| 技术基础 | 基于WebAssembly技术 | 基于现代Web浏览器API |
| 跨平台兼容性 | 跨平台兼容性较好 | 跨平台兼容性一般 |
| 应用场景 | 实时视频预览、截图、教育与教程、社交媒体、数据分析 | 实时通信、视频编辑、自适应流媒体、机器学习 |
| 操作层级 | 提供简单的JavaScript API，方便集成到Web应用 | 更深入地控制媒体流，实现高效、低延迟的实时通信或视频编辑 |
| 前端集成难度 | 提供了简单的JavaScript API，集成相对容易 | 需要一定的音视频处理知识，集成难度可能稍高 |
2.WebCodecs 介绍
如果要问WebCodecs是什么，可以简单的概括为JavaScript赋予了通过浏览器底层对视频流的单个帧和音频数据块的底层访问能力的一项web技术。
简单地说，就是设置一个解码器，将视频编码字节块处理为视频帧/音频数据，或者反之，设置一个编码器，将视频帧/音频数据处理回编码字节块。
上文所说的WebCodecs API的解码器有：
| 名称 | 介绍 |
|---|---|
| AudioDecoder | 解码 EncodedAudioChunk 对象 |
| VideoDecoder | 解码 EncodedVideoChunk 对象 |
上表中EncodedAudioChunk和EncodedVideoChunk就是上文提到的编码字节块。
上文所说的WebCodecs API的编码器有：
| 名称 | 介绍 |
|---|---|
| AudioEncoder | 编码 AudioData 对象 |
| VideoEncoder | 编码 VideoFrame 对象 |
上表中AudioData和VideoFrame就是上文提到的视频帧/音频数据。
请注意，WebCodecs API并不提供对某一视频类型具体的编解码器，解码视频时&#x
