澄清关于 WebCodecs 的误解
此页面澄清了围绕 WebCodecs 主题的一些常见误解。
🌐 This page clears up some common misconceptions surrounding the topic of WebCodecs.
WebCodecs 与 WebAssembly 无关
🌐 WebCodecs has nothing to do with WebAssembly
也许这种混淆产生是因为两个 API 都以“Web”开头,或者因为多媒体操作属于低级操作。或者是因为 FFmpeg 用手写汇编编写他们的代码,或者因为ffmpeg.wasm作为一个库存在。
🌐 Maybe this confusion comes up because both APIs start with ‘Web’, or from the fact that multimedia operations are low-level.
Or it’s because FFmpeg writes their code in handwritten assembly, or because ffmpeg.wasm as a library exists.
事实是:WebCodecs 与 WebAssembly 毫无关系!
🌐 Fact is: WebCodecs has nothing to do with WebAssembly!
WebAssembly 用于将用原生语言编写的代码移植到网络上,但所有针对硬件的特定优化都会被去除,因此它不适合多媒体。
🌐 WebAssembly is used to bring over code written in native languages to the web, but all the hardware-specific optimizations are stripped, so it's not suitable for multimedia.
WebCodecs 是一个 API,它提供用于多媒体的快速、优化的例程,并且直接内置在浏览器中——这就是为什么不需要用 WebAssembly 编译它们的原因。
🌐 WebCodecs is an API that exposes fast, optimized routines for multimedia and it is built directly into the browser - that's why it’s not necessary to compile them with WebAssembly.
奖金困惑:手写汇编与WebAssembly不同
例如,如果FFmpeg为armv9指令集编写快速汇编代码,则无法使用,因为WebAssembly代码在浏览器中运行,因此必须支持所有CPU架构,这意味着只能使用CPU指令的公共部分。
armv9 的优化在将 FFmpeg 编译为 WebAssembly 时将被完全移除。
可以将 WebAssembly 当作与 x86、ARM 等一样的另一个编译目标,而不是将其与汇编语言联系起来。
🌐 The optimizations for armv9 will be entirely removed when FFmpeg is compiled to WebAssembly.
Think of WebAssembly as another compilation target alongside x86, ARM etc., rather than associating it with Assembly languages.
WebCodecs 与 WebGPU 无关
🌐 WebCodecs has nothing to do with WebGPU
这种混淆可能是因为视频解码和编码可以使用 GPU。
🌐 Probably this confusion is because video decoding and encoding can use the GPU.
但 WebGPU 是浏览器中一个特定 API 的名称,主要用于图形或机器学习任务。
🌐 But WebGPU is the name of a specific API inside the browser that is mostly used for graphics or machine learning tasks.
视频的 GPU 加速是在非常底层实现的。
在 macOS 上,它内置于操作系统中,并且硅片已被专门设计以实现快速多媒体操作。在 Nvidia 显卡上,硬件编码器已经内置在芯片本身中。
🌐 GPU acceleration for video is implemented on a very low level.
On macOS, it is built into the operating system and the silicon has been designed specifically to enable fast multimedia routines. On Nvidia cards, the hardware encoder is already built into the chip itself.
所以,幸运的是,我们不必使用 WebGPU 来自己制作解码器和编码器! 相反,我们只需要一个接口来使用已经存在的解码器和编码器,而这个接口就是 WebCodecs。
🌐 So, fortunately we don’t have to use WebGPU to make our own decoders and encoders!
Rather, we just need an interface to make use of the already existing ones, and that interface is WebCodecs.
Details
奖金的困惑:GPU 的使用频率比你想象的要低
对于视频编码,通常更偏向使用 CPU,因为它可以带来更好的压缩效果。使用 GPU 编码,你要么得到更大的文件,要么视频质量更差。不过,它更快!Details
细则:WebCodecs 和 WebGPU 之间是互通的
你可以将用 WebCodecs 提取的帧导入到 WebGPU 纹理中。所以 WebCodecs 和 WebGPU 在某种程度上是相关的,只是并不是大多数人想象的那种方式。JavaScript 可能比 WebAssembly 更快
🌐 JavaScript can be faster than WebAssembly
当 JavaScript 这么慢的语言时,一个用 JavaScript 编写的多媒体库怎么可能快? 我们为什么不用 WebAssembly 来解决 JavaScript 的慢速问题?
🌐 How can a multimedia library written in JavaScript possibly be fast, when JavaScript is such a slow language?
Why are we not using WebAssembly to work around the slowness of JavaScript?
它之所以有效,是因为 JavaScript 只处理廉价的操作,而 WebCodecs 负责计算开销大的部分。
🌐 It works because JavaScript only deals with the cheap operations, and WebCodecs takes care of the computationally expensive parts.
像 Mediabunny 这样的库主要从文件中读取和写入数据(解复用和复用),但耗费资源的部分是媒体数据的解压和压缩(解码和编码)。
🌐 A library like Mediabunny mainly reads and writes data from a file (demuxing and muxing), but the expensive parts are decompressing and compressing the media data (decoding and encoding).
一个不使用 WebCodecs 并使用编译为 WebAssembly 的代码进行解码和编码的多媒体库,无法利用计算机上可能实现的许多硬件特定优化,例如使用 CPU 特定指令或使用 GPU。
🌐 A multimedia library that does not use WebCodecs and uses code compiled to WebAssembly to decode and encode cannot take advantage of many of the hardware-specific optimizations that are possible on a computer, for example using CPU-specific instructions, or using the GPU.
WebCodecs 不能在 React Native 或 Node.js 上使用
🌐 WebCodecs cannot be used on React Native or Node.js
至少目前,WebCodecs 是一个仅在网页浏览器中可用的 API。我们尝试查看 Chromium 的 C++ WebCodecs 实现是否可以轻松提取为一个模块,然后在其他环境中使用,但它与 Chromium 的其他代码紧密相连。
🌐 At least for now, WebCodecs is an API that is only available in web browsers.
We tried to see if the C++ WebCodecs implementation of Chromium can be easily extracted into a module that may then be used in other contexts, but it is heavily connected to other Chromium code.
在网页浏览器之外使用 WebCodecs 可能并不那么有趣——在这些情况下,你已经可以本地使用 FFmpeg 并发挥其全部性能。
🌐 Using WebCodecs outside of the web browser is probably not so interesting anyways – in these contexts you already can natively use FFmpeg with its full performance.
WebCodecs 在底层使用 FFmpeg 吗?
🌐 Does WebCodecs use FFmpeg under the hood?
一些浏览器在底层使用了 libavcodec 库,它是 FFmpeg 的一部分。
整个事情还有更多细节。查看 Vanilagy 的这条推文以获取深入的解释!
🌐 Some browsers use the libavcodec library, which is part of FFmpeg, under the hood.
The whole story has more nuances to it. Check out this tweet by Vanilagy for an in-depth explanation!