# WebCodecs 开启 Web 音视频新篇章

你可以先略过下面的无聊文字，体验一番 WebCodecs 的实力 (opens new window)

# WebCodecs 是什么

  • WebCodecs 是一个 Web 规范，21 年 9 月份在 Chrome 94 中实现
  • WebCodecs 提供访问编解码能力的接口，可精细控制音视频数据

# Web 音视频 API 存在什么问题

音视频技术在 Web 平台上的应用非常广泛，已有许多 Web API 间接调用了编解码器来实现特定功能：

  • 视频播放：MSE、HTMLMediaElement
  • 音频解码：WebAudio
  • 录制视频：MediaRecorder
  • 实时流媒体：WebRTC

但没有方法可以灵活配置或直接访问编解码器，所以许多应用使用 JS 或 WASM （比如 ffmpeg.wasm）来实现编解码功能，尽管存在诸多缺陷或限制：

  • 低性能（WebCodecs 编码速度可达到 ffmpeg.wasm 的 20 倍）
  • 高功耗
  • 额外网络开销（下载已内置的编解码器）

这么做的原因是以前的 Web API 在特定场景都存在难以克服的障碍：

  • WebAudio 只能解码完整的音频文件，但不支持数据流、不提供解码进度信息、更不支持编码
  • MediaRecorder 只能录制特定格式（WebM、MP4）的视频，无法控制编码速度、输出缓冲区等
  • WebRTC 与 MediaStream API 高度耦合，且不透明，仅能用于实时音视频通信
  • Video 标签、MSE 最常用于视频播放，但无法控制解码速率、缓冲区长度，且只支持播放部分视频容器格式

总结：目前 API 在特定场景做到简单、够用，但无法实现高效且精细地控制

# WebCodecs 设计目标

  • 流式传输：对远程、磁盘资源进行流式输入输出
  • 效率：充分利用设备硬件，在 Worker 中运行
  • 组合性：与其他 Web API(如 Streams、WebTransport 和 WebAssembly)配合良好
  • 可恢复性：在出现问题时能够恢复的能力(网络不足、资源缺乏导致的帧下降等)
  • 灵活性：能适应各种场景(硬实时、软实时、非实时)，能在此之上实现类似 MSE 或 WebRTC 的功能
  • 对称性：编码和解码具有相似的模式

# 非 WebCodecs 目标

  • 视频容器 封装/解封装 相关 API
  • 在 JS 或 WASM 中实现编解码器

以上总结于 译 WebCodecs 说明，让大家快速了解 WebCodecs API 的背景和目标

# WebCodecs 能做什么

# WebCodecs API 介绍

先了解 WebCodecs API 在视频生产消费链路所处的位置

由图可知 WebCodecs API 提供的能力：

  • 控制编解码过程
  • 访问编解码前后的底层数据

  • VideoFrame、EncodedVideoChunk 对应编码前的源图像和编码后的压缩数据，两者均提供获取底层二进制数据的接口；
  • VideoEncoder、VideoDecoder 用于前两者的类型转换
  • Web 平台所有表达图像相关的类型，都可以转换为 VideoFrame
  • 这里可以看到编码、解码过程在 API 设计上的对称性
  • 图像编解码习得的知识，同样可以对称迁移到音频编解码

以上就是 WebCodecs 提供的核心 API，新增 API 的数量非常少，主要难点在音视频相关的背景知识。

利用 mp4box.js 解封装 mp4 文件，得到 EncodedVideoChunk 后给 WebCodecs 解码，即可实现 mp4 -> 图像帧。
demuxing

# WebCodecs 不涉及环节

音视频生产消费链路中，由其他 Web API 提供，包括：

  • 音视频数据的采集与渲染
  • 封装/解封装
  • 传输、存储

# 相关 Web API

基于底层 API 可以构建的基础能力

basic-api

  • WebAudio：音频处理
  • WebGPU/WebGL + OffscreenCanvas：离屏图像处理
  • OPFS：本地文件读写
  • WebWorker + WASM：密集型计算
  • WebTransport：低延迟网络传输

基于 Web 平台已有的能力，加上 WebCodecs 提供的编解码能力，能帮助开发者实现那些功能呢？

# DEMO 演示及实现

WebCodecs 是相对底层 API，简单功能可能也需要写非常多的辅助代码，可以借助 WebAV 封装的工具函数来快速实现功能

WebAV (opens new window) 基于 WebCodecs，提供简单易用的 API 在浏览器中处理音视频数据

接下来演示 DEMO 效果以及基于 WebAV 的代码实现

1. 可控解码
以设备最快的速度解码一个 20s 的视频，并将视频帧绘制到 Canvas 上
可控解码的意义不只是它能实现超快速或逐帧播放视频，而在于它能快速遍历所有帧，这是视频处理的基础

首先从 WebAV 导出一个 MP4Clip 对象，它只需要一个 MP4 文件 URL 进行初始化
然后使用 tick 方法获取到视频帧，再绘制到 canvas 上
while true 表示不做任何等待，所以到底有多快取决于网络下载和设备解码的速度

import { MP4Clip } from '@webav/av-cliper';

// 传入一个 mp4 文件流即可初始化
const clip = new MP4Clip((await fetch('<mp4 url>')).body);
await clip.ready;

let time = 0;
// 最快速度渲染视频所有帧
while (true) {
  const { state, video: videoFrame } = await clip.tick(time);
  if (state === 'done') break;
  if (videoFrame != null && state === 'success') {
    ctx.clearRect(0, 0, cvs.width, cvs.height);
    // 绘制到 Canvas
    ctx.drawImage(
      videoFrame,
      0,
      0,
      videoFrame.codedWidth,
      videoFrame.codedHeight
    );
    // 注意，用完立即 close
    videoFrame.close();
  }
  // 时间单位是 微秒，所以差不多每秒取 30 帧，丢掉多余的帧
  time += 33000;
}
clip.destroy();

2. 添加水印
给视频添加随时间移动的半透明文字水印

先把文字转换成图片，这样很容易借助 css 实现各种文字效果；
然后控制图片按照一定规则移动，这里省略了动画的配置；
动画配置方法跟 css 的动画几乎是一样的，只需提供 0%，50% 特定时机的坐标就行了，WebAV 会自动计算出中间状态的坐标值，来实现动画效果；
最后将 MP4Clip 跟 ImgClip 合成输出一个新的视频流

const spr1 = new OffscreenSprite(new MP4Clip((await fetch('<mp4 url>')).body));

const spr2 = new OffscreenSprite(new ImgClip('水印'));
spr2.setAnimation(/* animation config */);

const com = new Combinator();

await com.add(spr1, { main: true });
await com.add(spr2, { offset: 0 });
// com.ouput() => 输出视频流

3. 绿幕抠图
带绿幕的数字人形象与背景图片合成视频，使用 WebGL 对每帧图像进行处理，将人物背景修改为透明效果
抠图实现参考文章：WebGL Chromakey 实时绿幕抠图

// 创建抠图工具函数
const chromakey = createChromakey(/* 绿幕抠图配置 */);
// 背景绿幕的测试视频
const clip = new MP4Clip((await fetch('<mp4 url>')).body);
// MP4 的每一帧 都会经过 tickInterceptor
clip.tickInterceptor = async (_, tickRet) => {
  if (tickRet.video == null) return tickRet;
  return {
    ...tickRet,
    // 抠图之后再返回
    video: await chromakey(tickRet.video),
  };
};

4. 花影
在浏览器中运行的视频录制工具，可用于视频课程制作、直播推流工作台
视频演示视频课程制作的基本操作，包含 “添加摄像头、分享屏幕、修改素材层级、剪切视频片段、预览导出视频” 五个步骤

# WebCodecs 的应用场景

应用场景预测

  • 视频生产
    • 视频剪辑、直播工作台，搭配多人协同、AI 能力
  • 视频消费
    • 播放器、视频会议、云游戏
  • 算力转移
    • 视频压缩、缩略图生成、植入水印、调整速率

# 视频生产：从零到一

由于缺失编码能力，导致 Web 端少有视频生产工具；
现有的 Web 视频剪辑工具都强依赖服务端能力支持，交互体验存在优化空间；

在 Web 页面借助 Canvas 制作动画是非常简单的，借助 WebCodecs 的编码能力，现在就能将动画快速保存为视频。

视频裁剪、添加水印、内嵌字幕等基础视频剪辑能力，没有 WebCodecs 都是难以实现的，WebCodecs 将填补该领域的空白。

# 视频消费：能力增强

借助 HTMLMediaElement、MSE，Web 平台的视频消费应用已经非常成熟；
以上 API 虽然简单易用，但无法控制细节，常有美中不足之感

比如，缓冲延迟控制、逐帧播放、超快速播放、解码控制等

WebCodecs 将支持构建更强、体验更好的视频消费应用

# 算力转移：成本体验双赢

目前 Web 使用的音视频服务，其处理过程都是在服务器上完成的

比如，众多在线视频处理工具提供的：压缩（降低分辨率、码率）、水印、变速、预览图 功能

处理流程：用户上传视频 -> 服务器处理 -> 用户下载视频；
整个过程消耗了服务器的计算成本、带宽成本，用户上传下载的等待时间

WebCodecs 能让更多的任务在本地运行，不仅降低了服务运营成本，还能提升用户体验

# 案例分享

没有 WebCodecs 以上的工具已经存在了，为什么相信它们会应用 WebCodecs？

首先，有了 WebCodecs 之后这些工具能做到体验更好、更便宜、迭代更快；
再结合以往经验和 Web 平台所具备优势，相信 WebCodecs 未来会得到广泛应用

分享两个例子

1. 用户视频消费行为变化

  1. 荒芜 时代
    用户行为：下载电影然后离线观看，装机必备本地视频播放器
  2. Flash 时代
    用户行为：在线观看视频逐渐流行
  3. HTML5 时代
    用户行为：PC 平台 Web 在线观看成为首选
  4. WebCodecs 时代
    补齐音视频编解码能力
    用户行为：期待 WebCodecs 配合 AI 加多人协同，音视频剪辑、视频会议、直播推流等工具将逐渐 Web 化

2. 富文本编辑
Web 开放了几个核心 API，让大部分文字编辑转移到线上，产生大量优秀的知识管理应用
借助 Web 的易访问性、搭配协同编辑，将生产沟通效率提升了一个等级

  • contenteditable：可编辑节点
  • Selection：选区
  • Range：文档片段

还有大量产品案例：Notion、Figma、VSCode...

总结：一旦 Web 平台具备某个领域的基础能力，相关产品不可避免的 Web 化

# WebCodecs 的优势与限制

# 优势

# 性能

vs ffmpeg.wasm
ffmpeg.wasm 最大的障碍就是性能问题，导致难以大规模应用，主要是因为它不能使用硬件加速所以编解码非常慢
测试简单的视频编码场景，WebCodecs 的性能是 ffmpeg.wasm 的 20 倍

# Web 平台

Web 平台天然具有的优势：跨平台、便捷性、迭代效率
再加上底层能力越来越完善，已具备构建大型、专业软件的条件；
相信 WebCodecs 也能凭借 Web 平台的加持，获得更大的应用空间

# 限制

  • 生态不成熟
    • 比如 缺少优秀的 封装/解封装 工具包，支持容器格式有限
  • 兼容性
    • 旧版本浏览器不支持 WebCodecs
  • 受限于浏览器提供的编解码器
    • 编解码的可控参数不够丰富（为了通用性不可避免的交换）
    • 暂无法自定义编解码器

生态不成熟只需要时间和更多开发者的积极参与，一般 to B 产品对兼容性会更宽容一些，to C 的产品可以降级到服务端实现
比较麻烦的是 Web 平台提供的编解码器相对 Native 直接调用来说，还是有一些差距
如果需要自定义编解码器，或对编解码器的参数配置有非常高的要求，技术方案选择的时候需要慎重考虑 WebCodecs

# 愿景

  • WebCodecs 成为 Web 平台音视频处理的基础；
  • WebCodecs 像 HTML5 一样，促进音视频在 Web 平台的应用和发展。

# 附录

💗 博主正处于裸辞待业状态，欢迎 商务合作 💗

相关文章

WebAV SDK（Web 视频编辑）V1 发布

前言 WebAV 是基于 WebCodecs 构建的 SDK，用于在 Web 平台上创建/编辑视频文件。 V1 对项目来说是里程碑版本，意味着 API 已经稳定，且功能的稳定性也经过了长时间的考验，可用于生产环境。 我在 20 年加入 B 站，开始接触 Web 音视频相关的知识（Web 播放器）， WebCodecs API 在 21 年发布； 我预期 WebCode ...

纯 Web 视频剪辑

前言 WebCodecs API 为 Web 平台提供了音视频编解码能力，使得在 Web 平台（网页、Electron）上实现高效、专业的视频剪辑成品成为可能。 读者可阅读笔者的入门系列文章获取更详细的信息，或直接使用 WebAV 开源项目在浏览器中创建/编辑音视频文件。 背景 & 方案 为了解决主播投稿场景中，需要对直播视频进行简单编辑的诉求， ...

Google IO 分享 WebCodecs、OPFS 文字版

背景 2024 北京 Google I/O 邀请我参加合作者开发者论坛，主题是 "Build powerful Web App"； 笔者近期在公司项目中实践 WebCodecs，对应的开源项目是 WebAV，在 Web 音视频领域算是相对前沿的探索； 本文主要分享基于 WebCodecs、OPFS 实现的视频剪辑产品，探讨这些 API 还有哪些应用场景； W ...

WebCodecs 性能表现及优化思路

笔者开源 WebAV 已经一年半，还写了系列文章帮助初学者入门 Web 音视频。 之前一直隐隐担心在 Web 平台处理音视频与 Native APP 会有明显性能差距，因为 WebCodecs API 毕竟被浏览器代理了一层，且一些数据处理需要 js 配合，不确定有多大的性能损耗。 相信刚接触 WebCodecs 的读者也非常关心它的性能表现如何。 ...

WebCodecs 编码字符串（codec）介绍

笔者的 Web 音视频系列文章 视频播放经常会看到这样的字符串 video/mp4; codecs="avc1.4d002a"，WebCodecs 编解码器初始化也需要配置 codec 参数，本文尝试简单介绍编码字符串含义。 视频编码分许多种类，每个种类还分多个版本，不同种类、版本对应的编解码算法、支持的能力（分辨率上限、色深等等）不同 ...

【译】WebCodecs 说明

本文翻译至 WebCodecs Explainer 问题与动机 已有许多 Web API 在内部使用媒体编解码器来支持特定用途，比如: HTMLMediaElement and Media Source Extensions WebAudio (decodeAudioData) MediaRecorder WebRTC 但是还没有一种通用的方式来灵活 ...

Web 音视频（六）图像素材处理

Web 音视频目录 前序章节介绍了如何在浏览器中解析、创建视频，以及给视频添加一些自定义素材（图片、音频、文字...）； 本章介绍如何给图像素材加特效、加动画，实现转场、移动水印、图像滤镜美化等功能。 你可以跳过原理介绍，直接查看 WebAV 示例 素材动画 在视频制作中实现动画跟其他场景略有不同，因为视频 ...

Web 音视频（七）中期回顾

Web 音视频目录 个人回顾 本系列更新至今，持续了一个月时间，内容可以总结为音频、视频数据的 解析 - 处理 - 合成，在浏览器中比较粗粒度地实现音视频编辑的主要环节，差不多是把 WebAV 项目的原理讲完了。 讲解的知识非常浅，目标读者是准备在 Web 平台进行音视频开发的新手； 这是我第一次进行高频率技术写作，将一 ...

Web 音视频（五）在浏览器中合成视频

Web 音视频目录 经过前序章节的介绍，读者能大致了解如何在播放器中解析、创建视频； 本章介绍何在浏览器中合成视频，这是视频编辑中最基础的功能。 你可以跳过原理介绍，直接查看 WebAV 合成视频示例 在视频上叠加素材 常见的素材有：视频、音频、图片、文字 [在浏览器中创建视频](/posts/2 ...

Web 音视频（四）在浏览器中处理音频

Web 音视频目录 为什么单独介绍音频处理? 网络上缺乏音频处理的资料，绝大多数示例都是针对视频而略过音频，很多人在网上寻找音频处理的示例 对前端开发者来说，音频处理相对视频略微复杂一些 所以，本文专门针对音频数据，汇总讲解采集-处理-编码-封装全过程，帮助初学者入门。 ![audio-data-flow](./audio ...

WebCodecs 是什么
Web 音视频 API 存在什么问题
WebCodecs 设计目标
非 WebCodecs 目标
WebCodecs 能做什么
WebCodecs API 介绍
相关 Web API
DEMO 演示及实现
WebCodecs 的应用场景
视频生产：从零到一
视频消费：能力增强
算力转移：成本体验双赢
案例分享
WebCodecs 的优势与限制
优势
限制
愿景
附录