WebAV

GitHub提交活动 NPM下载量

English | 中文

WebAV是一个基于WebCodecs构建的用于在Web平台上创建/编辑视频文件的SDK。

特性

跨平台：支持在Edge和Chrome浏览器以及Electron中运行。
零成本：充分利用客户端计算能力，无需服务器成本。
隐私安全：无需上传用户数据。
高性能：比ffmpeg.wasm快10到20倍。
易于扩展：对Web开发者友好，可轻松与Canvas和WebAudio集成以实现自定义功能。
体积小：约50KB（压缩并GZIP后，不包括树摇）。

兼容Chrome 102+

应用场景

批量处理音视频文件，如添加水印、配音和嵌入字幕
构建音视频相关产品，如视频编辑、直播和视频动画制作

演示

WebAV项目提供了多种快速演示体验。访问演示主页以检查您当前设备的兼容性。

注意：测试视频资源托管在GitHub页面上，因此启动演示可能需要一些网络加载时间。

以下是一些您可能感兴趣的功能演示：

包介绍

av-cliper

av-cliper是音视频数据处理的基础SDK。它提供了基本的类和函数，帮助开发者快速实现目标功能。

以下是av-cliper核心API的简要介绍：

IClip抽象了音视频素材，解析音视频、图像和字幕资源，并为其他模块提供数据。
Sprite<IClip>为素材附加空间和时间属性，允许控制素材中视频的空间位置和时间偏移，实现多素材协作、动画等功能。
Combinator可以添加多个Sprite，并根据它们的位置、图层和时间偏移合成输出为视频文件。

代码示例：为视频添加移动的半透明水印

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;`,
    ),
  ),
);
spr2.time = { offset: 0, duration: 5e6 };
spr2.setAnimation(
  {
    '0%': { x: 0, y: 0 },
    '25%': { x: 1200, y: 680 },
    '50%': { x: 1200, y: 0 },
    '75%': { x: 0, y: 680 },
    '100%': { x: 0, y: 0 },
  },
  { duration: 4e6, iterCount: 1 },
);
spr2.zIndex = 10;
spr2.opacity = 0.5;

const com = new Combinator({
  width: 1280,
  height: 720,
});

await com.addSprite(spr1);
await com.addSprite(spr2);

com.output(); // => ReadableStream

av-canvas

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

代码示例：向画布添加视频和文字

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(
      'Watermark',
      `font-size:40px; color: white; text-shadow: 2px 2px 6px red;`,
    ),
  ),
);

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

// 导出用户编辑的素材为视频
// (await avCvs.createCombinator()).output()

// 从画布捕获流（MediaStream）用于直播或录制视频
// avCvs.captureStream()

av-recorder

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

代码示例：录制摄像头和麦克风，输出 MP4 文件流

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

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