Repository files navigation

English |中文

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

VisitWebAV Pro for more advanced features. You can purchase Pro licenses or request custom outsourcing if needed, which also helps support the ongoing maintenance of this project.

• 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: 20x faster than ffmpeg.wasm. For a comparison with native performance, seeWebCodecs Performance Benchmark.
• Easy to Extend: Developer-friendly for web developers, easily integrates with Canvas and WebAudio for custom functionality.
• Small Size: Approximately 50KB (MINIFIED + GZIPPED, before tree-shaking).

Compatible with Chrome 102+

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

The WebAV project offers a variety of quick DEMO experiences. Visit theDEMO Homepage to check the compatibility of your current device, or click here to experiencePro advanced features online.

Tip: The test video resources are hosted on GitHub Pages. 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 + WebAudioDecode and Play Video

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 ofav-cliper:

• IClip is an abstraction for audio/video materials. It parses audio/video, image, and subtitle resources, and provides data for other modules.
• Sprite<IClip> attaches spatial and temporal attributes to materials, allowing you to control the spatial position and time offset of the video in the material. This enables multi-material collaboration, animation, and more.
• Combinator can add multiple Sprites and, based on their positions, layers, and time offsets, synthesize and output a video file.

import{ImgClip,MP4Clip,OffscreenSprite,renderTxt2ImgBitmap,Combinator,}from'@webav/av-cliper';constspr1=newOffscreenSprite(newMP4Clip((awaitfetch('./video/bunny.mp4')).body),);constspr2=newOffscreenSprite(newImgClip(awaitrenderTxt2ImgBitmap('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;constcom=newCombinator({width:1280,height:720,});awaitcom.addSprite(spr1);awaitcom.addSprite(spr2);com.output();// => ReadableStream

av-canvas relies on the basic capabilities ofav-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.

import{ImgClip,MP4Clip,VisibleSprite,renderTxt2ImgBitmap,}from'@webav/av-cliper';import{AVCanvas}from'@webav/av-canvas';constavCvs=newAVCanvas(document.querySelector('#app'),{width:1280,height:720,});constspr1=newVisibleSprite(newMP4Clip((awaitfetch('./video/bunny.mp4')).body),);constspr2=newVisibleSprite(newImgClip(awaitrenderTxt2ImgBitmap('Watermark',`font-size:40px; color: white; text-shadow: 2px 2px 6px red;`,),),);awaitavCvs.add(spr1);awaitavCvs.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 recordsMediaStream and outputs the video file stream in MP4 format.

import{AVRecorder}from'@webav/av-recorder';constmediaStream=awaitnavigator.mediaDevices.getUserMedia({video:true,audio:true,});constrecorder=newAVRecorder(mediaStream);recorder.start();// => ReadableStream

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

1. Clone the current project locally
2. Executepnpm install && pnpm build in the root directory
3. Change directory todoc-site and runpnpm 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

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

Paypal.me

We would like to thank our GitHub sponsors who support the development of WebAV:

Your support helps us continue to improve and maintain this project!