Labs简介音视频编解码是服务端和客户端都比较成熟的技术。然而，如何在Web浏览器上，不依赖于服务器，快速实现音视频编解码，实现音视频内容制作，自定义视频播放器等功能，一直是一个难以解决的行业痛点。1FFmpegFFmpeg是一套开源计算机程序，可用于记录、转换数字音频和视频，并将其转换为流。采用LGPL或GPL许可证。它为录制、转换和流式传输音频和视频提供了完整的解决方案。它包括libavcodec，一个非常先进的音频/视频编解码器库。FFmpeg具有非常强大的功能，包括视频采集功能、视频格式转换、视频采集、给视频加水印等。目前业界大部分音视频编解码能力的底层都是使用FFmpeg进行二次封装。FFmpeg是在Linux平台下开发的，用C语言编写，可以在各种操作系统环境下编译运行，包括Linux、Windows、MacOSX等。如何让FFmpeg运行在浏览器中Javascript运行时一直是个难题Web开发人员的难题。2“官方”WebAssemblyWebAssembly是由主流浏览器厂商组成的W3C社区组制定的新规范。它是一种低级类汇编语言，具有紧凑的二进制格式，可以以接近本机的性能运行，并为C/C++等语言提供编译目标，以便它们可以在Web上运行。它还被设计为与JavaScript共存，允许两者一起工作。WebAssembly的出现，似乎已经成为了FFmpeg的官方配置。WebAssembly+FFmpeg的组合出现在越来越多的Web应用程序中，用于在Web浏览器上进行轻量级和快速的音视频处理。使用Emscripten编译器，C/C++项目（或任何其他语言的项目）可以用LLVM编译，编译成Javascript文件或WASM，并在浏览器、Node.js或wasm运行时上运行。3应用实践《超级编辑部》中的“视频采集上传”和“关键帧采集”功能是基于WebAssembly+FFmpeg实现Web端的本地音视频处理。无需调用后台API，无需网络传输，实现音视频快速编辑，节省时间和网络带宽，减轻服务器压力。另外，由于FFmpeg需要进行大量的计算，为了避免计算占用浏览器的JavaScript主线程，我们使用WebWorker新开一个独立线程，异步运行FFmpeg，将计算结果推送到Javascript主线程FFmpeg计算处理完成后的线程。线程，从而提高效率并避免阻塞主线程。4WebCodecsWebAssembly+FFmpeg的方案可以解决几乎所有浏览器的编解码需求。但是这样做有一个很大的缺点，就是不能用硬件（GPU）来加速编解码过程，只能用软件（CPU）进行计算。这无疑是一种性能不足的解决方案，没有充分利用现代计算机的硬件优势。为了解决这些问题，W3CWICG工作组提出了WebCodecs提案。WebCodecsAPI提供了一个相对底层的接口，允许开发者直接访问浏览器的编码器和解码器：VideoandaudiodecodersVideoandaudioencodersRawvideoframesImagedecoders这些接口现在正式在Chrome94测试版中可用。可以通过以下方法查看浏览器是否支持：下面我们以H264的解码过程为例，展示WebCodecs对视频的解码过程：①首先，我们将回调函数和解码器参数传递给VideoDecoder构造函数创建解码器实例；②解码器初始化后，您可以开始为其提供EncodedVideoChunk对象。所以我们需要根据视频流构造一个EncodedVideoChunk对象，提供给解码器进行解码；③解码器会通过我们传入的handlerFrame回调输出解码后的数据。如果我们在开发视频播放器，获取解码后的数据：等待合适的时机，显示视频帧，通过canvas.drawImage(frame)绘制帧，一旦某个帧不再需要，调用close()到垃圾收集器在到达底层内存之前主动释放底层内存，这将减少Web应用程序使用的平均内存量。5结束语可以看出，经过越来越多的探索和标准的制定，Web浏览器上的音视频编解码已经逐渐成熟。相信通过越来越多开发者的不断探索和实践，在网络浏览器上实现原生和跨平台的视频播放器、音视频编辑工具等将成为可能。同时，WebCodecs结合WebTransport、WebGPU等一系列新的提案和API，将为Web上的音视频处理带来更多可能：①低延迟的web端直播，改善当前web端直播基于http-flv/hls的经验，WebTransport代替HTTP，WebCodecs代替MSE，相信网络直播的延迟和卡顿数据会有很大改善。②低延迟云游戏和远程桌面目前，Web上的云游戏解决方案大多采用WebRTC。WebRTC是为通话场景设计的。自带JitterBuffer，音视频同步，渲染延迟设计会引入额外的延迟，web端没有暴露。控制延迟的API，使用WebTransport+WebCodecs可以实现更可控和极低的延迟。相信未来在云游戏、远程桌面等场景下，WebTransport+WebCodecs方案会成为主流。③基于网络的视频内容制作OBS是一种常用的直播和视频录制工具。随着WebCodecs的直接编解码能力和WebTransport的浏览器流媒体能力，一个Web版OBS所需要的能力也越来越完善，我们拭目以待一个WebOBS工具的出现。④元界使用WebGPU在浏览器中渲染3D模型，配合WebCodecs对渲染帧进行编解码。元界的内容生产将有更多的想象空间。
