Скачать WebAV - Скачать исходный код WebAV

WebAV

Данные веб-сайта

1.0.0

Скачать

Webav

Английский | 中文

Webav - это SDK для создания/редактирования видеофайлов на веб -платформе, созданной на веб -кодексах.

Функции

Кроссплатформенные: поддерживает работу на краях и браузерах Chrome, а также в электронах.
Ноль стоимости: полностью использует вычисления на стороне клиента, устраняя затраты на сервер.
Конфиденциальность и безопасность: пользовательские данные не загружаются.
Высокая производительность: в 10-20 раз быстрее, чем ffmpeg.wasm.
Легко расширить: удобно для разработчиков для веб-разработчиков, легко интегрируется с Canvas и Webaudio для пользовательских функций.
Небольшой размер: приблизительно 50 КБ (минимизированный + gzipped, без уклонения деревьев).

Совместим с Chrome 102+

Варианты использования

Обработка аудио и видео -файлов, такая как добавление водяных знаков, дублирование и внедрение субтитров
Создание продуктов, связанных с аудио и видео, такими как редактирование видео, потоковое вещание и производство видео -анимации

Демо

Проект Webav предлагает множество быстрых демонстрационных впечатлений. Посетите домашнюю страницу демонстрации, чтобы проверить совместимость вашего текущего устройства.

Примечание. Тестовые видео ресурсы размещаются на страницах GitHub, поэтому для начала демонстрации может потребоваться некоторое время загрузки сети.

Вот некоторые функции демонстраций, которые вас могут заинтересовать:

Видео -конкатенация
Редактирование видео
Живая запись
Webav + Canvas + Webaudio Декодируйте и воспроизводите видео

Пакеты введение

av-cliper

av-cliper -это основополагающий SDK для обработки аудио и видео данных. Он предоставляет основные классы и функции, чтобы помочь разработчикам быстро достичь целевых функций.

Вот краткое введение в основной API av-cliper :

IClip Abstracts Audio и Video Materials, Sacksses Audio и Video, Image и Subtitle Resources и предоставляет данные другим модулям.
Sprite<IClip> прикрепляет пространственные и временные атрибуты к материалам, позволяя контролировать пространственное положение и смещение времени видео в материале, достигая многоядерного сотрудничества, анимации и других функций.
Combinator может добавлять несколько спрайтов и на основе их положений, слоев и смещений времени, синтезировать и выходить в виде видеофайла.

Демонстрация кода: добавьте перемещение полупрозрачного водяного знака в видео

 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 опирается на основные возможности av-cliper и предоставляет 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 записывает MediaStream и выводит видео-поток видеофайла в формате MP4.

Демонстрация кода: записи камеры и микрофон, выходной поток файлов MP4 MP4

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

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

Внося

Запуск проекта

Клонировать текущий проект локально
Выполнить pnpm install && pnpm build в корневом каталоге
Изменить каталог на конкретный пакет (например, AV-Cliper) и запустите pnpm dev
Путь является именем файла в демонстрационном каталоге, таком как concat-media.html
Откройте демонстрационный URL в браузере, такой как http://localhost:6066/concat-media.html
Запустите модульные тесты для пакета с pnpm test