WebAV

English | 中文

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

Features

Cross-platform: Supports running on Edge and Chrome browsers, as well as in Electron.
Zero Cost: Fully utilizes client-side computation, eliminating server costs.
Privacy and Security: No user data is uploaded.
High Performance: 10 to 20 times faster than ffmpeg.wasm.
Easy to Extend: Developer-friendly for web developers, easily integrates with Canvas and WebAudio for custom functionality.
Small Size: Approximately 50KB (MINIFIED + GZIPPED, without tree-shaking).

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

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

Running the WebAV Site

Clone the current project locally
Execute pnpm install && pnpm build in the root directory
Change directory to doc-site and run pnpm dev
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

bilibili/WebAV