WebAV

English | 中文

WebAV is an SDK for creating/editing video files on the web platform, built on WebCodecs.

Key Features

• Cross-platform: Runs on Edge, Chrome browsers, and Electron
• High performance: 10-20 times faster than ffmpeg.wasm
• Small size: Approximately 50kb (MINIFIED + GZIPPED, without tree-shaking)
• Cost Reduction: By utilizing client-side computation entirely, server costs are reduced.

Compatible with Chrome 102+

Use Cases

• Batch audio and video file processing, such as adding watermarks, dubbing, and embedding subtitles
• Building audio and video related products, such as video editing, live streaming, and video animation production

DEMO

The WebAV project offers a variety of quick DEMO experiences. Visit the DEMO Homepage to check the compatibility of your current device.

Note: The test video resources are hosted on GitHub pages, so starting a DEMO may require some network loading time.

Here are some feature demos you might be interested in:

• Video Concatenation
• Video Editing
• Live Recording
• WebAV + Canvas + WebAudio Decode and Play Video

Packages Introduction

av-cliper

av-cliper is the foundational SDK for audio and video data processing. It provides basic classes and functions to help developers quickly achieve their target functionalities.

Here is a brief introduction to the core API of av-cliper:

• IClip abstracts audio and video materials, parses audio and video, image, and subtitle resources, and provides data to other modules.
• Sprite<IClip> attaches spatial and temporal attributes to materials, allowing control over the spatial position and time offset of the video in the material, achieving multi-material collaboration, animation, and other functions.
• Combinator can add multiple Sprites, and based on their positions, layers, and time offsets, synthesize and output as a video file.

Code Demo: Add a Moving Semi-transparent Watermark to a Video

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(
      'Watermark',
      `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 relies on the basic capabilities of av-cliper and provides a canvas that responds to user operations on Sprites (dragging, scaling, rotating), enabling quick implementation of products like video editing and live streaming workstations.

Code Demo: Add Video and Text to the Canvas

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);

// Export user-edited materials into a video
// (await avCvs.createCombinator()).output()

// Capture stream from the canvas (MediaStream) for live streaming or video recording
// avCvs.captureStream()

av-recorder

av-recorder records MediaStream and outputs the video file stream in MP4 format.

Code Demo: Record Camera and Microphone, Output MP4 File Stream

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

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

Contributing

Running the Project

1. Clone the current project locally
2. Execute pnpm install && pnpm build in the root directory
3. Change directory to the specific package (e.g., av-cliper) and run pnpm dev
4. The path is the filename in the DEMO directory, such as concat-media.html
5. Open the DEMO URL in the browser, such as http://localhost:6066/concat-media.html
6. Run unit tests for the package with pnpm test

Running the WebAV Site

1. Clone the current project locally
2. Execute pnpm install && pnpm build in the root directory
3. Change directory to doc-site and run pnpm dev
4. Follow the terminal prompts to visit the specified URL

If you are a beginner in the field of web audio and video, you can start by learning the basics:

Articles by the Author
Web Audio and Video Knowledge Graph

Sponsor Author

If this project has been helpful to you, please sponsor the author to a milk tea ：）

Paypal.me