如何使用chrome86中的网络编解码器从视频中提取帧

Question

WebCodecs在Chrome 86中发布。但目前还没有关于如何使用它的真实代码示例。给定一个视频url，如何使用网络编解码器将视频帧提取为ImageData？

Answer 1

您所描述的是从格式化文件或数据块流中获取类似位图的原始数据(例如，可以在画布上转储的数据(的整个复杂过程。

对于文件(包括URL指向完整文件的情况，例如.mp4文件(，这通常由两个步骤组成：

1. 将容器文件解析为单独的编码视频和/或音频块
2. 解码这些编码视频/音频块

WebCodecs只促进该过程的第2步，即所谓的解码。这个决定背后的原因是解析容器在计算上很琐碎，所以您已经可以使用FileAPI高效地完成这项工作，但您仍然需要自己实现解析/处理容器。

幸运的是，许多库已经存在，具有讽刺意味的是，其中许多库早在WebCodecs API出现之前就已经存在了。

---

MP4Box就是一个例子，它可以帮助您获取编码的视频和音频块，然后将其输入VideoDecoder或AudioCoder。

使用MP4Box，代码的关键部分将集中在您提供的onSamples回调上，它看起来像这样：

mp4BoxFile.onSamples = (trackId, user, chunks) =>
{
for (let i = 0; i < chunks.length; i++)
{
let chunk = chunks[i];
let encodedChunk = new EncodedVideoChunk({
// you'll need to deep-inspect chunk to figure these out
type: "key", // or "delta"
timestamp: ...
duration: ...
data: chunk.data
});
// pass encodedChunk to a VideoDecoder instance's decode method
}
};

这只是你的代码可能看起来的粗略草图，如果没有更多的检查，它可能不会工作，而且需要大量的尝试和错误，因为这是非常低级的东西。

WebCodecs并不是你所期望的灵丹妙药，但它可以帮助你构建一个。