《WebCodecs手册：浏览器中的原生视频处理技术》

视频编码器

视频编码器会将视频帧对象转换为编码视频块对象。

其核心API大致如下：你需要定义一个回调函数，以便视频编码器能够通过该函数返回编码视频块对象。

const encoder = new VideoEncoder({
    output: function(chunk: EncodedVideoChunk, meta: any){
        // 对这些编码视频块进行相应的处理
    },
    error: function(e: any)=> console.warn(e);
});

需要注意的是，这是一个异步过程，而且不属于典型的异步流程。你不能将其视为针对每一帧进行的操作。

// 这种写法是错误的
const frame = await encoder.encode(chunk);

这是因为视频编码在底层的工作原理就是这样的。因此，你必须接受这样一个事实：输出结果是通过回调函数来传递的，只有当回调函数被调用时，你才能得到这些输出结果。

一旦你定义好了编码器，就可以根据自己的需求配置视频编码器，比如选择合适的编解码器类型，以及设置宽度、高度、帧率等参数。

encoder.configure({
    'codec': 'vp9.00.10.08.00', // 关于编解码器的配置细节我们稍后会介绍
     width: 1280,
     height: 720,
     bitrate: 1000000 // 即1 MBPS，
     framerate: 25
});

之后你就可以开始对视频帧进行编码了。在这里，我们假设已经拥有了视频帧对象，并且会将每60帧中的第1帧设置为关键帧。

for (let i=0; i < frames.length; frames++) {
    encoder.encode(frames[i], {keyFrame: i % 60 === 0});
}

视频解码器

视频解码器的功能正好与视频编码器相反，它会将编码视频块对象转换回视频帧对象。

下面是一个简化示例，展示了如何设置视频解码器。首先，从视频文件中提取编码视频块对象以及解码器配置信息；在解码时，这些配置信息是从文件中读取而来的。

import { demuxVideo } from 'webcodecs-utils';

const { chunks, config} = await demuxVideo( file);

接下来，我们通过指定一个回调函数来设置视频解码器，以便在生成视频帧对象时能够接收到这些对象，并使用之前提取的配置信息对解码器进行配置。

const decoder = new VideoDecoder({
    output: function(frame: VideoFrame){
        // 对这个视频帧进行相应的处理
    },
    error: function(e: any)=> console.warn(e);
});

decoder.configure(config)

与VideoEncoder一样，它也会通过回调函数返回帧数据。这样我们终于可以开始解码这些数据块了。

for (const chunk of chunks){
    decoder.decode(chunk);
}

整体归纳

从根本上来说，WebCodecs API主要由两种数据类型EncodedVideoChunk, VideoFrame，以及负责在这两种数据类型之间进行转换的VideoEncoder和VideoDecoder接口组成。

需要记住的是，WebCodecs API本身并不直接处理视频文件。它仅仅负责编码和解码操作，而EncodedVideoChunk对象所表示的仅仅是二进制数据而已。

读取或写入视频文件属于另外一系列技术流程，被称为“多路复用/解多路复用”。

多路复用与解多路复用

如果要向视频文件中写入数据，就需要先对视频进行“多路复用”操作；而要播放视频文件，则需要先对其进行“解多路复用”操作。这些过程都需要遵循视频容器的文件格式，对视频文件进行解析（在解多路复用的情况下），或者将编码后的视频数据放置到目标文件中的正确位置（在多路复用的情况下）。

WebCodecs API并不包含多路复用与解多路复用的功能，因此你需要使用其他专门的库来处理这些操作。

解多路复用

要在浏览器中播放视频，我们必须先对视频进行“解多路复用”，然后再对其进行解码，这个顺序是固定的。

有很多库可以用来解多路复用视频文件，比如MediaBunny或web-demuxer。为了方便讲解，我在webcodecs-utils包中编写了一个简化的封装代码，使得解多路复用操作只需两行代码即可完成：

import { demuxVideo } from 'webcodecs-utils'
const { chunks, config} = await demuxVideo(file);

需要注意的是，这种做法会将整个视频文件读入内存，因此在实际应用中并不推荐使用。不过，它对于演示WebCodecs的基本功能来说确实非常有用。

下面的代码示例会接收一个视频文件，对其进行解多路复用处理，然后将解码后的帧数据绘制到画布上。在这里，我们是通过回调函数获取帧数据，并直接在回调函数中执行绘图操作。

import { demuxVideo } from 'webcodecs-utils'

async function playFile(file: File){

    const { chunks, config} = await demuxVideo(file);
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const decoder = new VideoDecoder({
        output(frame: VideoFrame) {
            ctx.drawImage(frame, 0, 0);
            frame.close()
        },
        error(e) {}
    });

    decoder.configure(config);

    for (const chunk of chunks){
        decoder.decode(chunk)
    }

}

以下是我们用于播放实际视频的极其简化的演示版本：

如果要查看一个更为“规范”的解复用示例，那么使用MediaBunny进行解复用的过程就是这样的——你可以通过迭代的方式提取出所需的视频数据块。

import { EncodedPacketSink, Input, ALL_FORMATS, BlobSource } from 'mediabunny';

const input = new Input({
  formats: ALL_FORMATS,
  source: new BlobSource( file),
});

const videoTrack = await input.getPrimaryVideoTrack();
const sink = new EncodedPacketSink(videoTrack);

for await (const packet of sink.packets()) {
  const chunk =  packet.toEncodedVideoChunk();
}

视频的复用与编码

要创建一个视频文件，不仅需要对其进行编码（使用VideoEncoder），还需要对编码后的数据块进行复用。这意味着要将这些编码好的数据块放置在目标输出文件中的正确位置。

同样，你需要一个专门用于视频复用的库（例如MediaBunny），但为了演示 purposes，我创建了一个非常简单的封装类。在这里，我们定义了一个名为ExampleMuxer的简单工具。

import { ExampleMuxer } from 'webcodecs-utils'

const muxer = new ExampleMuxer('video');

for (const chunk of encodedChunks){
    muxer.addChunk(chunk);
}

const outputBlob = await muxer.finish();

作为一个完整的编码+复用演示示例，我们将创建一个编码器，并设置它在接收到编码数据块后立即对其进行复用处理。

const encoder = new VideoEncoder({
    output: function(chunk, meta){
        muxer.addChunk(chunk, meta);
    },
    error: function(e){}
});

encoder.configure({
    'codec': 'avc1.4d0034', // 我们稍后会详细解释这个参数
     width: 1280,
     height: 720,
     bitrate: 1000000 // 即1 MBPS，
     framerate: 25
});

接下来，我们会创建一个canvas动画效果，通过它在屏幕上显示当前的帧数，以此来证明整个系统能够正常工作。

const canvas = new OffscreenCanvas(640, 360);
const ctx = canvas.getContext('2d');
const TOTAL_FRAMES=300;
let frameNumber = 0;
let chunksMuxed = 0;
const fps = 30;


function renderFrame(){
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    ctx.font = `bold ${Math.min(canvas.width / 10, 72)}px Arial`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`当前帧数：${frameNumber}`, canvas.width / 2, canvas.height / 2);
}

最后，我们将创建编码循环，该循环会绘制当前帧，然后对其进行编码。

let flushed = false;

async function encodeLoop(){

    renderFrame();

    const frame = new VideoFrame(canvas, {timestamp: frameNumber/fps*1e6});
    encoder.encode(frame, {keyFrame: frameNumber %60 ===0});
    frame.close();

    frameNumber++;

    if(frameNumber === TOTAL_FRAMES) {
        if (!flushed) encoder.flush();
    }
    else return requestAnimationFrame(encodeLoop);
}

将所有这些步骤结合起来，你就可以将canvas动画编码成具有帧级精确度的视频文件。

你可以下载这个视频，使用任何视频检测工具来确认其中是否包含了所有的帧。

这就是WebCodecs与其他网络API之间的一个关键区别。比如MediaRecorder也可以编码视频，但它不具备帧级精确度。WebCodecs能够确保你可以控制每一帧的内容，并保证它们的一致性。

最后，使用MediaBunny进行完整的多路复用操作的示例如下：

import {
  EncodedPacket,
  EncodedVideoPacketSource,
  BufferTarget,
  Mp4OutputFormat,
  Output
} from 'mediabunny';

async function muxChunks(chunks: EncodedVideoChunk[]): Promise {

    const output = new Output({
        format: new Mp4OutputFormat(),
        target: new BufferTarget(),
    });

    const source = new EncodedVideoPacketSource('avc');
    output.addVideoTrack(source);

    await output.start();

    for (const chunk of chunks){
        source.add(EncodedPacket.fromEncodedChunk(chunk))
    }

    await output.finalize();
    const buffer =  output.target.buffer;
    return new Blob([buffer], { type: 'video/mp4' });
}

构建视频转换工具

现在我们已经了解了WebCodecs以及多路复用的基本概念，接下来我们将着手开发一个实用的应用程序——视频转换工具。使用这个工具，我们可以将mp4格式的视频转换为webm格式，同时还可以进行一些基本的操作，比如调整视频的大小或翻转视频画面。

转码

在调整视频大小或翻转画面之前，我们首先需要了解如何对视频进行解码，然后再将其编码成新的格式。这个过程就被称为“转码”。

要对视频进行转码，我们需要构建一个包含以下处理步骤的流程：

• 解复用：从视频文件中读取编码后的视频数据块

• 解码：将编码后的视频数据块转换为视频帧

• 编码：将视频帧重新编码为新的编码后的视频数据块

• 复用：将编码后的视频数据块写入新的视频文件中

我们的转码流程大致如下所示：

利用本文迄今为止介绍的所有内容，我们确实可以仅使用视频编码器和视频解码器来构建一个可正常运行的演示示例。但是，这样一来状态管理以及帧的追踪就会变得复杂且容易出错。

我们将再添加一层抽象层，即使用流API，这样我们的转码流程就会变成如下所示。这一机制与我们对于转码流程的理解完全吻合，同时也能简化很多细节，比如状态管理的问题。

const transcodePipeline = demuxerReader
    .pipeThrough(new VideoDecoderStream(videoDecoderConfig))
    .pipeThrough(new VideoEncoderStream(videoEncoderConfig))
    .pipeTo(createMuxerWriter(muxer));

await transcodePipeline;

为此，我们需要为视频解码器和视频编码器分别创建一个TransformStream对象。

class VideoDecoderStream extends TransformStream<{ chunk: EncodedVideoChunk; index: number }, { frame: VideoFrame; index: number }>> {
  constructor(config: VideoDecoderConfig) {
    let pendingIndices: number[] = [];
    super(
      {
        start(controller) {
          decoder = new VideoDecoder({
            output: (frame) => {
              const index = pendingIndices.shift()!;
              controller.enqueue({ frame, index });
            },
            error: (e) => controller.error(e),
          });

          decoder.configure(config);
        },

        async transform(item, controller) {
          pendingIndices.push(item.index);
          decoder.decode(item.chunk);
        },

        async flush(controller) {
          await decoder.flush();
          if decoder.state !== 'closed' decoder.close();
        },
      }
    );
  }
}

我不会在这里详细列出全部代码，但我已经将这些辅助函数打包到了webcodecs-utils包中，使用时可以这样导入：

import {
  SimpleDemuxer,
  VideoDecodeStream,
  VideoEncodeStream,
  SimpleMuxer,
} from "webcodecs-utils";

那么，我们用来对文件进行转码的代码最终就会变成这样：

const demuxer = new SimpleDemuxer(videoFile);
await demuxer.load();
const decoderConfig = await demuxer.getVideoDecoderConfig();

const encoderConfig = {/*我们最终会决定使用什么配置*/);

// 设置多路复用器
const muxer = new SimpleMuxer({ video: "avc" });

// 构建升级处理流程
await demuxer.videoStream()
  .pipeThrough(new VideoDecodeStream(decoderConfig))
  .pipeThrough(new VideoEncodeStreamencoderConfig))
  .pipeTo(muxer.videoSink());

// 获取最终输出结果
const blob = await muxer.finalize();

在这个演示中，为了使转码功能能够正常工作，我们将下载一个预先制作好的文件，并且会提供一个开关选项，让用户可以选择输出mp4格式的视频（使用vp9编码格式）。

我们将使用avc1.4d0034作为h264编码格式的字符串，而vp09.00.40.08.00则用于表示vp9编码格式。

下面是在CodePen上实现的简单转码演示：

视频转换操作

如果我们对视频进行翻转、裁剪、旋转或调整大小等操作，就无法仅使用纯VideoFrame对象来完成这些任务。

实现这些功能的最简单方法就是使用Canvas元素。我们可以通过2D Canvas上下文来操作原始视频帧，并将其绘制到Canvas上。

const canvas = new OffscreenCanvas(width, height);
const ctx = canvas.getContext('2d');

// 进行转换操作非常简单
ctx.drawImage(sourceFrame, 0, 0);

之后，我们可以将这个Canvas作为输出视频帧的源图像。

const outFrame = new VideoFrame(canvas, {timestamp: sourceFrame.timestamp});

如果要调整视频的大小，首先需要将Canvas的尺寸设置为所需的输出高度和宽度。

const canvas = new OffscreenCanvas(outputWidth, outputHeight);
const ctx = canvas.getContext('2d');

// 将sourceFrame调整为适合输出尺寸的大小
ctx.drawImage(sourceFrame, 0, 0, outputWidth, outputHeight);

如果想要使用2D Canvas实现水平翻转效果，可以按照以下方式操作：

ctx.scale(-1, 1);
ctx.translate(-outputWidth, 0);
ctx.drawImage(sourceFrame, 0, 0, outputWidth, outputHeight);

你可以编写一个完整的渲染函数，将上述所有转换操作整合到一起，其代码结构大致如下：

function render(videoFrame, outW, outH, flipped) {

  canvas.width = outW;
  canvas.height = outH;

  if (flipped) {
    ctx.scale(-1, 1);
    ctx.translate(-outW, 0);
  }
  ctx.drawImage(videoFrame, 0, 0, outW, outH);

}

以下是一个交互式演示，展示了这些变换效果的实际表现：

变换处理流程

为了实现这些变换效果，我们需要调整我们的处理流程，添加相应的变换步骤。该步骤会接收一个VideoFrame对象，对其应用相应的变换操作，然后返回经过处理的帧。

在`webcodecs-utils`包中，有一个专门用于实现这一功能的`VideoProcessStream`对象。该对象接受一个异步函数作为参数，这个函数会接收一个VideoFrame对象，并返回另一个VideoFrame对象：

import { VideoProcessStream} from "webcodecs-utils";
 
new VideoProcessStream(async (frame) => {
      // 对帧应用变换操作
      return processedFrame;
    }),

因此，要应用我们的变换规则，我们可以这样设置代码：

import { VideoProcessStream} from "webcodecs-utils";
 
const canvas = new OffscreenCanvas(outW, outH);
const ctx = canvas.getContext('2d');

const processStream = new VideoProcessStream(async (frame) => {
  
  if (flipped) {
    ctx.scale(-1, 1);
    ctx.translate(-outW, 0);
  }
  ctx.drawImage(frame, 0, 0, outW, outH);

  return new VideoFrame(canvas, {timestamp: frame.timestamp});
});

最终，我们的完整处理流程如下：

const demuxer = new SimpleDemuxer(videoFile);
await demuxer.load();
const decoderConfig = await demuxer.getVideoDecoderConfig();

const encoderConfig = {/*根据需要配置*/);

// 设置多路复用器
const muxer = new SimpleMuxer({ video: "avc" });

// 构建升级处理流程
await demuxer.videoStream()
  .pipeThrough(new VideoDecodeStream(decoderConfig))
  .pipeThrough(processStream) // 新添加的步骤
  .pipeThrough(new VideoEncodeStreamencoderConfig))
  .pipeTo(muxer.videoSink());

// 获取最终输出结果
const blob = await muxer.finalize();

以下是一个包含完整处理流程的实际演示视频：

完整演示

对于这个完整的工具来说，我们需要进行一些关键性的修改：

• 用户可以上传自己的视频文件。

• 我们会通过提取视频中的某帧来预览变换效果。

• 我们还会添加进度显示功能。

对于输入数据来说，处理起来非常简单：

<input type="file" onchange="handler(event)" />

async function getFirstFrame(file) {
  const video = document.createElement("video");
  video.src = URL.createObjectURL(file);
  video.muted = true;

  await new Promise((resolve) => video.addEventListener("loadeddata", resolve, { once: true }));
  video.currentTime = 0;
  await new Promise((resolve) => video.addEventListener("seeked", resolve, { once: true });

  return new VideoFrame(video, {timestamp: 0});
}

const {duration} = await demuxer.getMediaInfo();

const processStream = new VideoProcessStream(async (frame) => {
  
  if (flipped) {
    ctx.scale(-1, 1);
    ctx.translate(-outW, 0);
  }
  ctx.drawImage(frame, 0, 0, outW, outH);

   // 帧的时间戳以微秒为单位，视频时长以秒为单位
  const progress = frame.timestamp/(duration*1e6); 

  return new VideoFrame(canvas, {timestamp: frame.timestamp});

});

const codec = VideoEncoder({
    codec: 'vp9', // 这种写法是错误的！
    //...
})

const decoderConfig = await demuxer.getVideoDecoderConfig();
// decoderConfig.codec 就是视频所使用的具体编解码器字符串

import { getCodecString } from 'webcodecs-utils'

const codec_string = getCodecString('vp9', width, height, bitrate)

function getBitrate(width, height, fps, quality = 'good') {
    const pixels = width * height;

    const qualityFactors = {
      'low': 0.05,
      'good': 0.08,
      'high': 0.10,
      'very-high': 0.15
    };

    const factor = qualityFactors[quality] || qualityFactors['good'];

    // 返回以比特每秒为单位的比特率
    return pixels * fps * factor;
  }

import { getBitrate } from 'webcodecs-utils'

frame.close()

await demuxer.videoStream()
  .pipeThrough(new VideoDecodeStream(decoderConfig))
  .pipeThrough(processStream) 
  .pipeThrough(new VideoEncodeStreamencoderConfig))
  .pipeTo(muxer.videoSink());