WebAV
WebAV copied to clipboard
Process audio/video data in the browser using WebCodecs. 基于 WebCodecs 在浏览器中处理音视频数据。
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
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 runpnpm 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 :)