{"id":26243439,"url":"https://github.com/webav-tech/webav","last_synced_at":"2025-05-13T21:12:51.866Z","repository":{"id":152686563,"uuid":"619823756","full_name":"WebAV-Tech/WebAV","owner":"WebAV-Tech","description":"WebAV is an SDK built on WebCodecs, designed for creating and editing video files on the web platform. WebAV 是基于 WebCodecs 构建的 SDK，用于在 Web 平台上创建/编辑视频文件。","archived":false,"fork":false,"pushed_at":"2025-04-26T12:07:10.000Z","size":205563,"stargazers_count":1581,"open_issues_count":7,"forks_count":177,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-05-06T16:19:44.094Z","etag":null,"topics":["audio","browser","canvas","media","mp4","recorder","video","web","webcodecs"],"latest_commit_sha":null,"homepage":"https://webav-tech.github.io/WebAV","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebAV-Tech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-03-27T13:53:54.000Z","updated_at":"2025-05-06T07:49:21.000Z","dependencies_parsed_at":"2023-10-26T09:29:10.434Z","dependency_job_id":"618a4083-f255-4de7-a506-1a285b53e2db","html_url":"https://github.com/WebAV-Tech/WebAV","commit_stats":null,"previous_names":["bilibili/webav","hughfenghen/webav","webav-tech/webav"],"tags_count":126,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebAV-Tech%2FWebAV","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebAV-Tech%2FWebAV/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebAV-Tech%2FWebAV/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebAV-Tech%2FWebAV/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebAV-Tech","download_url":"https://codeload.github.com/WebAV-Tech/WebAV/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254029008,"owners_count":22002284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","browser","canvas","media","mp4","recorder","video","web","webcodecs"],"created_at":"2025-03-13T10:02:41.995Z","updated_at":"2025-05-13T21:12:46.852Z","avatar_url":"https://github.com/WebAV-Tech.png","language":"TypeScript","readme":"# WebAV\n\n![GitHub commit activity](https://img.shields.io/github/commit-activity/m/WebAV-Tech/WebAV)\n![NPM downloads](https://img.shields.io/npm/dm/@webav/av-cliper)\n[![Release](https://github.com/WebAV-Tech/WebAV/actions/workflows/release.yml/badge.svg)](https://github.com/WebAV-Tech/WebAV/actions/workflows/release.yml)\n\nEnglish | [中文](./README_CN.md)\n\nWebAV is an SDK for **creating/editing** video files on the web platform, built on WebCodecs.\n\n### Features\n\n- Cross-platform: Supports running on Edge and Chrome browsers, as well as in Electron.\n- Zero Cost: Fully utilizes client-side computation, eliminating server costs.\n- Privacy and Security: No user data is uploaded.\n- High Performance: 10 to 20 times faster than ffmpeg.wasm.\n- Easy to Extend: Developer-friendly for web developers, easily integrates with Canvas and WebAudio for custom functionality.\n- Small Size: Approximately 50KB (MINIFIED + GZIPPED, without tree-shaking).\n\n_Compatible with Chrome 102+_\n\n### Use Cases\n\n- Batch audio and video file processing, such as adding watermarks, dubbing, and embedding subtitles\n- Building audio and video related products, such as video editing, live streaming, and video animation production\n\n## DEMO\n\nThe WebAV project offers a variety of quick DEMO experiences. Visit the [DEMO Homepage](https://webav-tech.github.io/WebAV/demo) to check the compatibility of your current device.\n\n_Note: The test video resources are hosted on GitHub pages, so starting a DEMO may require some network loading time._\n\nHere are some feature demos you might be interested in:\n\n- [Video Concatenation](https://webav-tech.github.io/WebAV/demo/2_1-concat-video)\n- [Video Editing](https://webav-tech.github.io/WebAV/demo/6_4-video-editor)\n- [Live Recording](https://webav-tech.github.io/WebAV/demo/4_2-recorder-avcanvas)\n- WebAV + Canvas + WebAudio [Decode and Play Video](https://webav-tech.github.io/WebAV/demo/1_1-decode-video)\n\n## Packages Introduction\n\n### [av-cliper](https://webav-tech.github.io/WebAV/_api/av-cliper/)\n\n`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.\n\nHere is a brief introduction to the core API of `av-cliper`:\n\n- `IClip` abstracts audio and video materials, parses audio and video, image, and subtitle resources, and provides data to other modules.\n- `Sprite\u003cIClip\u003e` 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.\n- `Combinator` can add multiple Sprites, and based on their positions, layers, and time offsets, synthesize and output as a video file.\n\n\u003cdetails\u003e\n\u003csummary style=\"cursor: pointer;\"\u003e Code Demo: Add a Moving Semi-transparent Watermark to a Video \u003c/summary\u003e\n\n```js\nimport {\n  ImgClip,\n  MP4Clip,\n  OffscreenSprite,\n  renderTxt2ImgBitmap,\n  Combinator,\n} from '@webav/av-cliper';\n\nconst spr1 = new OffscreenSprite(\n  new MP4Clip((await fetch('./video/bunny.mp4')).body),\n);\nconst spr2 = new OffscreenSprite(\n  new ImgClip(\n    await renderTxt2ImgBitmap(\n      'Watermark',\n      `font-size:40px; color: white; text-shadow: 2px 2px 6px red;`,\n    ),\n  ),\n);\nspr2.time = { offset: 0, duration: 5e6 };\nspr2.setAnimation(\n  {\n    '0%': { x: 0, y: 0 },\n    '25%': { x: 1200, y: 680 },\n    '50%': { x: 1200, y: 0 },\n    '75%': { x: 0, y: 680 },\n    '100%': { x: 0, y: 0 },\n  },\n  { duration: 4e6, iterCount: 1 },\n);\nspr2.zIndex = 10;\nspr2.opacity = 0.5;\n\nconst com = new Combinator({\n  width: 1280,\n  height: 720,\n});\n\nawait com.addSprite(spr1);\nawait com.addSprite(spr2);\n\ncom.output(); // =\u003e ReadableStream\n```\n\n\u003c/details\u003e\n\n### [av-canvas](https://webav-tech.github.io/WebAV/_api/av-canvas/)\n\n`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.\n\n\u003cdetails\u003e\n\u003csummary style=\"cursor: pointer;\"\u003e Code Demo: Add Video and Text to the Canvas \u003c/summary\u003e\n\n```js\nimport {\n  ImgClip,\n  MP4Clip,\n  VisibleSprite,\n  renderTxt2ImgBitmap,\n} from '@webav/av-cliper';\nimport { AVCanvas } from '@webav/av-canvas';\n\nconst avCvs = new AVCanvas(document.querySelector('#app'), {\n  width: 1280,\n  height: 720,\n});\n\nconst spr1 = new VisibleSprite(\n  new MP4Clip((await fetch('./video/bunny.mp4')).body),\n);\nconst spr2 = new VisibleSprite(\n  new ImgClip(\n    await renderTxt2ImgBitmap(\n      'Watermark',\n      `font-size:40px; color: white; text-shadow: 2px 2px 6px red;`,\n    ),\n  ),\n);\n\nawait avCvs.add(spr1);\nawait avCvs.add(spr2);\n\n// Export user-edited materials into a video\n// (await avCvs.createCombinator()).output()\n\n// Capture stream from the canvas (MediaStream) for live streaming or video recording\n// avCvs.captureStream()\n```\n\n\u003c/details\u003e\n\n### [av-recorder](https://webav-tech.github.io/WebAV/_api/av-canvas/)\n\n`av-recorder` records `MediaStream` and outputs the video file stream in MP4 format.\n\n\u003cdetails\u003e\n\u003csummary style=\"cursor: pointer;\"\u003e Code Demo: Record Camera and Microphone, Output MP4 File Stream \u003c/summary\u003e\n\n```js\nimport { AVRecorder } from '@webav/av-recorder';\nconst mediaStream = await navigator.mediaDevices.getUserMedia({\n  video: true,\n  audio: true,\n});\n\nconst recorder = new AVRecorder(mediaStream);\nrecorder.start(); // =\u003e ReadableStream\n```\n\n\u003c/details\u003e\n\n## Contributing\n\n### Running the Project\n\n1. Clone the current project locally\n2. Execute `pnpm install \u0026\u0026 pnpm build` in the root directory\n3. Change directory to the specific package (e.g., av-cliper) and run `pnpm dev`\n4. The path is the filename in the DEMO directory, such as `concat-media.html`\n5. Open the DEMO URL in the browser, such as `http://localhost:6066/concat-media.html`\n6. Run unit tests for the package with `pnpm test`\n\n### Running the WebAV Site\n\n1. Clone the current project locally\n2. Execute `pnpm install \u0026\u0026 pnpm build` in the root directory\n3. Change directory to `doc-site` and run `pnpm dev`\n4. Follow the terminal prompts to visit the specified URL\n\nIf you are a beginner in the field of web audio and video, you can start by learning the basics:\n\n[Articles by the Author](https://webav-tech.github.io/WebAV/article)  \n[Web Audio and Video Knowledge Graph](https://github.com/hughfenghen/WebAV-KnowledgeGraph)\n\n## Sponsor Author\n\nIf this project has been helpful to you, please sponsor the author to a milk tea ：）\n\n[Paypal.me](https://paypal.me/hughfenghen)\n\n\u003c!--\nChatGPT:\n\n你是一位精通中英文的资深翻译，长时间从事计算机领域的技术文章翻译工作。\n\n我正在为一个音视频开源项目撰写 README 中文文档，需要你帮忙将中文翻译为英文。\n\n翻译过程有以下要求：\n- 翻译结果需符合英语母语者的习惯，符合技术文章规范，可以进行适当润色\n- 翻译的内容为 Markdown 文本，翻译结果应该保持 Markdown 格式\n- 不需要翻译 html、js 代码，但需要翻译代码中中文注释\n- 不需要翻译 URL 链接 --\u003e\n","funding_links":["https://paypal.me/hughfenghen"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebav-tech%2Fwebav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebav-tech%2Fwebav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebav-tech%2Fwebav/lists"}