Webcodecs音视频编解码与封装技术探索

avatar
作者
筋斗云
阅读量:0

1.背景

在web端处理音视频是一个复杂而又重要的课题,市场上主流的视频编辑通常采用服务端进行渲染导出,因为专用的服务器对音视频的编解码能力更强,所以服务端渲染导出的速度很不错;

少数编辑器在浏览器本地对视频进行处理,一方面对服务器成本非常友好,另一方面可以不需要注册等流程,在小型视频的渲染上用户体验更好。但是浏览器本地渲染对用户设备有一定要求,对浏览器的兼容性等等也有要求。

而经典的在浏览器本地处理视频的方案是通过ffmpeg.wasm,近些年Webcodecs API的出现与普及逐渐改变了这一现象。

ffmpeg.wasm的底层webassembly对ffmpeg多线程处理视频的兼容很差,GPU调用效果也不尽人如意,导致渲染视频的速度非常不理想,并且还要额外下载编解码器,整体使用体验存在很多不适。

WebCodecs API可以利用浏览器自带的FFmpeg,而且可以充分利用GPU,所以其执行效率是远高于webassembly的。

f5230228c08da71c1ca7e453dd829ed6.jpeg(该图取自Bilibili团队实验[1])

1.1功能对比

特性/功能ffmpeg.wasmWebCodecs
目标在浏览器中实现音视频处理提供底层音视频操作API
技术基础基于WebAssembly技术基于现代Web浏览器API
跨平台兼容性跨平台兼容性较好跨平台兼容性一般
应用场景实时视频预览、截图、教育与教程、社交媒体、数据分析实时通信、视频编辑、自适应流媒体、机器学习
操作层级提供简单的JavaScript API,方便集成到Web应用更深入地控制媒体流,实现高效、低延迟的实时通信或视频编辑
前端集成难度提供了简单的JavaScript API,集成相对容易需要一定的音视频处理知识,集成难度可能稍高

2.WebCodecs 介绍


如果要问WebCodecs是什么,可以简单的概括为JavaScript赋予了通过浏览器底层对视频流的单个帧和音频数据块的底层访问能力的一项web技术。

简单地说,就是设置一个解码器,将视频编码字节块处理为视频帧/音频数据,或者反之,设置一个编码器,将视频帧/音频数据处理回编码字节块。

上文所说的WebCodecs API的解码器有:

名称介绍
AudioDecoder解码 EncodedAudioChunk 对象
VideoDecoder解码 EncodedVideoChunk 对象

上表中EncodedAudioChunkEncodedVideoChunk就是上文提到的编码字节块。

上文所说的WebCodecs API的编码器有:

名称介绍
AudioEncoder编码 AudioData 对象
VideoEncoder编码 VideoFrame 对象

上表中AudioDataVideoFrame就是上文提到的视频帧/音频数据

请注意,WebCodecs API并不提供对某一视频类型具体的编解码器,解码视频时&#x

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!