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