前端工程师狂喜！WebAV：B站开源的浏览器端视频编辑神器，一款前端SDK

今天和大家介绍一款用于视频编辑的开源项目—WebAV。这是 B 站推出的开源 SDK，基于 WebCodecs 技术，旨在让用户可以直接在浏览器中创建和编辑视频文件。

我们往往需要通过复杂的软件和专业设备来实现高性能的视频编辑，而 WebAV 的出现可以说颠覆了这个观念：只需要一个浏览器，就能轻松实现视频的在线处理！

WebAV 模块功能

av-cliper

av-cliper 是负责WebAV音视频数据处理的基础 SDK，它提供了一些基础 class 或 function 帮助开发者快速实现目标功能。

核心 API 有：

• • IClip：是音视频素材的抽象，解析音视频、图片、字幕资源，给其他模块提供数据
• • Sprite<IClip> ：给素材附加空间、时间属性，用于控制素材中视频的空间位置、时间偏移，实现多素材协作、动画等功能
• • Combinator：能添加多个 Sprite，根据它们位置、层级、时间偏移等信息，合成输出为视频文件

DEMO 给视频添加一个移动的半透明水印（部分代码）：

import {
  ImgClip,
  MP4Clip,
  OffscreenSprite,
  renderTxt2ImgBitmap,
  Combinator,
} from '@webav/av-cliper';

const spr1 = new OffscreenSprite(
  new MP4Clip((await fetch('./video/bunny.mp4')).body),
);
const spr2 = new OffscreenSprite(
  new ImgClip(
    await renderTxt2ImgBitmap(
      '水印',
      `font-size:40px; color: white; text-shadow: 2px 2px 6px red;`,
    ),
  ),
);
...

av-canvas

av-canvas 依赖 av-cliper 的基础能力，提供一个画布响应用户对 Sprite 的操作（拖拽、缩放、旋转），用于快速实现视频剪辑、直播推流工作台等产品。

DEMO 向画布中添加视频与文字（部分代码）：

import {
  ImgClip,
  MP4Clip,
  VisibleSprite,
  renderTxt2ImgBitmap,
} from '@webav/av-cliper';
import { AVCanvas } from '@webav/av-canvas';

const avCvs = new AVCanvas(document.querySelector('#app'), {
  width: 1280,
  height: 720,
});

const spr1 = new VisibleSprite(
  new MP4Clip((await fetch('./video/bunny.mp4')).body),
);
const spr2 = new VisibleSprite(
  new ImgClip(
    await renderTxt2ImgBitmap(
      '水印',
      `font-size:40px; color: white; text-shadow: 2px 2px 6px red;`,
    ),
  ),
);

await avCvs.add(spr1);
await avCvs.add(spr2);

av-recorder

av-recorder 录制 MediaStream 输出 MP4 格式的视频文件流。

DEMO 录制摄像头、麦克风，输出 MP4 文件流（部分代码）：

import { AVRecorder } from '@webav/av-recorder';
const mediaStream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true,
});

const recorder = new AVRecorder(recodeMS);
recorder.start(); // => ReadableStream

WebAV的五大优势

1. 跨平台支持

WebAV 支持在 Edge、Chrome 浏览器以及 Electron 中运行，这意味着无论用户使用 Windows、Mac 还是 Linux，都能通过浏览器轻松访问和使用这一视频编辑工具。相比需要额外安装的软件，WebAV显然为用户提供了更便捷、无缝的体验，真正实现了跨平台的编辑自由。

2. 零成本，无需服务器支持

传统视频编辑通常需要借助服务器来分担计算压力，而 WebAV 则完全依赖 客户端计算，不涉及任何服务器操作，这也意味着开发者和用户可以节省一大笔服务器费用。特别是对于那些小型开发者或个人创作者，这无疑是一个福音！

3. 隐私安全

WebAV 的架构设计特别注重用户的 隐私。所有处理过程都在本地浏览器中完成，用户的数据不会被上传到任何服务器。对于一些注重隐私的用户和企业而言，这样的本地计算模式无疑更值得信赖，确保了数据的安全性。

4. 高性能

在性能方面，WebAV 借助 WebCodecs 实现了令人惊叹的表现，官方数据表明它的性能是 ffmpeg.wasm 的 20 倍，并且几乎接近原生的计算效率。浏览器视频编辑的性能瓶颈终于得到了突破，即便是处理较大的视频文件，也能流畅运行。

5. 易扩展

对于 Web 开发者来说，WebAV 的扩展性非常友好。它能够无缝集成 Canvas 和 WebAudio，这意味着开发者可以自定义开发功能，比如添加滤镜、配音、插入图像或字幕等。开发者可以根据需要创建出个性化的视频编辑产品，为用户提供独特的编辑体验。

主要应用场景

1. 批量音视频文件处理 WebAV 适合对大批量的音视频文件进行批量处理，尤其是在涉及 水印、配音、字幕等操作时显得得心应手。这对于短视频创作者、广告制作公司等需求量大的群体来说，是极为理想的解决方案。

2. 构建音视频相关产品 WebAV 的强大性能和扩展性，使它成为构建音视频产品的绝佳选择。无论是开发视频剪辑工具、直播推流软件，还是制作视频动画，都可以通过 WebAV 实现。特别是一些创业公司或个人开发者，可以通过 WebAV 更低成本、更快地搭建起一个视频编辑应用。

WebAV的未来发展潜力

WebAV 是由 B 站开源的项目，背后拥有强大的技术支持和社区资源，未来可以期待更多功能扩展和更新。在 Web 技术日益发达的今天，WebAV 也为浏览器端的视频编辑树立了新标杆。随着 WebCodecs 的发展和普及，WebAV 的应用场景和性能或许会更上一层楼。

结语

WebAV 让我们看到了浏览器端视频编辑的未来可能性，特别是它的跨平台、隐私安全、高性能、易扩展性等特点，都使其成为视频编辑领域的创新之选。对于个人开发者、小型团队，甚至是企业级应用，WebAV 不仅提供了经济高效的选择，还让视频编辑的门槛大幅降低，能够助力更多人实现视频创作梦想。

对于想要尝试视频编辑的开发者，不妨在 WebAV 上大胆实验一番。或许，未来的视频编辑应用就是从这一开源项目开始萌芽的。

开源地址：https://github.com/bilibili/WebAV

指导文档：https://bilibili.github.io/WebAV/