如何使用Webcodec的VideoEncode API编码MP4文件

Question

我正在尝试制作一个工具，使用Webcodec的VideoEncoder API在本地压缩/转换提交的视频文件。 问题是编码后输出的视频只有不到一秒的时间，并且充满噪声（无图像）。 我使用 Vanilagy 的 MP4 Muxer 进行多路复用。这是我的代码：

async function main() {
    const videoFile = files[0];
    const arrayBuffer = await readFileAsArrayBuffer(videoFile);

    let muxer = new Muxer({
      target: new ArrayBufferTarget(),
      video: {
        codec: "avc",
        width: 1280,
        height: 720,
      },
      fastStart: "in-memory",
      firstTimestampBehavior: "offset",
    });

    const frame = new VideoFrame(arrayBuffer, {
      format: "I420",
      codedWidth: 1280,
      codedHeight: 720,
      timestamp: 0,
      duration: 0,
    });

    let encoder = new VideoEncoder({
      output: (chunk, meta) => muxer.addVideoChunk(chunk, meta),
      error: (e) => console.error(e),
    });

    encoder.configure({
      codec: "avc1.64001f",
      width: 1280,
      height: 720,
      bitrate: 2_000_000, // 2 Mbps
      framerate: 25,
    });

    encoder.encode(frame, { keyFrame: true });

    frame.close();

    await encoder.flush();
    muxer.finalize();

    let { buffer } = muxer.target;

    downloadBlob(new Blob([buffer]));
  }

链接到 REPL，以便您可以测试它

我尝试了不同的视频编解码器，甚至从 HTML Video 元素导入视频，但随后我只获得了视频的一些帧，而不是完整长度。

我已经看过这个帖子但也找不到解决方案。

Answer 1

如本示例使用 WebCodecs 进行视频处理中所述，视频帧的有效输入源是：

• 画布
• 图像位图
• 媒体流轨道

要实现所需的结果，您可以将输入视频的每个单独帧绘制到画布上，然后可以将其作为

VideoFrame

对象的第一个参数进行引用。